Fix copilot chat title

* fix(webhooks): subscription recreation path

* improvement(webhooks): remove dead code

* fix tests

* address bugbot comments

* fix restoration edge case

* fix more edge cases

* address bugbot comments

* fix gmail polling

* add warnings for UI indication for credential sets

apps/sim/app/(auth)/login/login-form.tsx

@@ -2,10 +2,9 @@
 
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { Button } from '@/components/ui/button'
 import {
   Dialog,
   DialogContent,
@@ -22,6 +21,7 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
 import { SocialLoginButtons } from '@/app/(auth)/components/social-login-buttons'
 import { SSOLoginButton } from '@/app/(auth)/components/sso-login-button'
 import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
@@ -107,7 +107,6 @@ export default function LoginPage({
   const [passwordErrors, setPasswordErrors] = useState<string[]>([])
   const [showValidationError, setShowValidationError] = useState(false)
   const buttonClass = useBrandedButtonClass()
-  const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const [callbackUrl, setCallbackUrl] = useState('/workspace')
   const [isInviteFlow, setIsInviteFlow] = useState(false)
@@ -115,7 +114,6 @@ export default function LoginPage({
   const [forgotPasswordOpen, setForgotPasswordOpen] = useState(false)
   const [forgotPasswordEmail, setForgotPasswordEmail] = useState('')
   const [isSubmittingReset, setIsSubmittingReset] = useState(false)
-  const [isResetButtonHovered, setIsResetButtonHovered] = useState(false)
   const [resetStatus, setResetStatus] = useState<{
     type: 'success' | 'error' | null
     message: string
@@ -184,6 +182,13 @@ export default function LoginPage({
     e.preventDefault()
     setIsLoading(true)
 
+    const redirectToVerify = (emailToVerify: string) => {
+      if (typeof window !== 'undefined') {
+        sessionStorage.setItem('verificationEmail', emailToVerify)
+      }
+      router.push('/verify')
+    }
+
     const formData = new FormData(e.currentTarget)
     const emailRaw = formData.get('email') as string
     const email = emailRaw.trim().toLowerCase()
@@ -215,9 +220,9 @@ export default function LoginPage({
           onError: (ctx) => {
             logger.error('Login error:', ctx.error)
 
-            // EMAIL_NOT_VERIFIED is handled by the catch block which redirects to /verify
             if (ctx.error.code?.includes('EMAIL_NOT_VERIFIED')) {
               errorHandled = true
+              redirectToVerify(email)
               return
             }
 
@@ -285,10 +290,7 @@ export default function LoginPage({
       router.push(safeCallbackUrl)
     } catch (err: any) {
       if (err.message?.includes('not verified') || err.code?.includes('EMAIL_NOT_VERIFIED')) {
-        if (typeof window !== 'undefined') {
-          sessionStorage.setItem('verificationEmail', email)
-        }
-        router.push('/verify')
+        redirectToVerify(email)
         return
       }
 
@@ -491,24 +493,14 @@ export default function LoginPage({
             </div>
           </div>
 
-          <Button
+          <BrandedButton
             type='submit'
-            onMouseEnter={() => setIsButtonHovered(true)}
-            onMouseLeave={() => setIsButtonHovered(false)}
-            className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
             disabled={isLoading}
+            loading={isLoading}
+            loadingText='Signing in'
           >
-            <span className='flex items-center gap-1'>
-              {isLoading ? 'Signing in...' : 'Sign in'}
-              <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-                {isButtonHovered ? (
-                  <ArrowRight className='h-4 w-4' aria-hidden='true' />
-                ) : (
-                  <ChevronRight className='h-4 w-4' aria-hidden='true' />
-                )}
-              </span>
-            </span>
-          </Button>
+            Sign in
+          </BrandedButton>
         </form>
       )}
 
@@ -619,25 +611,15 @@ export default function LoginPage({
                 <p>{resetStatus.message}</p>
               </div>
             )}
-            <Button
+            <BrandedButton
               type='button'
               onClick={handleForgotPassword}
-              onMouseEnter={() => setIsResetButtonHovered(true)}
-              onMouseLeave={() => setIsResetButtonHovered(false)}
-              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
               disabled={isSubmittingReset}
+              loading={isSubmittingReset}
+              loadingText='Sending'
             >
-              <span className='flex items-center gap-1'>
-                {isSubmittingReset ? 'Sending...' : 'Send Reset Link'}
-                <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-                  {isResetButtonHovered ? (
-                    <ArrowRight className='h-4 w-4' aria-hidden='true' />
-                  ) : (
-                    <ChevronRight className='h-4 w-4' aria-hidden='true' />
-                  )}
-                </span>
-              </span>
-            </Button>
+              Send Reset Link
+            </BrandedButton>
           </div>
         </DialogContent>
       </Dialog>

apps/sim/app/(auth)/reset-password/reset-password-form.tsx

@@ -1,13 +1,12 @@
 'use client'
 
 import { useState } from 'react'
-import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { Eye, EyeOff } from 'lucide-react'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { inter } from '@/app/_styles/fonts/inter/inter'
-import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
 
 interface RequestResetFormProps {
   email: string
@@ -28,9 +27,6 @@ export function RequestResetForm({
   statusMessage,
   className,
 }: RequestResetFormProps) {
-  const buttonClass = useBrandedButtonClass()
-  const [isButtonHovered, setIsButtonHovered] = useState(false)
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     onSubmit(email)
@@ -68,24 +64,14 @@ export function RequestResetForm({
         )}
       </div>
 
-      <Button
+      <BrandedButton
         type='submit'
         disabled={isSubmitting}
-        onMouseEnter={() => setIsButtonHovered(true)}
-        onMouseLeave={() => setIsButtonHovered(false)}
-        className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
+        loading={isSubmitting}
+        loadingText='Sending'
       >
-        <span className='flex items-center gap-1'>
-          {isSubmitting ? 'Sending...' : 'Send Reset Link'}
-          <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-            {isButtonHovered ? (
-              <ArrowRight className='h-4 w-4' aria-hidden='true' />
-            ) : (
-              <ChevronRight className='h-4 w-4' aria-hidden='true' />
-            )}
-          </span>
-        </span>
-      </Button>
+        Send Reset Link
+      </BrandedButton>
     </form>
   )
 }
@@ -112,8 +98,6 @@ export function SetNewPasswordForm({
   const [validationMessage, setValidationMessage] = useState('')
   const [showPassword, setShowPassword] = useState(false)
   const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-  const buttonClass = useBrandedButtonClass()
-  const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
@@ -243,24 +227,14 @@ export function SetNewPasswordForm({
         )}
       </div>
 
-      <Button
-        disabled={isSubmitting || !token}
+      <BrandedButton
         type='submit'
-        onMouseEnter={() => setIsButtonHovered(true)}
-        onMouseLeave={() => setIsButtonHovered(false)}
-        className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
+        disabled={isSubmitting || !token}
+        loading={isSubmitting}
+        loadingText='Resetting'
       >
-        <span className='flex items-center gap-1'>
-          {isSubmitting ? 'Resetting...' : 'Reset Password'}
-          <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-            {isButtonHovered ? (
-              <ArrowRight className='h-4 w-4' aria-hidden='true' />
-            ) : (
-              <ChevronRight className='h-4 w-4' aria-hidden='true' />
-            )}
-          </span>
-        </span>
-      </Button>
+        Reset Password
+      </BrandedButton>
     </form>
   )
 }

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -2,10 +2,9 @@
 
 import { Suspense, useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { ArrowRight, ChevronRight, Eye, EyeOff } from 'lucide-react'
+import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { client, useSession } from '@/lib/auth/auth-client'
@@ -14,6 +13,7 @@ import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
 import { SocialLoginButtons } from '@/app/(auth)/components/social-login-buttons'
 import { SSOLoginButton } from '@/app/(auth)/components/sso-login-button'
 import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
@@ -97,7 +97,6 @@ function SignupFormContent({
   const [redirectUrl, setRedirectUrl] = useState('')
   const [isInviteFlow, setIsInviteFlow] = useState(false)
   const buttonClass = useBrandedButtonClass()
-  const [isButtonHovered, setIsButtonHovered] = useState(false)
 
   const [name, setName] = useState('')
   const [nameErrors, setNameErrors] = useState<string[]>([])
@@ -476,24 +475,14 @@ function SignupFormContent({
             </div>
           </div>
 
-          <Button
+          <BrandedButton
             type='submit'
-            onMouseEnter={() => setIsButtonHovered(true)}
-            onMouseLeave={() => setIsButtonHovered(false)}
-            className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all'
             disabled={isLoading}
+            loading={isLoading}
+            loadingText='Creating account'
           >
-            <span className='flex items-center gap-1'>
-              {isLoading ? 'Creating account' : 'Create account'}
-              <span className='inline-flex transition-transform duration-200 group-hover:translate-x-0.5'>
-                {isButtonHovered ? (
-                  <ArrowRight className='h-4 w-4' aria-hidden='true' />
-                ) : (
-                  <ChevronRight className='h-4 w-4' aria-hidden='true' />
-                )}
-              </span>
-            </span>
-          </Button>
+            Create account
+          </BrandedButton>
         </form>
       )}
 

apps/sim/app/(landing)/careers/page.tsx

@@ -4,7 +4,6 @@ import { useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { X } from 'lucide-react'
 import { Textarea } from '@/components/emcn'
-import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import {
@@ -18,6 +17,7 @@ import { isHosted } from '@/lib/core/config/feature-flags'
 import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BrandedButton } from '@/app/(auth)/components/branded-button'
 import Footer from '@/app/(landing)/components/footer/footer'
 import Nav from '@/app/(landing)/components/nav/nav'
 
@@ -493,18 +493,17 @@ export default function CareersPage() {
 
               {/* Submit Button */}
               <div className='flex justify-end pt-2'>
-                <Button
+                <BrandedButton
                   type='submit'
                   disabled={isSubmitting || submitStatus === 'success'}
-                  className='min-w-[200px] rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all duration-300 hover:opacity-90 disabled:opacity-50'
-                  size='lg'
+                  loading={isSubmitting}
+                  loadingText='Submitting'
+                  showArrow={false}
+                  fullWidth={false}
+                  className='min-w-[200px]'
                 >
-                  {isSubmitting
-                    ? 'Submitting...'
-                    : submitStatus === 'success'
-                      ? 'Submitted'
-                      : 'Submit Application'}
-                </Button>
+                  {submitStatus === 'success' ? 'Submitted' : 'Submit Application'}
+                </BrandedButton>
               </div>
             </form>
           </section>

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

@@ -59,7 +59,7 @@ export default function StatusIndicator() {
       href={statusUrl}
       target='_blank'
       rel='noopener noreferrer'
-      className={`flex items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`}
+      className={`flex min-w-[165px] items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`}
       aria-label={`System status: ${message}`}
     >
       <StatusDotIcon status={status} className='h-[6px] w-[6px]' aria-hidden='true' />

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

@@ -11,6 +11,7 @@ import { useBrandConfig } from '@/lib/branding/branding'
 import { isHosted } from '@/lib/core/config/feature-flags'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
 import { getFormattedGitHubStars } from '@/app/(landing)/actions/github'
+import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
 
 const logger = createLogger('nav')
 
@@ -20,11 +21,12 @@ interface NavProps {
 }
 
 export default function Nav({ hideAuthButtons = false, variant = 'landing' }: NavProps = {}) {
-  const [githubStars, setGithubStars] = useState('25.1k')
+  const [githubStars, setGithubStars] = useState('25.8k')
   const [isHovered, setIsHovered] = useState(false)
   const [isLoginHovered, setIsLoginHovered] = useState(false)
   const router = useRouter()
   const brand = useBrandConfig()
+  const buttonClass = useBrandedButtonClass()
 
   useEffect(() => {
     if (variant !== 'landing') return
@@ -183,7 +185,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
             href='/signup'
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
-            className='group inline-flex items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[14px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all sm:text-[16px]'
+            className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all`}
             aria-label='Get started with Sim - Sign up for free'
             prefetch={true}
           >

apps/sim/app/(landing)/studio/[slug]/back-link.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowLeft, ChevronLeft } from 'lucide-react'
+import Link from 'next/link'
+
+export function BackLink() {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <Link
+      href='/studio'
+      className='group flex items-center gap-1 text-gray-600 text-sm hover:text-gray-900'
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <span className='group-hover:-translate-x-0.5 inline-flex transition-transform duration-200'>
+        {isHovered ? (
+          <ArrowLeft className='h-4 w-4' aria-hidden='true' />
+        ) : (
+          <ChevronLeft className='h-4 w-4' aria-hidden='true' />
+        )}
+      </span>
+      Back to Sim Studio
+    </Link>
+  )
+}

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

@@ -5,7 +5,10 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/emcn'
 import { FAQ } from '@/lib/blog/faq'
 import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/blog/registry'
 import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
+import { getBaseUrl } from '@/lib/core/utils/urls'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BackLink } from '@/app/(landing)/studio/[slug]/back-link'
+import { ShareButton } from '@/app/(landing)/studio/[slug]/share-button'
 
 export async function generateStaticParams() {
   const posts = await getAllPostMeta()
@@ -48,9 +51,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       />
       <header className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
         <div className='mb-6'>
-          <Link href='/studio' className='text-gray-600 text-sm hover:text-gray-900'>
-            ← Back to Sim Studio
-          </Link>
+          <BackLink />
         </div>
         <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
           <div className='w-full flex-shrink-0 md:w-[450px]'>
@@ -75,28 +76,31 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             >
               {post.title}
             </h1>
-            <div className='mt-4 flex items-center gap-3'>
-              {(post.authors || [post.author]).map((a, idx) => (
-                <div key={idx} className='flex items-center gap-2'>
-                  {a?.avatarUrl ? (
-                    <Avatar className='size-6'>
-                      <AvatarImage src={a.avatarUrl} alt={a.name} />
-                      <AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
-                    </Avatar>
-                  ) : null}
-                  <Link
-                    href={a?.url || '#'}
-                    target='_blank'
-                    rel='noopener noreferrer author'
-                    className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
-                    itemProp='author'
-                    itemScope
-                    itemType='https://schema.org/Person'
-                  >
-                    <span itemProp='name'>{a?.name}</span>
-                  </Link>
-                </div>
-              ))}
+            <div className='mt-4 flex items-center justify-between'>
+              <div className='flex items-center gap-3'>
+                {(post.authors || [post.author]).map((a, idx) => (
+                  <div key={idx} className='flex items-center gap-2'>
+                    {a?.avatarUrl ? (
+                      <Avatar className='size-6'>
+                        <AvatarImage src={a.avatarUrl} alt={a.name} />
+                        <AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
+                      </Avatar>
+                    ) : null}
+                    <Link
+                      href={a?.url || '#'}
+                      target='_blank'
+                      rel='noopener noreferrer author'
+                      className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
+                      itemProp='author'
+                      itemScope
+                      itemType='https://schema.org/Person'
+                    >
+                      <span itemProp='name'>{a?.name}</span>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+              <ShareButton url={`${getBaseUrl()}/studio/${slug}`} title={post.title} />
             </div>
           </div>
         </div>

apps/sim/app/(landing)/studio/[slug]/share-button.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useState } from 'react'
+import { Share2 } from 'lucide-react'
+import { Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+
+interface ShareButtonProps {
+  url: string
+  title: string
+}
+
+export function ShareButton({ url, title }: ShareButtonProps) {
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopied(true)
+      setTimeout(() => {
+        setCopied(false)
+        setOpen(false)
+      }, 1000)
+    } catch {
+      setOpen(false)
+    }
+  }
+
+  const handleShareTwitter = () => {
+    const tweetUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`
+    window.open(tweetUrl, '_blank', 'noopener,noreferrer')
+    setOpen(false)
+  }
+
+  const handleShareLinkedIn = () => {
+    const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`
+    window.open(linkedInUrl, '_blank', 'noopener,noreferrer')
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      variant='secondary'
+      size='sm'
+      colorScheme='inverted'
+    >
+      <PopoverTrigger asChild>
+        <button
+          className='flex items-center gap-1.5 text-gray-600 text-sm hover:text-gray-900'
+          aria-label='Share this post'
+        >
+          <Share2 className='h-4 w-4' />
+          <span>Share</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align='end' minWidth={140}>
+        <PopoverItem onClick={handleCopyLink}>{copied ? 'Copied!' : 'Copy link'}</PopoverItem>
+        <PopoverItem onClick={handleShareTwitter}>Share on X</PopoverItem>
+        <PopoverItem onClick={handleShareLinkedIn}>Share on LinkedIn</PopoverItem>
+      </PopoverContent>
+    </Popover>
+  )
+}

apps/sim/app/(landing)/studio/page.tsx

@@ -22,7 +22,7 @@ export default async function StudioIndex({
       ? filtered.sort((a, b) => {
           if (a.featured && !b.featured) return -1
           if (!a.featured && b.featured) return 1
-          return 0
+          return new Date(b.date).getTime() - new Date(a.date).getTime()
         })
       : filtered
 

apps/sim/app/api/a2a/agents/[agentId]/route.ts

@@ -8,6 +8,7 @@ import type { AgentCapabilities, AgentSkill } from '@/lib/a2a/types'
 import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { getRedisClient } from '@/lib/core/config/redis'
 import { loadWorkflowFromNormalizedTables } from '@/lib/workflows/persistence/utils'
+import { checkWorkspaceAccess } from '@/lib/workspaces/permissions/utils'
 
 const logger = createLogger('A2AAgentCardAPI')
 
@@ -95,6 +96,11 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<Ro
       return NextResponse.json({ error: 'Agent not found' }, { status: 404 })
     }
 
+    const workspaceAccess = await checkWorkspaceAccess(existingAgent.workspaceId, auth.userId)
+    if (!workspaceAccess.canWrite) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
     const body = await request.json()
 
     if (
@@ -160,6 +166,11 @@ export async function DELETE(request: NextRequest, { params }: { params: Promise
       return NextResponse.json({ error: 'Agent not found' }, { status: 404 })
     }
 
+    const workspaceAccess = await checkWorkspaceAccess(existingAgent.workspaceId, auth.userId)
+    if (!workspaceAccess.canWrite) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
     await db.delete(a2aAgent).where(eq(a2aAgent.id, agentId))
 
     logger.info(`Deleted A2A agent: ${agentId}`)
@@ -194,6 +205,11 @@ export async function POST(request: NextRequest, { params }: { params: Promise<R
       return NextResponse.json({ error: 'Agent not found' }, { status: 404 })
     }
 
+    const workspaceAccess = await checkWorkspaceAccess(existingAgent.workspaceId, auth.userId)
+    if (!workspaceAccess.canWrite) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
     const body = await request.json()
     const action = body.action as 'publish' | 'unpublish' | 'refresh'
 

apps/sim/app/api/a2a/serve/[agentId]/route.ts

@@ -16,6 +16,7 @@ import {
 import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { getBrandConfig } from '@/lib/branding/branding'
 import { acquireLock, getRedisClient, releaseLock } from '@/lib/core/config/redis'
+import { validateExternalUrl } from '@/lib/core/security/input-validation'
 import { SSE_HEADERS } from '@/lib/core/utils/sse'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { markExecutionCancelled } from '@/lib/execution/cancellation'
@@ -1118,17 +1119,13 @@ async function handlePushNotificationSet(
     )
   }
 
-  try {
-    const url = new URL(params.pushNotificationConfig.url)
-    if (url.protocol !== 'https:') {
-      return NextResponse.json(
-        createError(id, A2A_ERROR_CODES.INVALID_PARAMS, 'Push notification URL must use HTTPS'),
-        { status: 400 }
-      )
-    }
-  } catch {
+  const urlValidation = validateExternalUrl(
+    params.pushNotificationConfig.url,
+    'Push notification URL'
+  )
+  if (!urlValidation.isValid) {
     return NextResponse.json(
-      createError(id, A2A_ERROR_CODES.INVALID_PARAMS, 'Invalid push notification URL'),
+      createError(id, A2A_ERROR_CODES.INVALID_PARAMS, urlValidation.error || 'Invalid URL'),
       { status: 400 }
     )
   }

apps/sim/app/api/auth/oauth/utils.ts

@@ -4,6 +4,11 @@ import { createLogger } from '@sim/logger'
 import { and, desc, eq, inArray } from 'drizzle-orm'
 import { getSession } from '@/lib/auth'
 import { refreshOAuthToken } from '@/lib/oauth'
+import {
+  getMicrosoftRefreshTokenExpiry,
+  isMicrosoftProvider,
+  PROACTIVE_REFRESH_THRESHOLD_DAYS,
+} from '@/lib/oauth/microsoft'
 
 const logger = createLogger('OAuthUtilsAPI')
 
@@ -205,15 +210,32 @@ export async function refreshAccessTokenIfNeeded(
   }
 
   // Decide if we should refresh: token missing OR expired
-  const expiresAt = credential.accessTokenExpiresAt
+  const accessTokenExpiresAt = credential.accessTokenExpiresAt
+  const refreshTokenExpiresAt = credential.refreshTokenExpiresAt
   const now = new Date()
-  const shouldRefresh =
-    !!credential.refreshToken && (!credential.accessToken || (expiresAt && expiresAt <= now))
+
+  // Check if access token needs refresh (missing or expired)
+  const accessTokenNeedsRefresh =
+    !!credential.refreshToken &&
+    (!credential.accessToken || (accessTokenExpiresAt && accessTokenExpiresAt <= now))
+
+  // Check if we should proactively refresh to prevent refresh token expiry
+  // This applies to Microsoft providers whose refresh tokens expire after 90 days of inactivity
+  const proactiveRefreshThreshold = new Date(
+    now.getTime() + PROACTIVE_REFRESH_THRESHOLD_DAYS * 24 * 60 * 60 * 1000
+  )
+  const refreshTokenNeedsProactiveRefresh =
+    !!credential.refreshToken &&
+    isMicrosoftProvider(credential.providerId) &&
+    refreshTokenExpiresAt &&
+    refreshTokenExpiresAt <= proactiveRefreshThreshold
+
+  const shouldRefresh = accessTokenNeedsRefresh || refreshTokenNeedsProactiveRefresh
 
   const accessToken = credential.accessToken
 
   if (shouldRefresh) {
-    logger.info(`[${requestId}] Token expired, attempting to refresh for credential`)
+    logger.info(`[${requestId}] Refreshing token for credential`)
     try {
       const refreshedToken = await refreshOAuthToken(
         credential.providerId,
@@ -227,11 +249,15 @@ export async function refreshAccessTokenIfNeeded(
           userId: credential.userId,
           hasRefreshToken: !!credential.refreshToken,
         })
+        if (!accessTokenNeedsRefresh && accessToken) {
+          logger.info(`[${requestId}] Proactive refresh failed but access token still valid`)
+          return accessToken
+        }
         return null
       }
 
       // Prepare update data
-      const updateData: any = {
+      const updateData: Record<string, unknown> = {
         accessToken: refreshedToken.accessToken,
         accessTokenExpiresAt: new Date(Date.now() + refreshedToken.expiresIn * 1000),
         updatedAt: new Date(),
@@ -243,6 +269,10 @@ export async function refreshAccessTokenIfNeeded(
         updateData.refreshToken = refreshedToken.refreshToken
       }
 
+      if (isMicrosoftProvider(credential.providerId)) {
+        updateData.refreshTokenExpiresAt = getMicrosoftRefreshTokenExpiry()
+      }
+
       // Update the token in the database
       await db.update(account).set(updateData).where(eq(account.id, credentialId))
 
@@ -256,6 +286,10 @@ export async function refreshAccessTokenIfNeeded(
         credentialId,
         userId: credential.userId,
       })
+      if (!accessTokenNeedsRefresh && accessToken) {
+        logger.info(`[${requestId}] Proactive refresh failed but access token still valid`)
+        return accessToken
+      }
       return null
     }
   } else if (!accessToken) {
@@ -277,10 +311,27 @@ export async function refreshTokenIfNeeded(
   credentialId: string
 ): Promise<{ accessToken: string; refreshed: boolean }> {
   // Decide if we should refresh: token missing OR expired
-  const expiresAt = credential.accessTokenExpiresAt
+  const accessTokenExpiresAt = credential.accessTokenExpiresAt
+  const refreshTokenExpiresAt = credential.refreshTokenExpiresAt
   const now = new Date()
-  const shouldRefresh =
-    !!credential.refreshToken && (!credential.accessToken || (expiresAt && expiresAt <= now))
+
+  // Check if access token needs refresh (missing or expired)
+  const accessTokenNeedsRefresh =
+    !!credential.refreshToken &&
+    (!credential.accessToken || (accessTokenExpiresAt && accessTokenExpiresAt <= now))
+
+  // Check if we should proactively refresh to prevent refresh token expiry
+  // This applies to Microsoft providers whose refresh tokens expire after 90 days of inactivity
+  const proactiveRefreshThreshold = new Date(
+    now.getTime() + PROACTIVE_REFRESH_THRESHOLD_DAYS * 24 * 60 * 60 * 1000
+  )
+  const refreshTokenNeedsProactiveRefresh =
+    !!credential.refreshToken &&
+    isMicrosoftProvider(credential.providerId) &&
+    refreshTokenExpiresAt &&
+    refreshTokenExpiresAt <= proactiveRefreshThreshold
+
+  const shouldRefresh = accessTokenNeedsRefresh || refreshTokenNeedsProactiveRefresh
 
   // If token appears valid and present, return it directly
   if (!shouldRefresh) {
@@ -293,13 +344,17 @@ export async function refreshTokenIfNeeded(
 
     if (!refreshResult) {
       logger.error(`[${requestId}] Failed to refresh token for credential`)
+      if (!accessTokenNeedsRefresh && credential.accessToken) {
+        logger.info(`[${requestId}] Proactive refresh failed but access token still valid`)
+        return { accessToken: credential.accessToken, refreshed: false }
+      }
       throw new Error('Failed to refresh token')
     }
 
     const { accessToken: refreshedToken, expiresIn, refreshToken: newRefreshToken } = refreshResult
 
     // Prepare update data
-    const updateData: any = {
+    const updateData: Record<string, unknown> = {
       accessToken: refreshedToken,
       accessTokenExpiresAt: new Date(Date.now() + expiresIn * 1000), // Use provider's expiry
       updatedAt: new Date(),
@@ -311,6 +366,10 @@ export async function refreshTokenIfNeeded(
       updateData.refreshToken = newRefreshToken
     }
 
+    if (isMicrosoftProvider(credential.providerId)) {
+      updateData.refreshTokenExpiresAt = getMicrosoftRefreshTokenExpiry()
+    }
+
     await db.update(account).set(updateData).where(eq(account.id, credentialId))
 
     logger.info(`[${requestId}] Successfully refreshed access token`)
@@ -331,6 +390,11 @@ export async function refreshTokenIfNeeded(
       }
     }
 
+    if (!accessTokenNeedsRefresh && credential.accessToken) {
+      logger.info(`[${requestId}] Proactive refresh failed but access token still valid`)
+      return { accessToken: credential.accessToken, refreshed: false }
+    }
+
     logger.error(`[${requestId}] Refresh failed and no valid token found in DB`, error)
     throw error
   }

apps/sim/app/api/copilot/execute-tool/route.ts

@@ -104,17 +104,11 @@ export async function POST(req: NextRequest) {
     })
 
     // Build execution params starting with LLM-provided arguments
-    // Resolve all {{ENV_VAR}} references in the arguments
+    // Resolve all {{ENV_VAR}} references in the arguments (deep for nested objects)
     const executionParams: Record<string, any> = resolveEnvVarReferences(
       toolArgs,
       decryptedEnvVars,
-      {
-        resolveExactMatch: true,
-        allowEmbedded: true,
-        trimKeys: true,
-        onMissing: 'keep',
-        deep: true,
-      }
+      { deep: true }
     ) as Record<string, any>
 
     logger.info(`[${tracker.requestId}] Resolved env var references in arguments`, {

apps/sim/app/api/function/execute/route.test.ts

@@ -84,6 +84,14 @@ vi.mock('@/lib/execution/isolated-vm', () => ({
 
 vi.mock('@sim/logger', () => loggerMock)
 
+vi.mock('@/lib/auth/hybrid', () => ({
+  checkHybridAuth: vi.fn().mockResolvedValue({
+    success: true,
+    userId: 'user-123',
+    authType: 'session',
+  }),
+}))
+
 vi.mock('@/lib/execution/e2b', () => ({
   executeInE2B: vi.fn(),
 }))
@@ -110,6 +118,24 @@ describe('Function Execute API Route', () => {
   })
 
   describe('Security Tests', () => {
+    it('should reject unauthorized requests', async () => {
+      const { checkHybridAuth } = await import('@/lib/auth/hybrid')
+      vi.mocked(checkHybridAuth).mockResolvedValueOnce({
+        success: false,
+        error: 'Unauthorized',
+      })
+
+      const req = createMockRequest('POST', {
+        code: 'return "test"',
+      })
+
+      const response = await POST(req)
+      const data = await response.json()
+
+      expect(response.status).toBe(401)
+      expect(data).toHaveProperty('error', 'Unauthorized')
+    })
+
     it.concurrent('should use isolated-vm for secure sandboxed execution', async () => {
       const req = createMockRequest('POST', {
         code: 'return "test"',
@@ -313,7 +339,7 @@ describe('Function Execute API Route', () => {
           'block-2': 'world',
         },
         blockNameMapping: {
-          validVar: 'block-1',
+          validvar: 'block-1',
           another_valid: 'block-2',
         },
       })
@@ -539,7 +565,7 @@ describe('Function Execute API Route', () => {
           'block-complex': complexData,
         },
         blockNameMapping: {
-          complexData: 'block-complex',
+          complexdata: 'block-complex',
         },
       })
 

apps/sim/app/api/function/execute/route.ts

@@ -1,16 +1,17 @@
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { isE2bEnabled } from '@/lib/core/config/feature-flags'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { executeInE2B } from '@/lib/execution/e2b'
 import { executeInIsolatedVM } from '@/lib/execution/isolated-vm'
 import { CodeLanguage, DEFAULT_CODE_LANGUAGE, isValidCodeLanguage } from '@/lib/execution/languages'
 import { escapeRegExp, normalizeName, REFERENCE } from '@/executor/constants'
+import { type OutputSchema, resolveBlockReference } from '@/executor/utils/block-reference'
 import {
   createEnvVarPattern,
   createWorkflowVariablePattern,
 } from '@/executor/utils/reference-validation'
-import { navigatePath } from '@/executor/variables/resolvers/reference'
 export const dynamic = 'force-dynamic'
 export const runtime = 'nodejs'
 
@@ -470,14 +471,17 @@ function resolveEnvironmentVariables(
 
 function resolveTagVariables(
   code: string,
-  blockData: Record<string, any>,
+  blockData: Record<string, unknown>,
   blockNameMapping: Record<string, string>,
-  contextVariables: Record<string, any>
+  blockOutputSchemas: Record<string, OutputSchema>,
+  contextVariables: Record<string, unknown>,
+  language = 'javascript'
 ): string {
   let resolvedCode = code
+  const undefinedLiteral = language === 'python' ? 'None' : 'undefined'
 
   const tagPattern = new RegExp(
-    `${REFERENCE.START}([a-zA-Z_][a-zA-Z0-9_${REFERENCE.PATH_DELIMITER}]*[a-zA-Z0-9_])${REFERENCE.END}`,
+    `${REFERENCE.START}([a-zA-Z_](?:[a-zA-Z0-9_${REFERENCE.PATH_DELIMITER}]*[a-zA-Z0-9_])?)${REFERENCE.END}`,
     'g'
   )
   const tagMatches = resolvedCode.match(tagPattern) || []
@@ -486,41 +490,37 @@ function resolveTagVariables(
     const tagName = match.slice(REFERENCE.START.length, -REFERENCE.END.length).trim()
     const pathParts = tagName.split(REFERENCE.PATH_DELIMITER)
     const blockName = pathParts[0]
+    const fieldPath = pathParts.slice(1)
 
-    const blockId = blockNameMapping[blockName]
-    if (!blockId) {
+    const result = resolveBlockReference(blockName, fieldPath, {
+      blockNameMapping,
+      blockData,
+      blockOutputSchemas,
+    })
+
+    if (!result) {
       continue
     }
 
-    const blockOutput = blockData[blockId]
-    if (blockOutput === undefined) {
-      continue
-    }
-
-    let tagValue: any
-    if (pathParts.length === 1) {
-      tagValue = blockOutput
-    } else {
-      tagValue = navigatePath(blockOutput, pathParts.slice(1))
-    }
+    let tagValue = result.value
 
     if (tagValue === undefined) {
+      resolvedCode = resolvedCode.replace(new RegExp(escapeRegExp(match), 'g'), undefinedLiteral)
       continue
     }
 
-    if (
-      typeof tagValue === 'string' &&
-      tagValue.length > 100 &&
-      (tagValue.startsWith('{') || tagValue.startsWith('['))
-    ) {
-      try {
-        tagValue = JSON.parse(tagValue)
-      } catch {
-        // Keep as-is
+    if (typeof tagValue === 'string') {
+      const trimmed = tagValue.trimStart()
+      if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+        try {
+          tagValue = JSON.parse(tagValue)
+        } catch {
+          // Keep as string if not valid JSON
+        }
       }
     }
 
-    const safeVarName = `__tag_${tagName.replace(/[^a-zA-Z0-9_]/g, '_')}`
+    const safeVarName = `__tag_${tagName.replace(/_/g, '_1').replace(/\./g, '_0')}`
     contextVariables[safeVarName] = tagValue
     resolvedCode = resolvedCode.replace(new RegExp(escapeRegExp(match), 'g'), safeVarName)
   }
@@ -537,18 +537,27 @@ function resolveTagVariables(
  */
 function resolveCodeVariables(
   code: string,
-  params: Record<string, any>,
+  params: Record<string, unknown>,
   envVars: Record<string, string> = {},
-  blockData: Record<string, any> = {},
+  blockData: Record<string, unknown> = {},
   blockNameMapping: Record<string, string> = {},
-  workflowVariables: Record<string, any> = {}
-): { resolvedCode: string; contextVariables: Record<string, any> } {
+  blockOutputSchemas: Record<string, OutputSchema> = {},
+  workflowVariables: Record<string, unknown> = {},
+  language = 'javascript'
+): { resolvedCode: string; contextVariables: Record<string, unknown> } {
   let resolvedCode = code
-  const contextVariables: Record<string, any> = {}
+  const contextVariables: Record<string, unknown> = {}
 
   resolvedCode = resolveWorkflowVariables(resolvedCode, workflowVariables, contextVariables)
   resolvedCode = resolveEnvironmentVariables(resolvedCode, params, envVars, contextVariables)
-  resolvedCode = resolveTagVariables(resolvedCode, blockData, blockNameMapping, contextVariables)
+  resolvedCode = resolveTagVariables(
+    resolvedCode,
+    blockData,
+    blockNameMapping,
+    blockOutputSchemas,
+    contextVariables,
+    language
+  )
 
   return { resolvedCode, contextVariables }
 }
@@ -573,6 +582,12 @@ export async function POST(req: NextRequest) {
   let resolvedCode = '' // Store resolved code for error reporting
 
   try {
+    const auth = await checkHybridAuth(req)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized function execution attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await req.json()
 
     const { DEFAULT_EXECUTION_TIMEOUT_MS } = await import('@/lib/execution/constants')
@@ -585,6 +600,7 @@ export async function POST(req: NextRequest) {
       envVars = {},
       blockData = {},
       blockNameMapping = {},
+      blockOutputSchemas = {},
       workflowVariables = {},
       workflowId,
       isCustomTool = false,
@@ -601,20 +617,21 @@ export async function POST(req: NextRequest) {
       isCustomTool,
     })
 
-    // Resolve variables in the code with workflow environment variables
+    const lang = isValidCodeLanguage(language) ? language : DEFAULT_CODE_LANGUAGE
+
     const codeResolution = resolveCodeVariables(
       code,
       executionParams,
       envVars,
       blockData,
       blockNameMapping,
-      workflowVariables
+      blockOutputSchemas,
+      workflowVariables,
+      lang
     )
     resolvedCode = codeResolution.resolvedCode
     const contextVariables = codeResolution.contextVariables
 
-    const lang = isValidCodeLanguage(language) ? language : DEFAULT_CODE_LANGUAGE
-
     let jsImports = ''
     let jsRemainingCode = resolvedCode
     let hasImports = false
@@ -670,7 +687,11 @@ export async function POST(req: NextRequest) {
         prologue += `const environmentVariables = JSON.parse(${JSON.stringify(JSON.stringify(envVars))});\n`
         prologueLineCount++
         for (const [k, v] of Object.entries(contextVariables)) {
-          prologue += `const ${k} = JSON.parse(${JSON.stringify(JSON.stringify(v))});\n`
+          if (v === undefined) {
+            prologue += `const ${k} = undefined;\n`
+          } else {
+            prologue += `const ${k} = JSON.parse(${JSON.stringify(JSON.stringify(v))});\n`
+          }
           prologueLineCount++
         }
 
@@ -741,7 +762,11 @@ export async function POST(req: NextRequest) {
       prologue += `environmentVariables = json.loads(${JSON.stringify(JSON.stringify(envVars))})\n`
       prologueLineCount++
       for (const [k, v] of Object.entries(contextVariables)) {
-        prologue += `${k} = json.loads(${JSON.stringify(JSON.stringify(v))})\n`
+        if (v === undefined) {
+          prologue += `${k} = None\n`
+        } else {
+          prologue += `${k} = json.loads(${JSON.stringify(JSON.stringify(v))})\n`
+        }
         prologueLineCount++
       }
       const wrapped = [

apps/sim/app/api/knowledge/[id]/documents/route.test.ts

@@ -157,7 +157,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(getDocuments)).toHaveBeenCalledWith(
         'kb-123',
         {
-          includeDisabled: false,
+          enabledFilter: undefined,
           search: undefined,
           limit: 50,
           offset: 0,
@@ -166,7 +166,7 @@ describe('Knowledge Base Documents API Route', () => {
       )
     })
 
-    it('should filter disabled documents by default', async () => {
+    it('should return documents with default filter', async () => {
       const { checkKnowledgeBaseAccess } = await import('@/app/api/knowledge/utils')
       const { getDocuments } = await import('@/lib/knowledge/documents/service')
 
@@ -194,7 +194,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(getDocuments)).toHaveBeenCalledWith(
         'kb-123',
         {
-          includeDisabled: false,
+          enabledFilter: undefined,
           search: undefined,
           limit: 50,
           offset: 0,
@@ -203,7 +203,7 @@ describe('Knowledge Base Documents API Route', () => {
       )
     })
 
-    it('should include disabled documents when requested', async () => {
+    it('should filter documents by enabled status when requested', async () => {
       const { checkKnowledgeBaseAccess } = await import('@/app/api/knowledge/utils')
       const { getDocuments } = await import('@/lib/knowledge/documents/service')
 
@@ -223,7 +223,7 @@ describe('Knowledge Base Documents API Route', () => {
         },
       })
 
-      const url = 'http://localhost:3000/api/knowledge/kb-123/documents?includeDisabled=true'
+      const url = 'http://localhost:3000/api/knowledge/kb-123/documents?enabledFilter=disabled'
       const req = new Request(url, { method: 'GET' }) as any
 
       const { GET } = await import('@/app/api/knowledge/[id]/documents/route')
@@ -233,7 +233,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(getDocuments)).toHaveBeenCalledWith(
         'kb-123',
         {
-          includeDisabled: true,
+          enabledFilter: 'disabled',
           search: undefined,
           limit: 50,
           offset: 0,
@@ -361,8 +361,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(createSingleDocument)).toHaveBeenCalledWith(
         validDocumentData,
         'kb-123',
-        expect.any(String),
-        'user-123'
+        expect.any(String)
       )
     })
 
@@ -470,8 +469,7 @@ describe('Knowledge Base Documents API Route', () => {
       expect(vi.mocked(createDocumentRecords)).toHaveBeenCalledWith(
         validBulkData.documents,
         'kb-123',
-        expect.any(String),
-        'user-123'
+        expect.any(String)
       )
       expect(vi.mocked(processDocumentsWithQueue)).toHaveBeenCalled()
     })

apps/sim/app/api/knowledge/[id]/documents/route.ts

@@ -5,6 +5,7 @@ import { z } from 'zod'
 import { getSession } from '@/lib/auth'
 import {
   bulkDocumentOperation,
+  bulkDocumentOperationByFilter,
   createDocumentRecords,
   createSingleDocument,
   getDocuments,
@@ -57,13 +58,20 @@ const BulkCreateDocumentsSchema = z.object({
   bulk: z.literal(true),
 })
 
-const BulkUpdateDocumentsSchema = z.object({
-  operation: z.enum(['enable', 'disable', 'delete']),
-  documentIds: z
-    .array(z.string())
-    .min(1, 'At least one document ID is required')
-    .max(100, 'Cannot operate on more than 100 documents at once'),
-})
+const BulkUpdateDocumentsSchema = z
+  .object({
+    operation: z.enum(['enable', 'disable', 'delete']),
+    documentIds: z
+      .array(z.string())
+      .min(1, 'At least one document ID is required')
+      .max(100, 'Cannot operate on more than 100 documents at once')
+      .optional(),
+    selectAll: z.boolean().optional(),
+    enabledFilter: z.enum(['all', 'enabled', 'disabled']).optional(),
+  })
+  .refine((data) => data.selectAll || (data.documentIds && data.documentIds.length > 0), {
+    message: 'Either selectAll must be true or documentIds must be provided',
+  })
 
 export async function GET(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const requestId = randomUUID().slice(0, 8)
@@ -90,14 +98,17 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ id:
     }
 
     const url = new URL(req.url)
-    const includeDisabled = url.searchParams.get('includeDisabled') === 'true'
+    const enabledFilter = url.searchParams.get('enabledFilter') as
+      | 'all'
+      | 'enabled'
+      | 'disabled'
+      | null
     const search = url.searchParams.get('search') || undefined
     const limit = Number.parseInt(url.searchParams.get('limit') || '50')
     const offset = Number.parseInt(url.searchParams.get('offset') || '0')
     const sortByParam = url.searchParams.get('sortBy')
     const sortOrderParam = url.searchParams.get('sortOrder')
 
-    // Validate sort parameters
     const validSortFields: DocumentSortField[] = [
       'filename',
       'fileSize',
@@ -105,6 +116,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ id:
       'chunkCount',
       'uploadedAt',
       'processingStatus',
+      'enabled',
     ]
     const validSortOrders: SortOrder[] = ['asc', 'desc']
 
@@ -120,7 +132,7 @@ export async function GET(req: NextRequest, { params }: { params: Promise<{ id:
     const result = await getDocuments(
       knowledgeBaseId,
       {
-        includeDisabled,
+        enabledFilter: enabledFilter || undefined,
         search,
         limit,
         offset,
@@ -190,8 +202,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
         const createdDocuments = await createDocumentRecords(
           validatedData.documents,
           knowledgeBaseId,
-          requestId,
-          userId
+          requestId
         )
 
         logger.info(
@@ -250,16 +261,10 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
         throw validationError
       }
     } else {
-      // Handle single document creation
       try {
         const validatedData = CreateDocumentSchema.parse(body)
 
-        const newDocument = await createSingleDocument(
-          validatedData,
-          knowledgeBaseId,
-          requestId,
-          userId
-        )
+        const newDocument = await createSingleDocument(validatedData, knowledgeBaseId, requestId)
 
         try {
           const { PlatformEvents } = await import('@/lib/core/telemetry')
@@ -294,7 +299,6 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
   } catch (error) {
     logger.error(`[${requestId}] Error creating document`, error)
 
-    // Check if it's a storage limit error
     const errorMessage = error instanceof Error ? error.message : 'Failed to create document'
     const isStorageLimitError =
       errorMessage.includes('Storage limit exceeded') || errorMessage.includes('storage limit')
@@ -331,16 +335,22 @@ export async function PATCH(req: NextRequest, { params }: { params: Promise<{ id
 
     try {
       const validatedData = BulkUpdateDocumentsSchema.parse(body)
-      const { operation, documentIds } = validatedData
+      const { operation, documentIds, selectAll, enabledFilter } = validatedData
 
       try {
-        const result = await bulkDocumentOperation(
-          knowledgeBaseId,
-          operation,
-          documentIds,
-          requestId,
-          session.user.id
-        )
+        let result
+        if (selectAll) {
+          result = await bulkDocumentOperationByFilter(
+            knowledgeBaseId,
+            operation,
+            enabledFilter,
+            requestId
+          )
+        } else if (documentIds && documentIds.length > 0) {
+          result = await bulkDocumentOperation(knowledgeBaseId, operation, documentIds, requestId)
+        } else {
+          return NextResponse.json({ error: 'No documents specified' }, { status: 400 })
+        }
 
         return NextResponse.json({
           success: true,

apps/sim/app/api/mcp/servers/test-connection/route.ts

@@ -1,11 +1,10 @@
 import { createLogger } from '@sim/logger'
 import type { NextRequest } from 'next/server'
-import { getEffectiveDecryptedEnv } from '@/lib/environment/utils'
 import { McpClient } from '@/lib/mcp/client'
 import { getParsedBody, withMcpAuth } from '@/lib/mcp/middleware'
-import type { McpServerConfig, McpTransport } from '@/lib/mcp/types'
+import { resolveMcpConfigEnvVars } from '@/lib/mcp/resolve-config'
+import type { McpTransport } from '@/lib/mcp/types'
 import { createMcpErrorResponse, createMcpSuccessResponse } from '@/lib/mcp/utils'
-import { resolveEnvVarReferences } from '@/executor/utils/reference-validation'
 
 const logger = createLogger('McpServerTestAPI')
 
@@ -19,30 +18,6 @@ function isUrlBasedTransport(transport: McpTransport): boolean {
   return transport === 'streamable-http'
 }
 
-/**
- * Resolve environment variables in strings
- */
-function resolveEnvVars(value: string, envVars: Record<string, string>): string {
-  const missingVars: string[] = []
-  const resolvedValue = resolveEnvVarReferences(value, envVars, {
-    allowEmbedded: true,
-    resolveExactMatch: true,
-    trimKeys: true,
-    onMissing: 'keep',
-    deep: false,
-    missingKeys: missingVars,
-  }) as string
-
-  if (missingVars.length > 0) {
-    const uniqueMissing = Array.from(new Set(missingVars))
-    uniqueMissing.forEach((envKey) => {
-      logger.warn(`Environment variable "${envKey}" not found in MCP server test`)
-    })
-  }
-
-  return resolvedValue
-}
-
 interface TestConnectionRequest {
   name: string
   transport: McpTransport
@@ -96,39 +71,30 @@ export const POST = withMcpAuth('write')(
         )
       }
 
-      let resolvedUrl = body.url
-      let resolvedHeaders = body.headers || {}
-
-      try {
-        const envVars = await getEffectiveDecryptedEnv(userId, workspaceId)
-
-        if (resolvedUrl) {
-          resolvedUrl = resolveEnvVars(resolvedUrl, envVars)
-        }
-
-        const resolvedHeadersObj: Record<string, string> = {}
-        for (const [key, value] of Object.entries(resolvedHeaders)) {
-          resolvedHeadersObj[key] = resolveEnvVars(value, envVars)
-        }
-        resolvedHeaders = resolvedHeadersObj
-      } catch (envError) {
-        logger.warn(
-          `[${requestId}] Failed to resolve environment variables, using raw values:`,
-          envError
-        )
-      }
-
-      const testConfig: McpServerConfig = {
+      // Build initial config for resolution
+      const initialConfig = {
         id: `test-${requestId}`,
         name: body.name,
         transport: body.transport,
-        url: resolvedUrl,
-        headers: resolvedHeaders,
+        url: body.url,
+        headers: body.headers || {},
         timeout: body.timeout || 10000,
         retries: 1, // Only one retry for tests
         enabled: true,
       }
 
+      // Resolve env vars using shared utility (non-strict mode for testing)
+      const { config: testConfig, missingVars } = await resolveMcpConfigEnvVars(
+        initialConfig,
+        userId,
+        workspaceId,
+        { strict: false }
+      )
+
+      if (missingVars.length > 0) {
+        logger.warn(`[${requestId}] Some environment variables not found:`, { missingVars })
+      }
+
       const testSecurityPolicy = {
         requireConsent: false,
         auditLevel: 'none' as const,

apps/sim/app/api/providers/route.ts

@@ -3,7 +3,9 @@ import { account } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
 import { eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { generateRequestId } from '@/lib/core/utils/request'
+import { checkWorkspaceAccess } from '@/lib/workspaces/permissions/utils'
 import { refreshTokenIfNeeded } from '@/app/api/auth/oauth/utils'
 import type { StreamingExecution } from '@/executor/types'
 import { executeProviderRequest } from '@/providers'
@@ -20,6 +22,11 @@ export async function POST(request: NextRequest) {
   const startTime = Date.now()
 
   try {
+    const auth = await checkHybridAuth(request, { requireWorkflowId: false })
+    if (!auth.success || !auth.userId) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
     logger.info(`[${requestId}] Provider API request started`, {
       timestamp: new Date().toISOString(),
       userAgent: request.headers.get('User-Agent'),
@@ -85,6 +92,13 @@ export async function POST(request: NextRequest) {
       verbosity,
     })
 
+    if (workspaceId) {
+      const workspaceAccess = await checkWorkspaceAccess(workspaceId, auth.userId)
+      if (!workspaceAccess.hasAccess) {
+        return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+      }
+    }
+
     let finalApiKey: string | undefined = apiKey
     try {
       if (provider === 'vertex' && vertexCredential) {

apps/sim/app/api/tools/a2a/set-push-notification/route.ts

@@ -3,6 +3,7 @@ import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import { createA2AClient } from '@/lib/a2a/utils'
 import { checkHybridAuth } from '@/lib/auth/hybrid'
+import { validateExternalUrl } from '@/lib/core/security/input-validation'
 import { generateRequestId } from '@/lib/core/utils/request'
 
 export const dynamic = 'force-dynamic'
@@ -39,6 +40,18 @@ export async function POST(request: NextRequest) {
     const body = await request.json()
     const validatedData = A2ASetPushNotificationSchema.parse(body)
 
+    const urlValidation = validateExternalUrl(validatedData.webhookUrl, 'Webhook URL')
+    if (!urlValidation.isValid) {
+      logger.warn(`[${requestId}] Invalid webhook URL`, { error: urlValidation.error })
+      return NextResponse.json(
+        {
+          success: false,
+          error: urlValidation.error,
+        },
+        { status: 400 }
+      )
+    }
+
     logger.info(`[${requestId}] A2A set push notification request`, {
       agentUrl: validatedData.agentUrl,
       taskId: validatedData.taskId,

apps/sim/app/api/tools/mysql/delete/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { buildDeleteQuery, createMySQLConnection, executeQuery } from '@/app/api/tools/mysql/utils'
 
 const logger = createLogger('MySQLDeleteAPI')
@@ -21,6 +22,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized MySQL delete attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = DeleteSchema.parse(body)
 

apps/sim/app/api/tools/mysql/execute/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createMySQLConnection, executeQuery, validateQuery } from '@/app/api/tools/mysql/utils'
 
 const logger = createLogger('MySQLExecuteAPI')
@@ -20,6 +21,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized MySQL execute attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = ExecuteSchema.parse(body)
 

apps/sim/app/api/tools/mysql/insert/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { buildInsertQuery, createMySQLConnection, executeQuery } from '@/app/api/tools/mysql/utils'
 
 const logger = createLogger('MySQLInsertAPI')
@@ -42,6 +43,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized MySQL insert attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = InsertSchema.parse(body)
 

apps/sim/app/api/tools/mysql/introspect/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createMySQLConnection, executeIntrospect } from '@/app/api/tools/mysql/utils'
 
 const logger = createLogger('MySQLIntrospectAPI')
@@ -19,6 +20,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized MySQL introspect attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = IntrospectSchema.parse(body)
 

apps/sim/app/api/tools/mysql/query/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createMySQLConnection, executeQuery, validateQuery } from '@/app/api/tools/mysql/utils'
 
 const logger = createLogger('MySQLQueryAPI')
@@ -20,6 +21,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized MySQL query attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = QuerySchema.parse(body)
 

apps/sim/app/api/tools/mysql/update/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { buildUpdateQuery, createMySQLConnection, executeQuery } from '@/app/api/tools/mysql/utils'
 
 const logger = createLogger('MySQLUpdateAPI')
@@ -40,6 +41,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized MySQL update attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = UpdateSchema.parse(body)
 

apps/sim/app/api/tools/postgresql/delete/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createPostgresConnection, executeDelete } from '@/app/api/tools/postgresql/utils'
 
 const logger = createLogger('PostgreSQLDeleteAPI')
@@ -21,6 +22,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized PostgreSQL delete attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = DeleteSchema.parse(body)
 

apps/sim/app/api/tools/postgresql/execute/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import {
   createPostgresConnection,
   executeQuery,
@@ -24,6 +25,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized PostgreSQL execute attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = ExecuteSchema.parse(body)
 

apps/sim/app/api/tools/postgresql/insert/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createPostgresConnection, executeInsert } from '@/app/api/tools/postgresql/utils'
 
 const logger = createLogger('PostgreSQLInsertAPI')
@@ -42,6 +43,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized PostgreSQL insert attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
 
     const params = InsertSchema.parse(body)

apps/sim/app/api/tools/postgresql/introspect/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createPostgresConnection, executeIntrospect } from '@/app/api/tools/postgresql/utils'
 
 const logger = createLogger('PostgreSQLIntrospectAPI')
@@ -20,6 +21,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized PostgreSQL introspect attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = IntrospectSchema.parse(body)
 

apps/sim/app/api/tools/postgresql/query/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createPostgresConnection, executeQuery } from '@/app/api/tools/postgresql/utils'
 
 const logger = createLogger('PostgreSQLQueryAPI')
@@ -20,6 +21,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized PostgreSQL query attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = QuerySchema.parse(body)
 

apps/sim/app/api/tools/postgresql/update/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createPostgresConnection, executeUpdate } from '@/app/api/tools/postgresql/utils'
 
 const logger = createLogger('PostgreSQLUpdateAPI')
@@ -40,6 +41,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized PostgreSQL update attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = UpdateSchema.parse(body)
 

apps/sim/app/api/tools/ssh/check-command-exists/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createSSHConnection, escapeShellArg, executeSSHCommand } from '@/app/api/tools/ssh/utils'
 
 const logger = createLogger('SSHCheckCommandExistsAPI')
@@ -20,6 +21,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH check command exists attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = CheckCommandExistsSchema.parse(body)
 

apps/sim/app/api/tools/ssh/check-file-exists/route.ts

@@ -3,6 +3,7 @@ import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import type { Client, SFTPWrapper, Stats } from 'ssh2'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import {
   createSSHConnection,
   getFileType,
@@ -39,10 +40,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH check file exists attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = CheckFileExistsSchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },

apps/sim/app/api/tools/ssh/create-directory/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import {
   createSSHConnection,
   escapeShellArg,
@@ -27,10 +28,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH create directory attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = CreateDirectorySchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },
@@ -53,7 +59,6 @@ export async function POST(request: NextRequest) {
       const dirPath = sanitizePath(params.path)
       const escapedPath = escapeShellArg(dirPath)
 
-      // Check if directory already exists
       const checkResult = await executeSSHCommand(
         client,
         `test -d '${escapedPath}' && echo "exists"`
@@ -70,7 +75,6 @@ export async function POST(request: NextRequest) {
         })
       }
 
-      // Create directory
       const mkdirFlag = params.recursive ? '-p' : ''
       const command = `mkdir ${mkdirFlag} -m ${params.permissions} '${escapedPath}'`
       const result = await executeSSHCommand(client, command)

apps/sim/app/api/tools/ssh/delete-file/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import {
   createSSHConnection,
   escapeShellArg,
@@ -27,10 +28,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH delete file attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = DeleteFileSchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },
@@ -53,7 +59,6 @@ export async function POST(request: NextRequest) {
       const filePath = sanitizePath(params.path)
       const escapedPath = escapeShellArg(filePath)
 
-      // Check if path exists
       const checkResult = await executeSSHCommand(
         client,
         `test -e '${escapedPath}' && echo "exists"`
@@ -62,7 +67,6 @@ export async function POST(request: NextRequest) {
         return NextResponse.json({ error: `Path does not exist: ${filePath}` }, { status: 404 })
       }
 
-      // Build delete command
       let command: string
       if (params.recursive) {
         command = params.force ? `rm -rf '${escapedPath}'` : `rm -r '${escapedPath}'`

apps/sim/app/api/tools/ssh/download-file/route.ts

@@ -4,6 +4,7 @@ import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import type { Client, SFTPWrapper } from 'ssh2'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createSSHConnection, sanitizePath } from '@/app/api/tools/ssh/utils'
 
 const logger = createLogger('SSHDownloadFileAPI')
@@ -34,10 +35,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH download file attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = DownloadFileSchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },

apps/sim/app/api/tools/ssh/execute-command/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createSSHConnection, executeSSHCommand, sanitizeCommand } from '@/app/api/tools/ssh/utils'
 
 const logger = createLogger('SSHExecuteCommandAPI')
@@ -21,10 +22,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH execute command attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = ExecuteCommandSchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },
@@ -44,7 +50,6 @@ export async function POST(request: NextRequest) {
     })
 
     try {
-      // Build command with optional working directory
       let command = sanitizeCommand(params.command)
       if (params.workingDirectory) {
         command = `cd "${params.workingDirectory}" && ${command}`

apps/sim/app/api/tools/ssh/execute-script/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createSSHConnection, escapeShellArg, executeSSHCommand } from '@/app/api/tools/ssh/utils'
 
 const logger = createLogger('SSHExecuteScriptAPI')
@@ -22,10 +23,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH execute script attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = ExecuteScriptSchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },
@@ -45,13 +51,10 @@ export async function POST(request: NextRequest) {
     })
 
     try {
-      // Create a temporary script file, execute it, and clean up
       const scriptPath = `/tmp/sim_script_${requestId}.sh`
       const escapedScriptPath = escapeShellArg(scriptPath)
       const escapedInterpreter = escapeShellArg(params.interpreter)
 
-      // Build the command to create, execute, and clean up the script
-      // Note: heredoc with quoted delimiter ('SIMEOF') prevents variable expansion
       let command = `cat > '${escapedScriptPath}' << 'SIMEOF'
 ${params.script}
 SIMEOF

apps/sim/app/api/tools/ssh/get-system-info/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createSSHConnection, executeSSHCommand } from '@/app/api/tools/ssh/utils'
 
 const logger = createLogger('SSHGetSystemInfoAPI')
@@ -19,10 +20,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH get system info attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = GetSystemInfoSchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },

apps/sim/app/api/tools/ssh/list-directory/route.ts

@@ -3,6 +3,7 @@ import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import type { Client, FileEntry, SFTPWrapper } from 'ssh2'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import {
   createSSHConnection,
   getFileType,
@@ -60,10 +61,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH list directory attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = ListDirectorySchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },

apps/sim/app/api/tools/ssh/move-rename/route.ts

@@ -2,6 +2,7 @@ import { randomUUID } from 'crypto'
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import {
   createSSHConnection,
   escapeShellArg,
@@ -27,9 +28,16 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH move/rename attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = MoveRenameSchema.parse(body)
 
+    // Validate SSH authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },

apps/sim/app/api/tools/ssh/read-file-content/route.ts

@@ -3,6 +3,7 @@ import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import type { Client, SFTPWrapper } from 'ssh2'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createSSHConnection, sanitizePath } from '@/app/api/tools/ssh/utils'
 
 const logger = createLogger('SSHReadFileContentAPI')
@@ -35,6 +36,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH read file content attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = ReadFileContentSchema.parse(body)
 

apps/sim/app/api/tools/ssh/upload-file/route.ts

@@ -3,6 +3,7 @@ import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import type { Client, SFTPWrapper } from 'ssh2'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createSSHConnection, sanitizePath } from '@/app/api/tools/ssh/utils'
 
 const logger = createLogger('SSHUploadFileAPI')
@@ -37,6 +38,12 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH upload file attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = UploadFileSchema.parse(body)
 

apps/sim/app/api/tools/ssh/write-file-content/route.ts

@@ -3,6 +3,7 @@ import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import type { Client, SFTPWrapper } from 'ssh2'
 import { z } from 'zod'
+import { checkHybridAuth } from '@/lib/auth/hybrid'
 import { createSSHConnection, sanitizePath } from '@/app/api/tools/ssh/utils'
 
 const logger = createLogger('SSHWriteFileContentAPI')
@@ -36,10 +37,15 @@ export async function POST(request: NextRequest) {
   const requestId = randomUUID().slice(0, 8)
 
   try {
+    const auth = await checkHybridAuth(request)
+    if (!auth.success || !auth.userId) {
+      logger.warn(`[${requestId}] Unauthorized SSH write file content attempt`)
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
     const body = await request.json()
     const params = WriteFileContentSchema.parse(body)
 
-    // Validate authentication
     if (!params.password && !params.privateKey) {
       return NextResponse.json(
         { error: 'Either password or privateKey must be provided' },

apps/sim/app/api/v1/admin/credits/route.ts

@@ -0,0 +1,211 @@
+/**
+ * POST /api/v1/admin/credits
+ *
+ * Issue credits to a user by user ID or email.
+ *
+ * Body:
+ *   - userId?: string - The user ID to issue credits to
+ *   - email?: string - The user email to issue credits to (alternative to userId)
+ *   - amount: number - The amount of credits to issue (in dollars)
+ *   - reason?: string - Reason for issuing credits (for audit logging)
+ *
+ * Response: AdminSingleResponse<{
+ *   success: true,
+ *   entityType: 'user' | 'organization',
+ *   entityId: string,
+ *   amount: number,
+ *   newCreditBalance: number,
+ *   newUsageLimit: number,
+ * }>
+ *
+ * For Pro users: credits are added to user_stats.credit_balance
+ * For Team users: credits are added to organization.credit_balance
+ * Usage limits are updated accordingly to allow spending the credits.
+ */
+
+import { db } from '@sim/db'
+import { organization, subscription, user, userStats } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { and, eq } from 'drizzle-orm'
+import { nanoid } from 'nanoid'
+import { getHighestPrioritySubscription } from '@/lib/billing/core/subscription'
+import { addCredits } from '@/lib/billing/credits/balance'
+import { setUsageLimitForCredits } from '@/lib/billing/credits/purchase'
+import { getEffectiveSeats } from '@/lib/billing/subscriptions/utils'
+import { withAdminAuth } from '@/app/api/v1/admin/middleware'
+import {
+  badRequestResponse,
+  internalErrorResponse,
+  notFoundResponse,
+  singleResponse,
+} from '@/app/api/v1/admin/responses'
+
+const logger = createLogger('AdminCreditsAPI')
+
+export const POST = withAdminAuth(async (request) => {
+  try {
+    const body = await request.json()
+    const { userId, email, amount, reason } = body
+
+    if (!userId && !email) {
+      return badRequestResponse('Either userId or email is required')
+    }
+
+    if (userId && typeof userId !== 'string') {
+      return badRequestResponse('userId must be a string')
+    }
+
+    if (email && typeof email !== 'string') {
+      return badRequestResponse('email must be a string')
+    }
+
+    if (typeof amount !== 'number' || !Number.isFinite(amount) || amount <= 0) {
+      return badRequestResponse('amount must be a positive number')
+    }
+
+    let resolvedUserId: string
+    let userEmail: string | null = null
+
+    if (userId) {
+      const [userData] = await db
+        .select({ id: user.id, email: user.email })
+        .from(user)
+        .where(eq(user.id, userId))
+        .limit(1)
+
+      if (!userData) {
+        return notFoundResponse('User')
+      }
+      resolvedUserId = userData.id
+      userEmail = userData.email
+    } else {
+      const normalizedEmail = email.toLowerCase().trim()
+      const [userData] = await db
+        .select({ id: user.id, email: user.email })
+        .from(user)
+        .where(eq(user.email, normalizedEmail))
+        .limit(1)
+
+      if (!userData) {
+        return notFoundResponse('User with email')
+      }
+      resolvedUserId = userData.id
+      userEmail = userData.email
+    }
+
+    const userSubscription = await getHighestPrioritySubscription(resolvedUserId)
+
+    if (!userSubscription || !['pro', 'team', 'enterprise'].includes(userSubscription.plan)) {
+      return badRequestResponse(
+        'User must have an active Pro, Team, or Enterprise subscription to receive credits'
+      )
+    }
+
+    let entityType: 'user' | 'organization'
+    let entityId: string
+    const plan = userSubscription.plan
+    let seats: number | null = null
+
+    if (plan === 'team' || plan === 'enterprise') {
+      entityType = 'organization'
+      entityId = userSubscription.referenceId
+
+      const [orgExists] = await db
+        .select({ id: organization.id })
+        .from(organization)
+        .where(eq(organization.id, entityId))
+        .limit(1)
+
+      if (!orgExists) {
+        return notFoundResponse('Organization')
+      }
+
+      const [subData] = await db
+        .select()
+        .from(subscription)
+        .where(and(eq(subscription.referenceId, entityId), eq(subscription.status, 'active')))
+        .limit(1)
+
+      seats = getEffectiveSeats(subData)
+    } else {
+      entityType = 'user'
+      entityId = resolvedUserId
+
+      const [existingStats] = await db
+        .select({ id: userStats.id })
+        .from(userStats)
+        .where(eq(userStats.userId, entityId))
+        .limit(1)
+
+      if (!existingStats) {
+        await db.insert(userStats).values({
+          id: nanoid(),
+          userId: entityId,
+        })
+      }
+    }
+
+    await addCredits(entityType, entityId, amount)
+
+    let newCreditBalance: number
+    if (entityType === 'organization') {
+      const [orgData] = await db
+        .select({ creditBalance: organization.creditBalance })
+        .from(organization)
+        .where(eq(organization.id, entityId))
+        .limit(1)
+      newCreditBalance = Number.parseFloat(orgData?.creditBalance || '0')
+    } else {
+      const [stats] = await db
+        .select({ creditBalance: userStats.creditBalance })
+        .from(userStats)
+        .where(eq(userStats.userId, entityId))
+        .limit(1)
+      newCreditBalance = Number.parseFloat(stats?.creditBalance || '0')
+    }
+
+    await setUsageLimitForCredits(entityType, entityId, plan, seats, newCreditBalance)
+
+    let newUsageLimit: number
+    if (entityType === 'organization') {
+      const [orgData] = await db
+        .select({ orgUsageLimit: organization.orgUsageLimit })
+        .from(organization)
+        .where(eq(organization.id, entityId))
+        .limit(1)
+      newUsageLimit = Number.parseFloat(orgData?.orgUsageLimit || '0')
+    } else {
+      const [stats] = await db
+        .select({ currentUsageLimit: userStats.currentUsageLimit })
+        .from(userStats)
+        .where(eq(userStats.userId, entityId))
+        .limit(1)
+      newUsageLimit = Number.parseFloat(stats?.currentUsageLimit || '0')
+    }
+
+    logger.info('Admin API: Issued credits', {
+      resolvedUserId,
+      userEmail,
+      entityType,
+      entityId,
+      amount,
+      newCreditBalance,
+      newUsageLimit,
+      reason: reason || 'No reason provided',
+    })
+
+    return singleResponse({
+      success: true,
+      userId: resolvedUserId,
+      userEmail,
+      entityType,
+      entityId,
+      amount,
+      newCreditBalance,
+      newUsageLimit,
+    })
+  } catch (error) {
+    logger.error('Admin API: Failed to issue credits', { error })
+    return internalErrorResponse('Failed to issue credits')
+  }
+})

apps/sim/app/api/v1/admin/index.ts

@@ -63,6 +63,9 @@
  *   GET    /api/v1/admin/subscriptions/:id                  - Get subscription details
  *   DELETE /api/v1/admin/subscriptions/:id                  - Cancel subscription (?atPeriodEnd=true for scheduled)
  *
+ *   Credits:
+ *   POST   /api/v1/admin/credits                            - Issue credits to user (by userId or email)
+ *
  *   Access Control (Permission Groups):
  *   GET    /api/v1/admin/access-control                     - List permission groups (?organizationId=X)
  *   DELETE /api/v1/admin/access-control                     - Delete permission groups for org (?organizationId=X)

apps/sim/app/api/v1/admin/types.ts

@@ -640,6 +640,7 @@ export interface AdminDeployResult {
   isDeployed: boolean
   version: number
   deployedAt: string
+  warnings?: string[]
 }
 
 export interface AdminUndeployResult {

apps/sim/app/api/v1/admin/workflows/[id]/deploy/route.ts

@@ -1,14 +1,23 @@
-import { db, workflow } from '@sim/db'
+import { db, workflow, workflowDeploymentVersion } from '@sim/db'
 import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
+import { and, eq } from 'drizzle-orm'
 import { generateRequestId } from '@/lib/core/utils/request'
-import { cleanupWebhooksForWorkflow } from '@/lib/webhooks/deploy'
+import { removeMcpToolsForWorkflow, syncMcpToolsForWorkflow } from '@/lib/mcp/workflow-mcp-sync'
+import {
+  cleanupWebhooksForWorkflow,
+  restorePreviousVersionWebhooks,
+  saveTriggerWebhooksForDeploy,
+} from '@/lib/webhooks/deploy'
 import {
   deployWorkflow,
   loadWorkflowFromNormalizedTables,
   undeployWorkflow,
 } from '@/lib/workflows/persistence/utils'
-import { createSchedulesForDeploy, validateWorkflowSchedules } from '@/lib/workflows/schedules'
+import {
+  cleanupDeploymentVersion,
+  createSchedulesForDeploy,
+  validateWorkflowSchedules,
+} from '@/lib/workflows/schedules'
 import { withAdminAuthParams } from '@/app/api/v1/admin/middleware'
 import {
   badRequestResponse,
@@ -28,10 +37,11 @@ interface RouteParams {
 
 export const POST = withAdminAuthParams<RouteParams>(async (request, context) => {
   const { id: workflowId } = await context.params
+  const requestId = generateRequestId()
 
   try {
     const [workflowRecord] = await db
-      .select({ id: workflow.id, name: workflow.name })
+      .select()
       .from(workflow)
       .where(eq(workflow.id, workflowId))
       .limit(1)
@@ -50,6 +60,18 @@ export const POST = withAdminAuthParams<RouteParams>(async (request, context) =>
       return badRequestResponse(`Invalid schedule configuration: ${scheduleValidation.error}`)
     }
 
+    const [currentActiveVersion] = await db
+      .select({ id: workflowDeploymentVersion.id })
+      .from(workflowDeploymentVersion)
+      .where(
+        and(
+          eq(workflowDeploymentVersion.workflowId, workflowId),
+          eq(workflowDeploymentVersion.isActive, true)
+        )
+      )
+      .limit(1)
+    const previousVersionId = currentActiveVersion?.id
+
     const deployResult = await deployWorkflow({
       workflowId,
       deployedBy: ADMIN_ACTOR_ID,
@@ -65,6 +87,32 @@ export const POST = withAdminAuthParams<RouteParams>(async (request, context) =>
       return internalErrorResponse('Failed to resolve deployment version')
     }
 
+    const workflowData = workflowRecord as Record<string, unknown>
+
+    const triggerSaveResult = await saveTriggerWebhooksForDeploy({
+      request,
+      workflowId,
+      workflow: workflowData,
+      userId: workflowRecord.userId,
+      blocks: normalizedData.blocks,
+      requestId,
+      deploymentVersionId: deployResult.deploymentVersionId,
+      previousVersionId,
+    })
+
+    if (!triggerSaveResult.success) {
+      await cleanupDeploymentVersion({
+        workflowId,
+        workflow: workflowData,
+        requestId,
+        deploymentVersionId: deployResult.deploymentVersionId,
+      })
+      await undeployWorkflow({ workflowId })
+      return internalErrorResponse(
+        triggerSaveResult.error?.message || 'Failed to sync trigger configuration'
+      )
+    }
+
     const scheduleResult = await createSchedulesForDeploy(
       workflowId,
       normalizedData.blocks,
@@ -72,15 +120,58 @@ export const POST = withAdminAuthParams<RouteParams>(async (request, context) =>
       deployResult.deploymentVersionId
     )
     if (!scheduleResult.success) {
-      logger.warn(`Schedule creation failed for workflow ${workflowId}: ${scheduleResult.error}`)
+      logger.error(
+        `[${requestId}] Admin API: Schedule creation failed for workflow ${workflowId}: ${scheduleResult.error}`
+      )
+      await cleanupDeploymentVersion({
+        workflowId,
+        workflow: workflowData,
+        requestId,
+        deploymentVersionId: deployResult.deploymentVersionId,
+      })
+      if (previousVersionId) {
+        await restorePreviousVersionWebhooks({
+          request,
+          workflow: workflowData,
+          userId: workflowRecord.userId,
+          previousVersionId,
+          requestId,
+        })
+      }
+      await undeployWorkflow({ workflowId })
+      return internalErrorResponse(scheduleResult.error || 'Failed to create schedule')
     }
 
-    logger.info(`Admin API: Deployed workflow ${workflowId} as v${deployResult.version}`)
+    if (previousVersionId && previousVersionId !== deployResult.deploymentVersionId) {
+      try {
+        logger.info(`[${requestId}] Admin API: Cleaning up previous version ${previousVersionId}`)
+        await cleanupDeploymentVersion({
+          workflowId,
+          workflow: workflowData,
+          requestId,
+          deploymentVersionId: previousVersionId,
+          skipExternalCleanup: true,
+        })
+      } catch (cleanupError) {
+        logger.error(
+          `[${requestId}] Admin API: Failed to clean up previous version ${previousVersionId}`,
+          cleanupError
+        )
+      }
+    }
+
+    logger.info(
+      `[${requestId}] Admin API: Deployed workflow ${workflowId} as v${deployResult.version}`
+    )
+
+    // Sync MCP tools with the latest parameter schema
+    await syncMcpToolsForWorkflow({ workflowId, requestId, context: 'deploy' })
 
     const response: AdminDeployResult = {
       isDeployed: true,
       version: deployResult.version!,
       deployedAt: deployResult.deployedAt!.toISOString(),
+      warnings: triggerSaveResult.warnings,
     }
 
     return singleResponse(response)
@@ -105,7 +196,6 @@ export const DELETE = withAdminAuthParams<RouteParams>(async (request, context)
       return notFoundResponse('Workflow')
     }
 
-    // Clean up external webhook subscriptions before undeploying
     await cleanupWebhooksForWorkflow(
       workflowId,
       workflowRecord as Record<string, unknown>,
@@ -117,6 +207,8 @@ export const DELETE = withAdminAuthParams<RouteParams>(async (request, context)
       return internalErrorResponse(result.error || 'Failed to undeploy workflow')
     }
 
+    await removeMcpToolsForWorkflow(workflowId, requestId)
+
     logger.info(`Admin API: Undeployed workflow ${workflowId}`)
 
     const response: AdminUndeployResult = {

apps/sim/app/api/v1/admin/workflows/[id]/versions/[versionId]/activate/route.ts

@@ -1,7 +1,15 @@
-import { db, workflow } from '@sim/db'
+import { db, workflow, workflowDeploymentVersion } from '@sim/db'
 import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
+import { and, eq } from 'drizzle-orm'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { syncMcpToolsForWorkflow } from '@/lib/mcp/workflow-mcp-sync'
+import { restorePreviousVersionWebhooks, saveTriggerWebhooksForDeploy } from '@/lib/webhooks/deploy'
 import { activateWorkflowVersion } from '@/lib/workflows/persistence/utils'
+import {
+  cleanupDeploymentVersion,
+  createSchedulesForDeploy,
+  validateWorkflowSchedules,
+} from '@/lib/workflows/schedules'
 import { withAdminAuthParams } from '@/app/api/v1/admin/middleware'
 import {
   badRequestResponse,
@@ -9,6 +17,7 @@ import {
   notFoundResponse,
   singleResponse,
 } from '@/app/api/v1/admin/responses'
+import type { BlockState } from '@/stores/workflows/workflow/types'
 
 const logger = createLogger('AdminWorkflowActivateVersionAPI')
 
@@ -18,11 +27,12 @@ interface RouteParams {
 }
 
 export const POST = withAdminAuthParams<RouteParams>(async (request, context) => {
+  const requestId = generateRequestId()
   const { id: workflowId, versionId } = await context.params
 
   try {
     const [workflowRecord] = await db
-      .select({ id: workflow.id })
+      .select()
       .from(workflow)
       .where(eq(workflow.id, workflowId))
       .limit(1)
@@ -36,23 +46,161 @@ export const POST = withAdminAuthParams<RouteParams>(async (request, context) =>
       return badRequestResponse('Invalid version number')
     }
 
+    const [versionRow] = await db
+      .select({
+        id: workflowDeploymentVersion.id,
+        state: workflowDeploymentVersion.state,
+      })
+      .from(workflowDeploymentVersion)
+      .where(
+        and(
+          eq(workflowDeploymentVersion.workflowId, workflowId),
+          eq(workflowDeploymentVersion.version, versionNum)
+        )
+      )
+      .limit(1)
+
+    if (!versionRow?.state) {
+      return notFoundResponse('Deployment version')
+    }
+
+    const [currentActiveVersion] = await db
+      .select({ id: workflowDeploymentVersion.id })
+      .from(workflowDeploymentVersion)
+      .where(
+        and(
+          eq(workflowDeploymentVersion.workflowId, workflowId),
+          eq(workflowDeploymentVersion.isActive, true)
+        )
+      )
+      .limit(1)
+
+    const previousVersionId = currentActiveVersion?.id
+
+    const deployedState = versionRow.state as { blocks?: Record<string, BlockState> }
+    const blocks = deployedState.blocks
+    if (!blocks || typeof blocks !== 'object') {
+      return internalErrorResponse('Invalid deployed state structure')
+    }
+
+    const workflowData = workflowRecord as Record<string, unknown>
+
+    const scheduleValidation = validateWorkflowSchedules(blocks)
+    if (!scheduleValidation.isValid) {
+      return badRequestResponse(`Invalid schedule configuration: ${scheduleValidation.error}`)
+    }
+
+    const triggerSaveResult = await saveTriggerWebhooksForDeploy({
+      request,
+      workflowId,
+      workflow: workflowData,
+      userId: workflowRecord.userId,
+      blocks,
+      requestId,
+      deploymentVersionId: versionRow.id,
+      previousVersionId,
+      forceRecreateSubscriptions: true,
+    })
+
+    if (!triggerSaveResult.success) {
+      logger.error(
+        `[${requestId}] Admin API: Failed to sync triggers for workflow ${workflowId}`,
+        triggerSaveResult.error
+      )
+      return internalErrorResponse(
+        triggerSaveResult.error?.message || 'Failed to sync trigger configuration'
+      )
+    }
+
+    const scheduleResult = await createSchedulesForDeploy(workflowId, blocks, db, versionRow.id)
+
+    if (!scheduleResult.success) {
+      await cleanupDeploymentVersion({
+        workflowId,
+        workflow: workflowData,
+        requestId,
+        deploymentVersionId: versionRow.id,
+      })
+      if (previousVersionId) {
+        await restorePreviousVersionWebhooks({
+          request,
+          workflow: workflowData,
+          userId: workflowRecord.userId,
+          previousVersionId,
+          requestId,
+        })
+      }
+      return internalErrorResponse(scheduleResult.error || 'Failed to sync schedules')
+    }
+
     const result = await activateWorkflowVersion({ workflowId, version: versionNum })
     if (!result.success) {
+      await cleanupDeploymentVersion({
+        workflowId,
+        workflow: workflowData,
+        requestId,
+        deploymentVersionId: versionRow.id,
+      })
+      if (previousVersionId) {
+        await restorePreviousVersionWebhooks({
+          request,
+          workflow: workflowData,
+          userId: workflowRecord.userId,
+          previousVersionId,
+          requestId,
+        })
+      }
       if (result.error === 'Deployment version not found') {
         return notFoundResponse('Deployment version')
       }
       return internalErrorResponse(result.error || 'Failed to activate version')
     }
 
-    logger.info(`Admin API: Activated version ${versionNum} for workflow ${workflowId}`)
+    if (previousVersionId && previousVersionId !== versionRow.id) {
+      try {
+        logger.info(
+          `[${requestId}] Admin API: Cleaning up previous version ${previousVersionId} webhooks/schedules`
+        )
+        await cleanupDeploymentVersion({
+          workflowId,
+          workflow: workflowData,
+          requestId,
+          deploymentVersionId: previousVersionId,
+          skipExternalCleanup: true,
+        })
+        logger.info(`[${requestId}] Admin API: Previous version cleanup completed`)
+      } catch (cleanupError) {
+        logger.error(
+          `[${requestId}] Admin API: Failed to clean up previous version ${previousVersionId}`,
+          cleanupError
+        )
+      }
+    }
+
+    await syncMcpToolsForWorkflow({
+      workflowId,
+      requestId,
+      state: versionRow.state,
+      context: 'activate',
+    })
+
+    logger.info(
+      `[${requestId}] Admin API: Activated version ${versionNum} for workflow ${workflowId}`
+    )
 
     return singleResponse({
       success: true,
       version: versionNum,
       deployedAt: result.deployedAt!.toISOString(),
+      warnings: triggerSaveResult.warnings,
     })
   } catch (error) {
-    logger.error(`Admin API: Failed to activate version for workflow ${workflowId}`, { error })
+    logger.error(
+      `[${requestId}] Admin API: Failed to activate version for workflow ${workflowId}`,
+      {
+        error,
+      }
+    )
     return internalErrorResponse('Failed to activate deployment version')
   }
 })

apps/sim/app/api/webhooks/[id]/route.ts

@@ -7,11 +7,7 @@ import { getSession } from '@/lib/auth'
 import { validateInteger } from '@/lib/core/security/input-validation'
 import { PlatformEvents } from '@/lib/core/telemetry'
 import { generateRequestId } from '@/lib/core/utils/request'
-import {
-  cleanupExternalWebhook,
-  createExternalWebhookSubscription,
-  shouldRecreateExternalWebhookSubscription,
-} from '@/lib/webhooks/provider-subscriptions'
+import { cleanupExternalWebhook } from '@/lib/webhooks/provider-subscriptions'
 import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
 
 const logger = createLogger('WebhookAPI')
@@ -87,7 +83,6 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
   }
 }
 
-// Update a webhook
 export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
   const requestId = generateRequestId()
 
@@ -102,7 +97,7 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
     }
 
     const body = await request.json()
-    const { path, provider, providerConfig, isActive, failedCount } = body
+    const { isActive, failedCount } = body
 
     if (failedCount !== undefined) {
       const validation = validateInteger(failedCount, 'failedCount', { min: 0 })
@@ -112,28 +107,6 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
       }
     }
 
-    let resolvedProviderConfig = providerConfig
-    if (providerConfig) {
-      const { resolveEnvVarsInObject } = await import('@/lib/webhooks/env-resolver')
-      const webhookDataForResolve = await db
-        .select({
-          workspaceId: workflow.workspaceId,
-        })
-        .from(webhook)
-        .innerJoin(workflow, eq(webhook.workflowId, workflow.id))
-        .where(eq(webhook.id, id))
-        .limit(1)
-
-      if (webhookDataForResolve.length > 0) {
-        resolvedProviderConfig = await resolveEnvVarsInObject(
-          providerConfig,
-          session.user.id,
-          webhookDataForResolve[0].workspaceId || undefined
-        )
-      }
-    }
-
-    // Find the webhook and check permissions
     const webhooks = await db
       .select({
         webhook: webhook,
@@ -154,16 +127,12 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
     }
 
     const webhookData = webhooks[0]
-
-    // Check if user has permission to modify this webhook
     let canModify = false
 
-    // Case 1: User owns the workflow
     if (webhookData.workflow.userId === session.user.id) {
       canModify = true
     }
 
-    // Case 2: Workflow belongs to a workspace and user has write or admin permission
     if (!canModify && webhookData.workflow.workspaceId) {
       const userPermission = await getUserEntityPermissions(
         session.user.id,
@@ -182,76 +151,14 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
       return NextResponse.json({ error: 'Access denied' }, { status: 403 })
     }
 
-    const existingProviderConfig =
-      (webhookData.webhook.providerConfig as Record<string, unknown>) || {}
-    let nextProviderConfig =
-      providerConfig !== undefined &&
-      resolvedProviderConfig &&
-      typeof resolvedProviderConfig === 'object'
-        ? (resolvedProviderConfig as Record<string, unknown>)
-        : existingProviderConfig
-    const nextProvider = (provider ?? webhookData.webhook.provider) as string
-
-    if (
-      providerConfig !== undefined &&
-      shouldRecreateExternalWebhookSubscription({
-        previousProvider: webhookData.webhook.provider as string,
-        nextProvider,
-        previousConfig: existingProviderConfig,
-        nextConfig: nextProviderConfig,
-      })
-    ) {
-      await cleanupExternalWebhook(
-        { ...webhookData.webhook, providerConfig: existingProviderConfig },
-        webhookData.workflow,
-        requestId
-      )
-
-      const result = await createExternalWebhookSubscription(
-        request,
-        {
-          ...webhookData.webhook,
-          provider: nextProvider,
-          providerConfig: nextProviderConfig,
-        },
-        webhookData.workflow,
-        session.user.id,
-        requestId
-      )
-
-      nextProviderConfig = result.updatedProviderConfig as Record<string, unknown>
-    }
-
     logger.debug(`[${requestId}] Updating webhook properties`, {
-      hasPathUpdate: path !== undefined,
-      hasProviderUpdate: provider !== undefined,
-      hasConfigUpdate: providerConfig !== undefined,
       hasActiveUpdate: isActive !== undefined,
       hasFailedCountUpdate: failedCount !== undefined,
     })
 
-    // Merge providerConfig to preserve credential-related fields
-    let finalProviderConfig = webhooks[0].webhook.providerConfig
-    if (providerConfig !== undefined) {
-      const existingConfig = existingProviderConfig
-      finalProviderConfig = {
-        ...nextProviderConfig,
-        credentialId: existingConfig.credentialId,
-        credentialSetId: existingConfig.credentialSetId,
-        userId: existingConfig.userId,
-        historyId: existingConfig.historyId,
-        lastCheckedTimestamp: existingConfig.lastCheckedTimestamp,
-        setupCompleted: existingConfig.setupCompleted,
-        externalId: nextProviderConfig.externalId ?? existingConfig.externalId,
-      }
-    }
-
     const updatedWebhook = await db
       .update(webhook)
       .set({
-        path: path !== undefined ? path : webhooks[0].webhook.path,
-        provider: provider !== undefined ? provider : webhooks[0].webhook.provider,
-        providerConfig: finalProviderConfig,
         isActive: isActive !== undefined ? isActive : webhooks[0].webhook.isActive,
         failedCount: failedCount !== undefined ? failedCount : webhooks[0].webhook.failedCount,
         updatedAt: new Date(),
@@ -334,11 +241,8 @@ export async function DELETE(
     }
 
     const foundWebhook = webhookData.webhook
-    const { cleanupExternalWebhook } = await import('@/lib/webhooks/provider-subscriptions')
-
-    const providerConfig = foundWebhook.providerConfig as Record<string, unknown> | null
-    const credentialSetId = providerConfig?.credentialSetId as string | undefined
-    const blockId = providerConfig?.blockId as string | undefined
+    const credentialSetId = foundWebhook.credentialSetId as string | undefined
+    const blockId = foundWebhook.blockId as string | undefined
 
     if (credentialSetId && blockId) {
       const allCredentialSetWebhooks = await db
@@ -346,10 +250,9 @@ export async function DELETE(
         .from(webhook)
         .where(and(eq(webhook.workflowId, webhookData.workflow.id), eq(webhook.blockId, blockId)))
 
-      const webhooksToDelete = allCredentialSetWebhooks.filter((w) => {
-        const config = w.providerConfig as Record<string, unknown> | null
-        return config?.credentialSetId === credentialSetId
-      })
+      const webhooksToDelete = allCredentialSetWebhooks.filter(
+        (w) => w.credentialSetId === credentialSetId
+      )
 
       for (const w of webhooksToDelete) {
         await cleanupExternalWebhook(w, webhookData.workflow, requestId)

apps/sim/app/api/webhooks/route.ts

@@ -7,8 +7,21 @@ import { type NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
 import { PlatformEvents } from '@/lib/core/telemetry'
 import { generateRequestId } from '@/lib/core/utils/request'
-import { createExternalWebhookSubscription } from '@/lib/webhooks/provider-subscriptions'
+import { getProviderIdFromServiceId } from '@/lib/oauth'
+import { resolveEnvVarsInObject } from '@/lib/webhooks/env-resolver'
+import {
+  cleanupExternalWebhook,
+  createExternalWebhookSubscription,
+} from '@/lib/webhooks/provider-subscriptions'
+import { mergeNonUserFields } from '@/lib/webhooks/utils'
+import {
+  configureGmailPolling,
+  configureOutlookPolling,
+  configureRssPolling,
+  syncWebhooksForCredentialSet,
+} from '@/lib/webhooks/utils.server'
 import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
+import { extractCredentialSetId, isCredentialSetValue } from '@/executor/constants'
 
 const logger = createLogger('WebhooksAPI')
 
@@ -298,14 +311,10 @@ export async function POST(request: NextRequest) {
       }
     }
 
-    let savedWebhook: any = null // Variable to hold the result of save/update
-
-    // Use the original provider config - Gmail/Outlook configuration functions will inject userId automatically
-    const finalProviderConfig = providerConfig || {}
-
-    const { resolveEnvVarsInObject } = await import('@/lib/webhooks/env-resolver')
+    let savedWebhook: any = null
+    const originalProviderConfig = providerConfig || {}
     let resolvedProviderConfig = await resolveEnvVarsInObject(
-      finalProviderConfig,
+      originalProviderConfig,
       userId,
       workflowRecord.workspaceId || undefined
     )
@@ -319,8 +328,6 @@ export async function POST(request: NextRequest) {
     const directCredentialSetId = resolvedProviderConfig?.credentialSetId as string | undefined
 
     if (directCredentialSetId || rawCredentialId) {
-      const { isCredentialSetValue, extractCredentialSetId } = await import('@/executor/constants')
-
       const credentialSetId =
         directCredentialSetId ||
         (rawCredentialId && isCredentialSetValue(rawCredentialId)
@@ -332,11 +339,6 @@ export async function POST(request: NextRequest) {
           `[${requestId}] Credential set detected for ${provider} trigger. Syncing webhooks for set ${credentialSetId}`
         )
 
-        const { getProviderIdFromServiceId } = await import('@/lib/oauth')
-        const { syncWebhooksForCredentialSet, configureGmailPolling, configureOutlookPolling } =
-          await import('@/lib/webhooks/utils.server')
-
-        // Map provider to OAuth provider ID
         const oauthProviderId = getProviderIdFromServiceId(provider)
 
         const {
@@ -469,6 +471,9 @@ export async function POST(request: NextRequest) {
       providerConfig: providerConfigOverride,
     })
 
+    const userProvided = originalProviderConfig as Record<string, unknown>
+    const configToSave: Record<string, unknown> = { ...userProvided }
+
     try {
       const result = await createExternalWebhookSubscription(
         request,
@@ -477,7 +482,9 @@ export async function POST(request: NextRequest) {
         userId,
         requestId
       )
-      resolvedProviderConfig = result.updatedProviderConfig as Record<string, unknown>
+      const updatedConfig = result.updatedProviderConfig as Record<string, unknown>
+      mergeNonUserFields(configToSave, updatedConfig, userProvided)
+      resolvedProviderConfig = updatedConfig
       externalSubscriptionCreated = result.externalSubscriptionCreated
     } catch (err) {
       logger.error(`[${requestId}] Error creating external webhook subscription`, err)
@@ -490,25 +497,22 @@ export async function POST(request: NextRequest) {
       )
     }
 
-    // Now save to database (only if subscription succeeded or provider doesn't need external subscription)
     try {
       if (targetWebhookId) {
         logger.info(`[${requestId}] Updating existing webhook for path: ${finalPath}`, {
           webhookId: targetWebhookId,
           provider,
-          hasCredentialId: !!(resolvedProviderConfig as any)?.credentialId,
-          credentialId: (resolvedProviderConfig as any)?.credentialId,
+          hasCredentialId: !!(configToSave as any)?.credentialId,
+          credentialId: (configToSave as any)?.credentialId,
         })
         const updatedResult = await db
           .update(webhook)
           .set({
             blockId,
             provider,
-            providerConfig: resolvedProviderConfig,
+            providerConfig: configToSave,
             credentialSetId:
-              ((resolvedProviderConfig as Record<string, unknown>)?.credentialSetId as
-                | string
-                | null) || null,
+              ((configToSave as Record<string, unknown>)?.credentialSetId as string | null) || null,
             isActive: true,
             updatedAt: new Date(),
           })
@@ -531,11 +535,9 @@ export async function POST(request: NextRequest) {
             blockId,
             path: finalPath,
             provider,
-            providerConfig: resolvedProviderConfig,
+            providerConfig: configToSave,
             credentialSetId:
-              ((resolvedProviderConfig as Record<string, unknown>)?.credentialSetId as
-                | string
-                | null) || null,
+              ((configToSave as Record<string, unknown>)?.credentialSetId as string | null) || null,
             isActive: true,
             createdAt: new Date(),
             updatedAt: new Date(),
@@ -547,9 +549,8 @@ export async function POST(request: NextRequest) {
       if (externalSubscriptionCreated) {
         logger.error(`[${requestId}] DB save failed, cleaning up external subscription`, dbError)
         try {
-          const { cleanupExternalWebhook } = await import('@/lib/webhooks/provider-subscriptions')
           await cleanupExternalWebhook(
-            createTempWebhookData(resolvedProviderConfig),
+            createTempWebhookData(configToSave),
             workflowRecord,
             requestId
           )
@@ -567,7 +568,6 @@ export async function POST(request: NextRequest) {
     if (savedWebhook && provider === 'gmail') {
       logger.info(`[${requestId}] Gmail provider detected. Setting up Gmail webhook configuration.`)
       try {
-        const { configureGmailPolling } = await import('@/lib/webhooks/utils.server')
         const success = await configureGmailPolling(savedWebhook, requestId)
 
         if (!success) {
@@ -606,7 +606,6 @@ export async function POST(request: NextRequest) {
         `[${requestId}] Outlook provider detected. Setting up Outlook webhook configuration.`
       )
       try {
-        const { configureOutlookPolling } = await import('@/lib/webhooks/utils.server')
         const success = await configureOutlookPolling(savedWebhook, requestId)
 
         if (!success) {
@@ -643,7 +642,6 @@ export async function POST(request: NextRequest) {
     if (savedWebhook && provider === 'rss') {
       logger.info(`[${requestId}] RSS provider detected. Setting up RSS webhook configuration.`)
       try {
-        const { configureRssPolling } = await import('@/lib/webhooks/utils.server')
         const success = await configureRssPolling(savedWebhook, requestId)
 
         if (!success) {

apps/sim/app/api/workflows/[id]/deploy/route.ts

@@ -4,7 +4,11 @@ import { and, desc, eq } from 'drizzle-orm'
 import type { NextRequest } from 'next/server'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { removeMcpToolsForWorkflow, syncMcpToolsForWorkflow } from '@/lib/mcp/workflow-mcp-sync'
-import { cleanupWebhooksForWorkflow, saveTriggerWebhooksForDeploy } from '@/lib/webhooks/deploy'
+import {
+  cleanupWebhooksForWorkflow,
+  restorePreviousVersionWebhooks,
+  saveTriggerWebhooksForDeploy,
+} from '@/lib/webhooks/deploy'
 import {
   deployWorkflow,
   loadWorkflowFromNormalizedTables,
@@ -135,6 +139,18 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       return createErrorResponse(`Invalid schedule configuration: ${scheduleValidation.error}`, 400)
     }
 
+    const [currentActiveVersion] = await db
+      .select({ id: workflowDeploymentVersion.id })
+      .from(workflowDeploymentVersion)
+      .where(
+        and(
+          eq(workflowDeploymentVersion.workflowId, id),
+          eq(workflowDeploymentVersion.isActive, true)
+        )
+      )
+      .limit(1)
+    const previousVersionId = currentActiveVersion?.id
+
     const deployResult = await deployWorkflow({
       workflowId: id,
       deployedBy: actorUserId,
@@ -161,6 +177,7 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       blocks: normalizedData.blocks,
       requestId,
       deploymentVersionId,
+      previousVersionId,
     })
 
     if (!triggerSaveResult.success) {
@@ -194,6 +211,15 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
         requestId,
         deploymentVersionId,
       })
+      if (previousVersionId) {
+        await restorePreviousVersionWebhooks({
+          request,
+          workflow: workflowData as Record<string, unknown>,
+          userId: actorUserId,
+          previousVersionId,
+          requestId,
+        })
+      }
       await undeployWorkflow({ workflowId: id })
       return createErrorResponse(scheduleResult.error || 'Failed to create schedule', 500)
     }
@@ -208,6 +234,25 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
       )
     }
 
+    if (previousVersionId && previousVersionId !== deploymentVersionId) {
+      try {
+        logger.info(`[${requestId}] Cleaning up previous version ${previousVersionId} DB records`)
+        await cleanupDeploymentVersion({
+          workflowId: id,
+          workflow: workflowData as Record<string, unknown>,
+          requestId,
+          deploymentVersionId: previousVersionId,
+          skipExternalCleanup: true,
+        })
+      } catch (cleanupError) {
+        logger.error(
+          `[${requestId}] Failed to clean up previous version ${previousVersionId}`,
+          cleanupError
+        )
+        // Non-fatal - continue with success response
+      }
+    }
+
     logger.info(`[${requestId}] Workflow deployed successfully: ${id}`)
 
     // Sync MCP tools with the latest parameter schema
@@ -228,6 +273,7 @@ export async function POST(request: NextRequest, { params }: { params: Promise<{
             nextRunAt: scheduleInfo.nextRunAt,
           }
         : undefined,
+      warnings: triggerSaveResult.warnings,
     })
   } catch (error: any) {
     logger.error(`[${requestId}] Error deploying workflow: ${id}`, {

apps/sim/app/api/workflows/[id]/deployments/[version]/activate/route.ts

@@ -4,7 +4,7 @@ import { and, eq } from 'drizzle-orm'
 import type { NextRequest } from 'next/server'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { syncMcpToolsForWorkflow } from '@/lib/mcp/workflow-mcp-sync'
-import { saveTriggerWebhooksForDeploy } from '@/lib/webhooks/deploy'
+import { restorePreviousVersionWebhooks, saveTriggerWebhooksForDeploy } from '@/lib/webhooks/deploy'
 import { activateWorkflowVersion } from '@/lib/workflows/persistence/utils'
 import {
   cleanupDeploymentVersion,
@@ -85,6 +85,11 @@ export async function POST(
       return createErrorResponse('Invalid deployed state structure', 500)
     }
 
+    const scheduleValidation = validateWorkflowSchedules(blocks)
+    if (!scheduleValidation.isValid) {
+      return createErrorResponse(`Invalid schedule configuration: ${scheduleValidation.error}`, 400)
+    }
+
     const triggerSaveResult = await saveTriggerWebhooksForDeploy({
       request,
       workflowId: id,
@@ -93,6 +98,8 @@ export async function POST(
       blocks,
       requestId,
       deploymentVersionId: versionRow.id,
+      previousVersionId,
+      forceRecreateSubscriptions: true,
     })
 
     if (!triggerSaveResult.success) {
@@ -102,11 +109,6 @@ export async function POST(
       )
     }
 
-    const scheduleValidation = validateWorkflowSchedules(blocks)
-    if (!scheduleValidation.isValid) {
-      return createErrorResponse(`Invalid schedule configuration: ${scheduleValidation.error}`, 400)
-    }
-
     const scheduleResult = await createSchedulesForDeploy(id, blocks, db, versionRow.id)
 
     if (!scheduleResult.success) {
@@ -116,6 +118,15 @@ export async function POST(
         requestId,
         deploymentVersionId: versionRow.id,
       })
+      if (previousVersionId) {
+        await restorePreviousVersionWebhooks({
+          request,
+          workflow: workflowData as Record<string, unknown>,
+          userId: actorUserId,
+          previousVersionId,
+          requestId,
+        })
+      }
       return createErrorResponse(scheduleResult.error || 'Failed to sync schedules', 500)
     }
 
@@ -127,6 +138,15 @@ export async function POST(
         requestId,
         deploymentVersionId: versionRow.id,
       })
+      if (previousVersionId) {
+        await restorePreviousVersionWebhooks({
+          request,
+          workflow: workflowData as Record<string, unknown>,
+          userId: actorUserId,
+          previousVersionId,
+          requestId,
+        })
+      }
       return createErrorResponse(result.error || 'Failed to activate deployment', 400)
     }
 
@@ -140,6 +160,7 @@ export async function POST(
           workflow: workflowData as Record<string, unknown>,
           requestId,
           deploymentVersionId: previousVersionId,
+          skipExternalCleanup: true,
         })
         logger.info(`[${requestId}] Previous version cleanup completed`)
       } catch (cleanupError) {
@@ -157,7 +178,11 @@ export async function POST(
       context: 'activate',
     })
 
-    return createSuccessResponse({ success: true, deployedAt: result.deployedAt })
+    return createSuccessResponse({
+      success: true,
+      deployedAt: result.deployedAt,
+      warnings: triggerSaveResult.warnings,
+    })
   } catch (error: any) {
     logger.error(`[${requestId}] Error activating deployment for workflow: ${id}`, error)
     return createErrorResponse(error.message || 'Failed to activate deployment', 500)

apps/sim/app/api/workflows/[id]/execute/route.ts

@@ -116,7 +116,6 @@ type AsyncExecutionParams = {
   userId: string
   input: any
   triggerType: CoreTriggerType
-  preflighted?: boolean
 }
 
 /**
@@ -139,7 +138,6 @@ async function handleAsyncExecution(params: AsyncExecutionParams): Promise<NextR
     userId,
     input,
     triggerType,
-    preflighted: params.preflighted,
   }
 
   try {
@@ -276,7 +274,6 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
       requestId
     )
 
-    const shouldPreflightEnvVars = isAsyncMode && isTriggerDevEnabled
     const preprocessResult = await preprocessExecution({
       workflowId,
       userId,
@@ -285,9 +282,7 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
       requestId,
       checkDeployment: !shouldUseDraftState,
       loggingSession,
-      preflightEnvVars: shouldPreflightEnvVars,
       useDraftState: shouldUseDraftState,
-      envUserId: isClientSession ? userId : undefined,
     })
 
     if (!preprocessResult.success) {
@@ -319,7 +314,6 @@ export async function POST(req: NextRequest, { params }: { params: Promise<{ id:
         userId: actorUserId,
         input,
         triggerType: loggingTriggerType,
-        preflighted: shouldPreflightEnvVars,
       })
     }
 

apps/sim/app/changelog/components/branded-link.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Link from 'next/link'
+import { useBrandedButtonClass } from '@/hooks/use-branded-button-class'
+
+interface BrandedLinkProps {
+  href: string
+  children: React.ReactNode
+  className?: string
+  target?: string
+  rel?: string
+}
+
+export function BrandedLink({ href, children, className = '', target, rel }: BrandedLinkProps) {
+  const buttonClass = useBrandedButtonClass()
+
+  return (
+    <Link
+      href={href}
+      target={target}
+      rel={rel}
+      className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all ${className}`}
+    >
+      {children}
+    </Link>
+  )
+}

apps/sim/app/changelog/components/changelog-content.tsx

@@ -2,6 +2,7 @@ import { BookOpen, Github, Rss } from 'lucide-react'
 import Link from 'next/link'
 import { inter } from '@/app/_styles/fonts/inter/inter'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BrandedLink } from '@/app/changelog/components/branded-link'
 import ChangelogList from '@/app/changelog/components/timeline-list'
 
 export interface ChangelogEntry {
@@ -66,25 +67,24 @@ export default async function ChangelogContent() {
             <hr className='mt-6 border-border' />
 
             <div className='mt-6 flex flex-wrap items-center gap-3 text-sm'>
-              <Link
+              <BrandedLink
                 href='https://github.com/simstudioai/sim/releases'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='group inline-flex items-center justify-center gap-2 rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] py-[6px] pr-[10px] pl-[12px] text-[14px] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all sm:text-[16px]'
               >
                 <Github className='h-4 w-4' />
                 View on GitHub
-              </Link>
+              </BrandedLink>
               <Link
                 href='https://docs.sim.ai'
-                className='inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 hover:bg-muted'
+                className='inline-flex items-center gap-2 rounded-[10px] border border-border py-[6px] pr-[10px] pl-[12px] text-[15px] transition-all hover:bg-muted'
               >
                 <BookOpen className='h-4 w-4' />
                 Documentation
               </Link>
               <Link
                 href='/changelog.xml'
-                className='inline-flex items-center gap-2 rounded-md border border-border px-3 py-1.5 hover:bg-muted'
+                className='inline-flex items-center gap-2 rounded-[10px] border border-border py-[6px] pr-[10px] pl-[12px] text-[15px] transition-all hover:bg-muted'
               >
                 <Rss className='h-4 w-4' />
                 RSS Feed

apps/sim/app/chat/[identifier]/chat.tsx

@@ -117,7 +117,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   const [error, setError] = useState<string | null>(null)
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const messagesContainerRef = useRef<HTMLDivElement>(null)
-  const [starCount, setStarCount] = useState('25.1k')
+  const [starCount, setStarCount] = useState('25.8k')
   const [conversationId, setConversationId] = useState('')
 
   const [showScrollButton, setShowScrollButton] = useState(false)

apps/sim/app/templates/components/template-card.tsx

@@ -207,7 +207,6 @@ function TemplateCardInner({
             isPannable={false}
             defaultZoom={0.8}
             fitPadding={0.2}
-            lightweight
           />
         ) : (
           <div className='h-full w-full bg-[var(--surface-4)]' />

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx

@@ -61,6 +61,7 @@ export function EditChunkModal({
   const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
   const [pendingNavigation, setPendingNavigation] = useState<(() => void) | null>(null)
   const [tokenizerOn, setTokenizerOn] = useState(false)
+  const [hoveredTokenIndex, setHoveredTokenIndex] = useState<number | null>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
 
   const error = mutationError?.message ?? null
@@ -254,6 +255,8 @@ export function EditChunkModal({
                         style={{
                           backgroundColor: getTokenBgColor(index),
                         }}
+                        onMouseEnter={() => setHoveredTokenIndex(index)}
+                        onMouseLeave={() => setHoveredTokenIndex(null)}
                       >
                         {token}
                       </span>
@@ -281,6 +284,11 @@ export function EditChunkModal({
                 <div className='flex items-center gap-[8px]'>
                   <span className='text-[12px] text-[var(--text-secondary)]'>Tokenizer</span>
                   <Switch checked={tokenizerOn} onCheckedChange={setTokenizerOn} />
+                  {tokenizerOn && hoveredTokenIndex !== null && (
+                    <span className='text-[12px] text-[var(--text-tertiary)]'>
+                      Token #{hoveredTokenIndex + 1}
+                    </span>
+                  )}
                 </div>
                 <span className='text-[12px] text-[var(--text-secondary)]'>
                   {tokenCount.toLocaleString()}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx

@@ -36,6 +36,7 @@ import {
 import { Input } from '@/components/ui/input'
 import { SearchHighlight } from '@/components/ui/search-highlight'
 import { Skeleton } from '@/components/ui/skeleton'
+import { formatAbsoluteDate, formatRelativeTime } from '@/lib/core/utils/formatting'
 import type { ChunkData } from '@/lib/knowledge/types'
 import {
   ChunkContextMenu,
@@ -58,55 +59,6 @@ import {
 
 const logger = createLogger('Document')
 
-/**
- * Formats a date string to relative time (e.g., "2h ago", "3d ago")
- */
-function formatRelativeTime(dateString: string): string {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
-
-  if (diffInSeconds < 60) {
-    return 'just now'
-  }
-  if (diffInSeconds < 3600) {
-    const minutes = Math.floor(diffInSeconds / 60)
-    return `${minutes}m ago`
-  }
-  if (diffInSeconds < 86400) {
-    const hours = Math.floor(diffInSeconds / 3600)
-    return `${hours}h ago`
-  }
-  if (diffInSeconds < 604800) {
-    const days = Math.floor(diffInSeconds / 86400)
-    return `${days}d ago`
-  }
-  if (diffInSeconds < 2592000) {
-    const weeks = Math.floor(diffInSeconds / 604800)
-    return `${weeks}w ago`
-  }
-  if (diffInSeconds < 31536000) {
-    const months = Math.floor(diffInSeconds / 2592000)
-    return `${months}mo ago`
-  }
-  const years = Math.floor(diffInSeconds / 31536000)
-  return `${years}y ago`
-}
-
-/**
- * Formats a date string to absolute format for tooltip display
- */
-function formatAbsoluteDate(dateString: string): string {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
 interface DocumentProps {
   knowledgeBaseId: string
   documentId: string
@@ -304,7 +256,6 @@ export function Document({
 
   const [searchQuery, setSearchQuery] = useState('')
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState('')
-  const [isSearching, setIsSearching] = useState(false)
 
   const {
     chunks: initialChunks,
@@ -344,7 +295,6 @@ export function Document({
     const handler = setTimeout(() => {
       startTransition(() => {
         setDebouncedSearchQuery(searchQuery)
-        setIsSearching(searchQuery.trim().length > 0)
       })
     }, 200)
 
@@ -353,6 +303,7 @@ export function Document({
     }
   }, [searchQuery])
 
+  const isSearching = debouncedSearchQuery.trim().length > 0
   const showingSearch = isSearching && searchQuery.trim().length > 0 && searchResults.length > 0
   const SEARCH_PAGE_SIZE = 50
   const maxSearchPages = Math.ceil(searchResults.length / SEARCH_PAGE_SIZE)

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -27,6 +27,10 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  Popover,
+  PopoverContent,
+  PopoverItem,
+  PopoverTrigger,
   Table,
   TableBody,
   TableCell,
@@ -40,8 +44,11 @@ import { Input } from '@/components/ui/input'
 import { SearchHighlight } from '@/components/ui/search-highlight'
 import { Skeleton } from '@/components/ui/skeleton'
 import { cn } from '@/lib/core/utils/cn'
+import { formatAbsoluteDate, formatRelativeTime } from '@/lib/core/utils/formatting'
+import { ALL_TAG_SLOTS, type AllTagSlot, getFieldTypeForSlot } from '@/lib/knowledge/constants'
 import type { DocumentSortField, SortOrder } from '@/lib/knowledge/documents/types'
 import type { DocumentData } from '@/lib/knowledge/types'
+import { formatFileSize } from '@/lib/uploads/utils/file-utils'
 import {
   ActionBar,
   AddDocumentsModal,
@@ -189,8 +196,8 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
             </div>
           </div>
 
-          <div className='mt-[4px]'>
-            <Skeleton className='h-[21px] w-[300px] rounded-[4px]' />
+          <div>
+            <Skeleton className='mt-[4px] h-[21px] w-[300px] rounded-[4px]' />
           </div>
 
           <div className='mt-[16px] flex items-center gap-[8px]'>
@@ -208,9 +215,12 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
                 className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
               />
             </div>
-            <Button disabled variant='tertiary' className='h-[32px] rounded-[6px]'>
-              Add Documents
-            </Button>
+            <div className='flex items-center gap-[8px]'>
+              <Skeleton className='h-[32px] w-[52px] rounded-[6px]' />
+              <Button disabled variant='tertiary' className='h-[32px] rounded-[6px]'>
+                Add Documents
+              </Button>
+            </div>
           </div>
 
           <div className='mt-[12px] flex flex-1 flex-col overflow-hidden'>
@@ -222,73 +232,11 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
   )
 }
 
-/**
- * Formats a date string to relative time (e.g., "2h ago", "3d ago")
- */
-function formatRelativeTime(dateString: string): string {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
-
-  if (diffInSeconds < 60) {
-    return 'just now'
-  }
-  if (diffInSeconds < 3600) {
-    const minutes = Math.floor(diffInSeconds / 60)
-    return `${minutes}m ago`
-  }
-  if (diffInSeconds < 86400) {
-    const hours = Math.floor(diffInSeconds / 3600)
-    return `${hours}h ago`
-  }
-  if (diffInSeconds < 604800) {
-    const days = Math.floor(diffInSeconds / 86400)
-    return `${days}d ago`
-  }
-  if (diffInSeconds < 2592000) {
-    const weeks = Math.floor(diffInSeconds / 604800)
-    return `${weeks}w ago`
-  }
-  if (diffInSeconds < 31536000) {
-    const months = Math.floor(diffInSeconds / 2592000)
-    return `${months}mo ago`
-  }
-  const years = Math.floor(diffInSeconds / 31536000)
-  return `${years}y ago`
-}
-
-/**
- * Formats a date string to absolute format for tooltip display
- */
-function formatAbsoluteDate(dateString: string): string {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
 interface KnowledgeBaseProps {
   id: string
   knowledgeBaseName?: string
 }
 
-function getFileIcon(mimeType: string, filename: string) {
-  const IconComponent = getDocumentIcon(mimeType, filename)
-  return <IconComponent className='h-6 w-5 flex-shrink-0' />
-}
-
-function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1024
-  const sizes = ['Bytes', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
-}
-
 const AnimatedLoader = ({ className }: { className?: string }) => (
   <Loader2 className={cn(className, 'animate-spin')} />
 )
@@ -336,53 +284,24 @@ const getStatusBadge = (doc: DocumentData) => {
   }
 }
 
-const TAG_SLOTS = [
-  'tag1',
-  'tag2',
-  'tag3',
-  'tag4',
-  'tag5',
-  'tag6',
-  'tag7',
-  'number1',
-  'number2',
-  'number3',
-  'number4',
-  'number5',
-  'date1',
-  'date2',
-  'boolean1',
-  'boolean2',
-  'boolean3',
-] as const
-
-type TagSlot = (typeof TAG_SLOTS)[number]
-
 interface TagValue {
-  slot: TagSlot
+  slot: AllTagSlot
   displayName: string
   value: string
 }
 
-const TAG_FIELD_TYPES: Record<string, string> = {
-  tag: 'text',
-  number: 'number',
-  date: 'date',
-  boolean: 'boolean',
-}
-
 /**
  * Computes tag values for a document
  */
 function getDocumentTags(doc: DocumentData, definitions: TagDefinition[]): TagValue[] {
   const result: TagValue[] = []
 
-  for (const slot of TAG_SLOTS) {
+  for (const slot of ALL_TAG_SLOTS) {
     const raw = doc[slot]
     if (raw == null) continue
 
     const def = definitions.find((d) => d.tagSlot === slot)
-    const fieldType = def?.fieldType || TAG_FIELD_TYPES[slot.replace(/\d+$/, '')] || 'text'
+    const fieldType = def?.fieldType || getFieldTypeForSlot(slot) || 'text'
 
     let value: string
     if (fieldType === 'date') {
@@ -424,6 +343,8 @@ export function KnowledgeBase({
 
   const [searchQuery, setSearchQuery] = useState('')
   const [showTagsModal, setShowTagsModal] = useState(false)
+  const [enabledFilter, setEnabledFilter] = useState<'all' | 'enabled' | 'disabled'>('all')
+  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = useState(false)
 
   /**
    * Memoize the search query setter to prevent unnecessary re-renders
@@ -434,6 +355,7 @@ export function KnowledgeBase({
   }, [])
 
   const [selectedDocuments, setSelectedDocuments] = useState<Set<string>>(new Set())
+  const [isSelectAllMode, setIsSelectAllMode] = useState(false)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
   const [showAddDocumentsModal, setShowAddDocumentsModal] = useState(false)
   const [showDeleteDocumentModal, setShowDeleteDocumentModal] = useState(false)
@@ -460,7 +382,6 @@ export function KnowledgeBase({
     error: knowledgeBaseError,
     refresh: refreshKnowledgeBase,
   } = useKnowledgeBase(id)
-  const [hasProcessingDocuments, setHasProcessingDocuments] = useState(false)
 
   const {
     documents,
@@ -469,6 +390,7 @@ export function KnowledgeBase({
     isFetching: isFetchingDocuments,
     isPlaceholderData: isPlaceholderDocuments,
     error: documentsError,
+    hasProcessingDocuments,
     updateDocument,
     refreshDocuments,
   } = useKnowledgeBaseDocuments(id, {
@@ -477,7 +399,14 @@ export function KnowledgeBase({
     offset: (currentPage - 1) * DOCUMENTS_PER_PAGE,
     sortBy,
     sortOrder,
-    refetchInterval: hasProcessingDocuments && !isDeleting ? 3000 : false,
+    refetchInterval: (data) => {
+      if (isDeleting) return false
+      const hasPending = data?.documents?.some(
+        (doc) => doc.processingStatus === 'pending' || doc.processingStatus === 'processing'
+      )
+      return hasPending ? 3000 : false
+    },
+    enabledFilter,
   })
 
   const { tagDefinitions } = useKnowledgeBaseTagDefinitions(id)
@@ -543,52 +472,52 @@ export function KnowledgeBase({
     </TableHead>
   )
 
-  useEffect(() => {
-    const processing = documents.some(
-      (doc) => doc.processingStatus === 'pending' || doc.processingStatus === 'processing'
-    )
-    setHasProcessingDocuments(processing)
-
-    if (processing) {
-      checkForDeadProcesses()
-    }
-  }, [documents])
-
   /**
    * Checks for documents with stale processing states and marks them as failed
    */
-  const checkForDeadProcesses = () => {
-    const now = new Date()
-    const DEAD_PROCESS_THRESHOLD_MS = 600 * 1000 // 10 minutes
+  const checkForDeadProcesses = useCallback(
+    (docsToCheck: DocumentData[]) => {
+      const now = new Date()
+      const DEAD_PROCESS_THRESHOLD_MS = 600 * 1000 // 10 minutes
 
-    const staleDocuments = documents.filter((doc) => {
-      if (doc.processingStatus !== 'processing' || !doc.processingStartedAt) {
-        return false
-      }
-
-      const processingDuration = now.getTime() - new Date(doc.processingStartedAt).getTime()
-      return processingDuration > DEAD_PROCESS_THRESHOLD_MS
-    })
-
-    if (staleDocuments.length === 0) return
-
-    logger.warn(`Found ${staleDocuments.length} documents with dead processes`)
-
-    staleDocuments.forEach((doc) => {
-      updateDocumentMutation(
-        {
-          knowledgeBaseId: id,
-          documentId: doc.id,
-          updates: { markFailedDueToTimeout: true },
-        },
-        {
-          onSuccess: () => {
-            logger.info(`Successfully marked dead process as failed for document: ${doc.filename}`)
-          },
+      const staleDocuments = docsToCheck.filter((doc) => {
+        if (doc.processingStatus !== 'processing' || !doc.processingStartedAt) {
+          return false
         }
-      )
-    })
-  }
+
+        const processingDuration = now.getTime() - new Date(doc.processingStartedAt).getTime()
+        return processingDuration > DEAD_PROCESS_THRESHOLD_MS
+      })
+
+      if (staleDocuments.length === 0) return
+
+      logger.warn(`Found ${staleDocuments.length} documents with dead processes`)
+
+      staleDocuments.forEach((doc) => {
+        updateDocumentMutation(
+          {
+            knowledgeBaseId: id,
+            documentId: doc.id,
+            updates: { markFailedDueToTimeout: true },
+          },
+          {
+            onSuccess: () => {
+              logger.info(
+                `Successfully marked dead process as failed for document: ${doc.filename}`
+              )
+            },
+          }
+        )
+      })
+    },
+    [id, updateDocumentMutation]
+  )
+
+  useEffect(() => {
+    if (hasProcessingDocuments) {
+      checkForDeadProcesses(documents)
+    }
+  }, [hasProcessingDocuments, documents, checkForDeadProcesses])
 
   const handleToggleEnabled = (docId: string) => {
     const document = documents.find((doc) => doc.id === docId)
@@ -748,6 +677,7 @@ export function KnowledgeBase({
       setSelectedDocuments(new Set(documents.map((doc) => doc.id)))
     } else {
       setSelectedDocuments(new Set())
+      setIsSelectAllMode(false)
     }
   }
 
@@ -793,6 +723,26 @@ export function KnowledgeBase({
    * Handles bulk enabling of selected documents
    */
   const handleBulkEnable = () => {
+    if (isSelectAllMode) {
+      bulkDocumentMutation(
+        {
+          knowledgeBaseId: id,
+          operation: 'enable',
+          selectAll: true,
+          enabledFilter,
+        },
+        {
+          onSuccess: (result) => {
+            logger.info(`Successfully enabled ${result.successCount} documents`)
+            setSelectedDocuments(new Set())
+            setIsSelectAllMode(false)
+            refreshDocuments()
+          },
+        }
+      )
+      return
+    }
+
     const documentsToEnable = documents.filter(
       (doc) => selectedDocuments.has(doc.id) && !doc.enabled
     )
@@ -821,6 +771,26 @@ export function KnowledgeBase({
    * Handles bulk disabling of selected documents
    */
   const handleBulkDisable = () => {
+    if (isSelectAllMode) {
+      bulkDocumentMutation(
+        {
+          knowledgeBaseId: id,
+          operation: 'disable',
+          selectAll: true,
+          enabledFilter,
+        },
+        {
+          onSuccess: (result) => {
+            logger.info(`Successfully disabled ${result.successCount} documents`)
+            setSelectedDocuments(new Set())
+            setIsSelectAllMode(false)
+            refreshDocuments()
+          },
+        }
+      )
+      return
+    }
+
     const documentsToDisable = documents.filter(
       (doc) => selectedDocuments.has(doc.id) && doc.enabled
     )
@@ -845,18 +815,35 @@ export function KnowledgeBase({
     )
   }
 
-  /**
-   * Opens the bulk delete confirmation modal
-   */
   const handleBulkDelete = () => {
     if (selectedDocuments.size === 0) return
     setShowBulkDeleteModal(true)
   }
 
-  /**
-   * Confirms and executes the bulk deletion of selected documents
-   */
   const confirmBulkDelete = () => {
+    if (isSelectAllMode) {
+      bulkDocumentMutation(
+        {
+          knowledgeBaseId: id,
+          operation: 'delete',
+          selectAll: true,
+          enabledFilter,
+        },
+        {
+          onSuccess: (result) => {
+            logger.info(`Successfully deleted ${result.successCount} documents`)
+            refreshDocuments()
+            setSelectedDocuments(new Set())
+            setIsSelectAllMode(false)
+          },
+          onSettled: () => {
+            setShowBulkDeleteModal(false)
+          },
+        }
+      )
+      return
+    }
+
     const documentsToDelete = documents.filter((doc) => selectedDocuments.has(doc.id))
 
     if (documentsToDelete.length === 0) return
@@ -881,14 +868,17 @@ export function KnowledgeBase({
   }
 
   const selectedDocumentsList = documents.filter((doc) => selectedDocuments.has(doc.id))
-  const enabledCount = selectedDocumentsList.filter((doc) => doc.enabled).length
-  const disabledCount = selectedDocumentsList.filter((doc) => !doc.enabled).length
+  const enabledCount = isSelectAllMode
+    ? enabledFilter === 'disabled'
+      ? 0
+      : pagination.total
+    : selectedDocumentsList.filter((doc) => doc.enabled).length
+  const disabledCount = isSelectAllMode
+    ? enabledFilter === 'enabled'
+      ? 0
+      : pagination.total
+    : selectedDocumentsList.filter((doc) => !doc.enabled).length
 
-  /**
-   * Handle right-click on a document row
-   * If right-clicking on an unselected document, select only that document
-   * If right-clicking on a selected document with multiple selections, keep all selections
-   */
   const handleDocumentContextMenu = useCallback(
     (e: React.MouseEvent, doc: DocumentData) => {
       const isCurrentlySelected = selectedDocuments.has(doc.id)
@@ -1005,11 +995,13 @@ export function KnowledgeBase({
             </div>
           </div>
 
-          {knowledgeBase?.description && (
-            <p className='mt-[4px] line-clamp-2 max-w-[40vw] font-medium text-[14px] text-[var(--text-tertiary)]'>
-              {knowledgeBase.description}
-            </p>
-          )}
+          <div>
+            {knowledgeBase?.description && (
+              <p className='mt-[4px] line-clamp-2 max-w-[40vw] font-medium text-[14px] text-[var(--text-tertiary)]'>
+                {knowledgeBase.description}
+              </p>
+            )}
+          </div>
 
           <div className='mt-[16px] flex items-center gap-[8px]'>
             <span className='text-[14px] text-[var(--text-muted)]'>
@@ -1052,21 +1044,76 @@ export function KnowledgeBase({
                 ))}
             </div>
 
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  onClick={handleAddDocuments}
-                  disabled={userPermissions.canEdit !== true}
-                  variant='tertiary'
-                  className='h-[32px] rounded-[6px]'
-                >
-                  Add Documents
-                </Button>
-              </Tooltip.Trigger>
-              {userPermissions.canEdit !== true && (
-                <Tooltip.Content>Write permission required to add documents</Tooltip.Content>
-              )}
-            </Tooltip.Root>
+            <div className='flex items-center gap-[8px]'>
+              <Popover open={isFilterPopoverOpen} onOpenChange={setIsFilterPopoverOpen}>
+                <PopoverTrigger asChild>
+                  <Button variant='default' className='h-[32px] rounded-[6px]'>
+                    {enabledFilter === 'all'
+                      ? 'All'
+                      : enabledFilter === 'enabled'
+                        ? 'Enabled'
+                        : 'Disabled'}
+                    <ChevronDown className='ml-2 h-4 w-4 text-muted-foreground' />
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent align='end' side='bottom' sideOffset={4}>
+                  <div className='flex flex-col gap-[2px]'>
+                    <PopoverItem
+                      active={enabledFilter === 'all'}
+                      onClick={() => {
+                        setEnabledFilter('all')
+                        setIsFilterPopoverOpen(false)
+                        setCurrentPage(1)
+                        setSelectedDocuments(new Set())
+                        setIsSelectAllMode(false)
+                      }}
+                    >
+                      All
+                    </PopoverItem>
+                    <PopoverItem
+                      active={enabledFilter === 'enabled'}
+                      onClick={() => {
+                        setEnabledFilter('enabled')
+                        setIsFilterPopoverOpen(false)
+                        setCurrentPage(1)
+                        setSelectedDocuments(new Set())
+                        setIsSelectAllMode(false)
+                      }}
+                    >
+                      Enabled
+                    </PopoverItem>
+                    <PopoverItem
+                      active={enabledFilter === 'disabled'}
+                      onClick={() => {
+                        setEnabledFilter('disabled')
+                        setIsFilterPopoverOpen(false)
+                        setCurrentPage(1)
+                        setSelectedDocuments(new Set())
+                        setIsSelectAllMode(false)
+                      }}
+                    >
+                      Disabled
+                    </PopoverItem>
+                  </div>
+                </PopoverContent>
+              </Popover>
+
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    onClick={handleAddDocuments}
+                    disabled={userPermissions.canEdit !== true}
+                    variant='tertiary'
+                    className='h-[32px] rounded-[6px]'
+                  >
+                    Add Documents
+                  </Button>
+                </Tooltip.Trigger>
+                {userPermissions.canEdit !== true && (
+                  <Tooltip.Content>Write permission required to add documents</Tooltip.Content>
+                )}
+              </Tooltip.Root>
+            </div>
           </div>
 
           {error && !isLoadingKnowledgeBase && (
@@ -1089,14 +1136,20 @@ export function KnowledgeBase({
               <div className='mt-[10px] flex h-64 items-center justify-center rounded-lg border border-muted-foreground/25 bg-muted/20'>
                 <div className='text-center'>
                   <p className='font-medium text-[var(--text-secondary)] text-sm'>
-                    {searchQuery ? 'No documents found' : 'No documents yet'}
+                    {searchQuery
+                      ? 'No documents found'
+                      : enabledFilter !== 'all'
+                        ? 'Nothing matches your filter'
+                        : 'No documents yet'}
                   </p>
                   <p className='mt-1 text-[var(--text-muted)] text-xs'>
                     {searchQuery
                       ? 'Try a different search term'
-                      : userPermissions.canEdit === true
-                        ? 'Add documents to get started'
-                        : 'Documents will appear here once added'}
+                      : enabledFilter !== 'all'
+                        ? 'Try changing the filter'
+                        : userPermissions.canEdit === true
+                          ? 'Add documents to get started'
+                          : 'Documents will appear here once added'}
                   </p>
                 </div>
               </div>
@@ -1120,7 +1173,7 @@ export function KnowledgeBase({
                     {renderSortableHeader('tokenCount', 'Tokens', 'hidden w-[8%] lg:table-cell')}
                     {renderSortableHeader('chunkCount', 'Chunks', 'w-[8%]')}
                     {renderSortableHeader('uploadedAt', 'Uploaded', 'w-[11%]')}
-                    {renderSortableHeader('processingStatus', 'Status', 'w-[10%]')}
+                    {renderSortableHeader('enabled', 'Status', 'w-[10%]')}
                     <TableHead className='w-[12%] px-[12px] py-[8px] text-[12px] text-[var(--text-secondary)]'>
                       Tags
                     </TableHead>
@@ -1164,7 +1217,10 @@ export function KnowledgeBase({
                         </TableCell>
                         <TableCell className='w-[180px] max-w-[180px] px-[12px] py-[8px]'>
                           <div className='flex min-w-0 items-center gap-[8px]'>
-                            {getFileIcon(doc.mimeType, doc.filename)}
+                            {(() => {
+                              const IconComponent = getDocumentIcon(doc.mimeType, doc.filename)
+                              return <IconComponent className='h-6 w-5 flex-shrink-0' />
+                            })()}
                             <Tooltip.Root>
                               <Tooltip.Trigger asChild>
                                 <span
@@ -1508,6 +1564,14 @@ export function KnowledgeBase({
         enabledCount={enabledCount}
         disabledCount={disabledCount}
         isLoading={isBulkOperating}
+        totalCount={pagination.total}
+        isAllPageSelected={isAllSelected}
+        isAllSelected={isSelectAllMode}
+        onSelectAll={() => setIsSelectAllMode(true)}
+        onClearSelectAll={() => {
+          setIsSelectAllMode(false)
+          setSelectedDocuments(new Set())
+        }}
       />
 
       <DocumentContextMenu

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx

@@ -13,6 +13,11 @@ interface ActionBarProps {
   disabledCount?: number
   isLoading?: boolean
   className?: string
+  totalCount?: number
+  isAllPageSelected?: boolean
+  isAllSelected?: boolean
+  onSelectAll?: () => void
+  onClearSelectAll?: () => void
 }
 
 export function ActionBar({
@@ -24,14 +29,21 @@ export function ActionBar({
   disabledCount = 0,
   isLoading = false,
   className,
+  totalCount = 0,
+  isAllPageSelected = false,
+  isAllSelected = false,
+  onSelectAll,
+  onClearSelectAll,
 }: ActionBarProps) {
   const userPermissions = useUserPermissionsContext()
 
-  if (selectedCount === 0) return null
+  if (selectedCount === 0 && !isAllSelected) return null
 
   const canEdit = userPermissions.canEdit
   const showEnableButton = disabledCount > 0 && onEnable && canEdit
   const showDisableButton = enabledCount > 0 && onDisable && canEdit
+  const showSelectAllOption =
+    isAllPageSelected && !isAllSelected && totalCount > selectedCount && onSelectAll
 
   return (
     <motion.div
@@ -43,7 +55,31 @@ export function ActionBar({
     >
       <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-[8px] py-[6px]'>
         <span className='px-[4px] text-[13px] text-[var(--text-secondary)]'>
-          {selectedCount} selected
+          {isAllSelected ? totalCount : selectedCount} selected
+          {showSelectAllOption && (
+            <>
+              {' · '}
+              <button
+                type='button'
+                onClick={onSelectAll}
+                className='text-[var(--brand-primary)] hover:underline'
+              >
+                Select all
+              </button>
+            </>
+          )}
+          {isAllSelected && onClearSelectAll && (
+            <>
+              {' · '}
+              <button
+                type='button'
+                onClick={onClearSelectAll}
+                className='text-[var(--brand-primary)] hover:underline'
+              >
+                Clear
+              </button>
+            </>
+          )}
         </span>
 
         <div className='flex items-center gap-[5px]'>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx

@@ -123,7 +123,11 @@ export function RenameDocumentModal({
                 >
                   Cancel
                 </Button>
-                <Button variant='tertiary' type='submit' disabled={isSubmitting || !name?.trim()}>
+                <Button
+                  variant='tertiary'
+                  type='submit'
+                  disabled={isSubmitting || !name?.trim() || name.trim() === initialName}
+                >
                   {isSubmitting ? 'Renaming...' : 'Rename'}
                 </Button>
               </div>

apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { Badge, DocumentAttachment, Tooltip } from '@/components/emcn'
+import { formatAbsoluteDate, formatRelativeTime } from '@/lib/core/utils/formatting'
 import { BaseTagsModal } from '@/app/workspace/[workspaceId]/knowledge/[id]/components'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
@@ -21,55 +22,6 @@ interface BaseCardProps {
   onDelete?: (id: string) => Promise<void>
 }
 
-/**
- * Formats a date string to relative time (e.g., "2h ago", "3d ago")
- */
-function formatRelativeTime(dateString: string): string {
-  const date = new Date(dateString)
-  const now = new Date()
-  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000)
-
-  if (diffInSeconds < 60) {
-    return 'just now'
-  }
-  if (diffInSeconds < 3600) {
-    const minutes = Math.floor(diffInSeconds / 60)
-    return `${minutes}m ago`
-  }
-  if (diffInSeconds < 86400) {
-    const hours = Math.floor(diffInSeconds / 3600)
-    return `${hours}h ago`
-  }
-  if (diffInSeconds < 604800) {
-    const days = Math.floor(diffInSeconds / 86400)
-    return `${days}d ago`
-  }
-  if (diffInSeconds < 2592000) {
-    const weeks = Math.floor(diffInSeconds / 604800)
-    return `${weeks}w ago`
-  }
-  if (diffInSeconds < 31536000) {
-    const months = Math.floor(diffInSeconds / 2592000)
-    return `${months}mo ago`
-  }
-  const years = Math.floor(diffInSeconds / 31536000)
-  return `${years}y ago`
-}
-
-/**
- * Formats a date string to absolute format for tooltip display
- */
-function formatAbsoluteDate(dateString: string): string {
-  const date = new Date(dateString)
-  return date.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}
-
 /**
  * Skeleton placeholder for a knowledge base card
  */

apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx

@@ -344,53 +344,51 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                   <Textarea
                     id='description'
                     placeholder='Describe this knowledge base (optional)'
-                    rows={3}
+                    rows={4}
                     {...register('description')}
                     className={cn(errors.description && 'border-[var(--text-error)]')}
                   />
                 </div>
 
-                <div className='space-y-[12px] rounded-[6px] bg-[var(--surface-5)] px-[12px] py-[14px]'>
-                  <div className='grid grid-cols-2 gap-[12px]'>
-                    <div className='flex flex-col gap-[8px]'>
-                      <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
-                      <Input
-                        id='minChunkSize'
-                        placeholder='100'
-                        {...register('minChunkSize', { valueAsNumber: true })}
-                        className={cn(errors.minChunkSize && 'border-[var(--text-error)]')}
-                        autoComplete='off'
-                        data-form-type='other'
-                        name='min-chunk-size'
-                      />
-                    </div>
-
-                    <div className='flex flex-col gap-[8px]'>
-                      <Label htmlFor='maxChunkSize'>Max Chunk Size (tokens)</Label>
-                      <Input
-                        id='maxChunkSize'
-                        placeholder='1024'
-                        {...register('maxChunkSize', { valueAsNumber: true })}
-                        className={cn(errors.maxChunkSize && 'border-[var(--text-error)]')}
-                        autoComplete='off'
-                        data-form-type='other'
-                        name='max-chunk-size'
-                      />
-                    </div>
+                <div className='grid grid-cols-2 gap-[12px]'>
+                  <div className='flex flex-col gap-[8px]'>
+                    <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
+                    <Input
+                      id='minChunkSize'
+                      placeholder='100'
+                      {...register('minChunkSize', { valueAsNumber: true })}
+                      className={cn(errors.minChunkSize && 'border-[var(--text-error)]')}
+                      autoComplete='off'
+                      data-form-type='other'
+                      name='min-chunk-size'
+                    />
                   </div>
 
                   <div className='flex flex-col gap-[8px]'>
-                    <Label htmlFor='overlapSize'>Overlap (tokens)</Label>
+                    <Label htmlFor='maxChunkSize'>Max Chunk Size (tokens)</Label>
                     <Input
-                      id='overlapSize'
-                      placeholder='200'
-                      {...register('overlapSize', { valueAsNumber: true })}
-                      className={cn(errors.overlapSize && 'border-[var(--text-error)]')}
+                      id='maxChunkSize'
+                      placeholder='1024'
+                      {...register('maxChunkSize', { valueAsNumber: true })}
+                      className={cn(errors.maxChunkSize && 'border-[var(--text-error)]')}
                       autoComplete='off'
                       data-form-type='other'
-                      name='overlap-size'
+                      name='max-chunk-size'
                     />
                   </div>
+                </div>
+
+                <div className='flex flex-col gap-[8px]'>
+                  <Label htmlFor='overlapSize'>Overlap (tokens)</Label>
+                  <Input
+                    id='overlapSize'
+                    placeholder='200'
+                    {...register('overlapSize', { valueAsNumber: true })}
+                    className={cn(errors.overlapSize && 'border-[var(--text-error)]')}
+                    autoComplete='off'
+                    data-form-type='other'
+                    name='overlap-size'
+                  />
                   <p className='text-[11px] text-[var(--text-muted)]'>
                     1 token ≈ 4 characters. Max chunk size and overlap are in tokens.
                   </p>

apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx

@@ -59,7 +59,7 @@ export function EditKnowledgeBaseModal({
     handleSubmit,
     reset,
     watch,
-    formState: { errors },
+    formState: { errors, isDirty },
   } = useForm<FormValues>({
     resolver: zodResolver(FormSchema),
     defaultValues: {
@@ -127,7 +127,7 @@ export function EditKnowledgeBaseModal({
                 <Textarea
                   id='description'
                   placeholder='Describe this knowledge base (optional)'
-                  rows={3}
+                  rows={4}
                   {...register('description')}
                   className={cn(errors.description && 'border-[var(--text-error)]')}
                 />
@@ -161,7 +161,7 @@ export function EditKnowledgeBaseModal({
                 <Button
                   variant='tertiary'
                   type='submit'
-                  disabled={isSubmitting || !nameValue?.trim()}
+                  disabled={isSubmitting || !nameValue?.trim() || !isDirty}
                 >
                   {isSubmitting ? 'Saving...' : 'Save'}
                 </Button>

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx

@@ -16,8 +16,8 @@ import {
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { cn } from '@/lib/core/utils/cn'
 import {
-  BlockDetailsSidebar,
   getLeftmostBlockId,
+  PreviewEditor,
   WorkflowPreview,
 } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useExecutionSnapshot } from '@/hooks/queries/logs'
@@ -248,11 +248,10 @@ export function ExecutionSnapshot({
             cursorStyle='pointer'
             executedBlocks={blockExecutions}
             selectedBlockId={pinnedBlockId}
-            lightweight
           />
         </div>
         {pinnedBlockId && workflowState.blocks[pinnedBlockId] && (
-          <BlockDetailsSidebar
+          <PreviewEditor
             block={workflowState.blocks[pinnedBlockId]}
             executionData={blockExecutions[pinnedBlockId]}
             allBlockExecutions={blockExecutions}

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx

@@ -2,8 +2,7 @@
 
 import type React from 'react'
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import clsx from 'clsx'
-import { ArrowDown, ArrowUp, X } from 'lucide-react'
+import { ArrowDown, ArrowUp, Check, Clipboard, Search, X } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   Button,
@@ -15,9 +14,11 @@ import {
   PopoverContent,
   PopoverDivider,
   PopoverItem,
+  Tooltip,
 } from '@/components/emcn'
 import { WorkflowIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
+import { formatDuration } from '@/lib/core/utils/formatting'
 import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/loop/loop-config'
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getBlock, getBlockByToolName } from '@/blocks'
@@ -26,7 +27,6 @@ import type { TraceSpan } from '@/stores/logs/filters/types'
 
 interface TraceSpansProps {
   traceSpans?: TraceSpan[]
-  totalDuration?: number
 }
 
 /**
@@ -100,6 +100,20 @@ function parseTime(value?: string | number | null): number {
   return Number.isFinite(ms) ? ms : 0
 }
 
+/**
+ * Checks if a span or any of its descendants has an error
+ */
+function hasErrorInTree(span: TraceSpan): boolean {
+  if (span.status === 'error') return true
+  if (span.children && span.children.length > 0) {
+    return span.children.some((child) => hasErrorInTree(child))
+  }
+  if (span.toolCalls && span.toolCalls.length > 0) {
+    return span.toolCalls.some((tc) => tc.error)
+  }
+  return false
+}
+
 /**
  * Normalizes and sorts trace spans recursively.
  * Merges children from both span.children and span.output.childTraceSpans,
@@ -142,14 +156,6 @@ function normalizeAndSortSpans(spans: TraceSpan[]): TraceSpan[] {
 
 const DEFAULT_BLOCK_COLOR = '#6b7280'
 
-/**
- * Formats duration in ms
- */
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`
-  return `${(ms / 1000).toFixed(2)}s`
-}
-
 /**
  * Gets icon and color for a span type using block config
  */
@@ -230,7 +236,7 @@ function ProgressBar({
   }, [span, childSpans, workflowStartTime, totalDuration])
 
   return (
-    <div className='relative mb-[8px] h-[5px] w-full overflow-hidden rounded-[18px] bg-[var(--divider)]'>
+    <div className='relative h-[5px] w-full overflow-hidden rounded-[18px] bg-[var(--divider)]'>
       {segments.map((segment, index) => (
         <div
           key={index}
@@ -246,143 +252,6 @@ function ProgressBar({
   )
 }
 
-interface ExpandableRowHeaderProps {
-  name: string
-  duration: number
-  isError: boolean
-  isExpanded: boolean
-  hasChildren: boolean
-  showIcon: boolean
-  icon: React.ComponentType<{ className?: string }> | null
-  bgColor: string
-  onToggle: () => void
-}
-
-/**
- * Reusable expandable row header with chevron, icon, name, and duration
- */
-function ExpandableRowHeader({
-  name,
-  duration,
-  isError,
-  isExpanded,
-  hasChildren,
-  showIcon,
-  icon: Icon,
-  bgColor,
-  onToggle,
-}: ExpandableRowHeaderProps) {
-  return (
-    <div
-      className={clsx('group flex items-center justify-between', hasChildren && 'cursor-pointer')}
-      onClick={hasChildren ? onToggle : undefined}
-      onKeyDown={
-        hasChildren
-          ? (e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault()
-                onToggle()
-              }
-            }
-          : undefined
-      }
-      role={hasChildren ? 'button' : undefined}
-      tabIndex={hasChildren ? 0 : undefined}
-      aria-expanded={hasChildren ? isExpanded : undefined}
-      aria-label={hasChildren ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
-    >
-      <div className='flex items-center gap-[8px]'>
-        {hasChildren && (
-          <ChevronDown
-            className='h-[10px] w-[10px] flex-shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]'
-            style={{ transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
-          />
-        )}
-        {showIcon && (
-          <div
-            className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
-            style={{ background: bgColor }}
-          >
-            {Icon && <Icon className={clsx('text-white', '!h-[9px] !w-[9px]')} />}
-          </div>
-        )}
-        <span
-          className='font-medium text-[12px]'
-          style={{ color: isError ? 'var(--text-error)' : 'var(--text-secondary)' }}
-        >
-          {name}
-        </span>
-      </div>
-      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
-        {formatDuration(duration)}
-      </span>
-    </div>
-  )
-}
-
-interface SpanContentProps {
-  span: TraceSpan
-  spanId: string
-  isError: boolean
-  workflowStartTime: number
-  totalDuration: number
-  expandedSections: Set<string>
-  onToggle: (section: string) => void
-}
-
-/**
- * Reusable component for rendering span content (progress bar + input/output sections)
- */
-function SpanContent({
-  span,
-  spanId,
-  isError,
-  workflowStartTime,
-  totalDuration,
-  expandedSections,
-  onToggle,
-}: SpanContentProps) {
-  const hasInput = Boolean(span.input)
-  const hasOutput = Boolean(span.output)
-
-  return (
-    <>
-      <ProgressBar
-        span={span}
-        childSpans={span.children}
-        workflowStartTime={workflowStartTime}
-        totalDuration={totalDuration}
-      />
-
-      {hasInput && (
-        <InputOutputSection
-          label='Input'
-          data={span.input}
-          isError={false}
-          spanId={spanId}
-          sectionType='input'
-          expandedSections={expandedSections}
-          onToggle={onToggle}
-        />
-      )}
-
-      {hasInput && hasOutput && <div className='border-[var(--border)] border-t border-dashed' />}
-
-      {hasOutput && (
-        <InputOutputSection
-          label={isError ? 'Error' : 'Output'}
-          data={span.output}
-          isError={isError}
-          spanId={spanId}
-          sectionType='output'
-          expandedSections={expandedSections}
-          onToggle={onToggle}
-        />
-      )}
-    </>
-  )
-}
-
 /**
  * Renders input/output section with collapsible content, context menu, and search
  */
@@ -406,16 +275,14 @@ function InputOutputSection({
   const sectionKey = `${spanId}-${sectionType}`
   const isExpanded = expandedSections.has(sectionKey)
   const contentRef = useRef<HTMLDivElement>(null)
-  const menuRef = useRef<HTMLDivElement>(null)
 
   // Context menu state
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
+  const [copied, setCopied] = useState(false)
 
   // Code viewer features
   const {
-    wrapText,
-    toggleWrapText,
     isSearchActive,
     searchQuery,
     setSearchQuery,
@@ -447,6 +314,8 @@ function InputOutputSection({
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(jsonString)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
     closeContextMenu()
   }, [jsonString, closeContextMenu])
 
@@ -455,13 +324,8 @@ function InputOutputSection({
     closeContextMenu()
   }, [activateSearch, closeContextMenu])
 
-  const handleToggleWrap = useCallback(() => {
-    toggleWrapText()
-    closeContextMenu()
-  }, [toggleWrapText, closeContextMenu])
-
   return (
-    <div className='relative flex min-w-0 flex-col gap-[8px] overflow-hidden'>
+    <div className='relative flex min-w-0 flex-col gap-[6px] overflow-hidden'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => onToggle(sectionKey)}
@@ -477,7 +341,7 @@ function InputOutputSection({
         aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${label.toLowerCase()}`}
       >
         <span
-          className={clsx(
+          className={cn(
             'font-medium text-[12px] transition-colors',
             isError
               ? 'text-[var(--text-error)]'
@@ -487,9 +351,7 @@ function InputOutputSection({
           {label}
         </span>
         <ChevronDown
-          className={clsx(
-            'h-[10px] w-[10px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
-          )}
+          className='h-[8px] w-[8px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
           style={{
             transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
           }}
@@ -497,16 +359,57 @@ function InputOutputSection({
       </div>
       {isExpanded && (
         <>
-          <div ref={contentRef} onContextMenu={handleContextMenu}>
+          <div ref={contentRef} onContextMenu={handleContextMenu} className='relative'>
             <Code.Viewer
               code={jsonString}
               language='json'
-              className='!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
-              wrapText={wrapText}
+              className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+              wrapText
               searchQuery={isSearchActive ? searchQuery : undefined}
               currentMatchIndex={currentMatchIndex}
               onMatchCountChange={handleMatchCountChange}
             />
+            {/* Glass action buttons overlay */}
+            {!isSearchActive && (
+              <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      type='button'
+                      variant='default'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        handleCopy()
+                      }}
+                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                    >
+                      {copied ? (
+                        <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
+                      ) : (
+                        <Clipboard className='h-[10px] w-[10px]' />
+                      )}
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
+                </Tooltip.Root>
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      type='button'
+                      variant='default'
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        activateSearch()
+                      }}
+                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                    >
+                      <Search className='h-[10px] w-[10px]' />
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='top'>Search</Tooltip.Content>
+                </Tooltip.Root>
+              </div>
+            )}
           </div>
 
           {/* Search Overlay */}
@@ -579,13 +482,10 @@ function InputOutputSection({
                     height: '1px',
                   }}
                 />
-                <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
+                <PopoverContent align='start' side='bottom' sideOffset={4}>
                   <PopoverItem onClick={handleCopy}>Copy</PopoverItem>
                   <PopoverDivider />
                   <PopoverItem onClick={handleSearch}>Search</PopoverItem>
-                  <PopoverItem showCheck={wrapText} onClick={handleToggleWrap}>
-                    Wrap Text
-                  </PopoverItem>
                 </PopoverContent>
               </Popover>,
               document.body
@@ -596,355 +496,229 @@ function InputOutputSection({
   )
 }
 
-interface NestedBlockItemProps {
+interface TraceSpanNodeProps {
   span: TraceSpan
-  parentId: string
-  index: number
+  workflowStartTime: number
+  totalDuration: number
+  depth: number
+  expandedNodes: Set<string>
   expandedSections: Set<string>
-  onToggle: (section: string) => void
-  workflowStartTime: number
-  totalDuration: number
-  expandedChildren: Set<string>
-  onToggleChildren: (spanId: string) => void
+  onToggleNode: (nodeId: string) => void
+  onToggleSection: (section: string) => void
 }
 
 /**
- * Recursive component for rendering nested blocks at any depth
+ * Recursive tree node component for rendering trace spans
  */
-function NestedBlockItem({
+const TraceSpanNode = memo(function TraceSpanNode({
   span,
-  parentId,
-  index,
+  workflowStartTime,
+  totalDuration,
+  depth,
+  expandedNodes,
   expandedSections,
-  onToggle,
-  workflowStartTime,
-  totalDuration,
-  expandedChildren,
-  onToggleChildren,
-}: NestedBlockItemProps): React.ReactNode {
-  const spanId = span.id || `${parentId}-nested-${index}`
-  const isError = span.status === 'error'
-  const { icon: SpanIcon, bgColor } = getBlockIconAndColor(span.type, span.name)
-  const hasChildren = Boolean(span.children && span.children.length > 0)
-  const isChildrenExpanded = expandedChildren.has(spanId)
-
-  return (
-    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
-      <ExpandableRowHeader
-        name={span.name}
-        duration={span.duration || 0}
-        isError={isError}
-        isExpanded={isChildrenExpanded}
-        hasChildren={hasChildren}
-        showIcon={!isIterationType(span.type)}
-        icon={SpanIcon}
-        bgColor={bgColor}
-        onToggle={() => onToggleChildren(spanId)}
-      />
-
-      <SpanContent
-        span={span}
-        spanId={spanId}
-        isError={isError}
-        workflowStartTime={workflowStartTime}
-        totalDuration={totalDuration}
-        expandedSections={expandedSections}
-        onToggle={onToggle}
-      />
-
-      {/* Nested children */}
-      {hasChildren && isChildrenExpanded && (
-        <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
-          {span.children!.map((child, childIndex) => (
-            <NestedBlockItem
-              key={child.id || `${spanId}-child-${childIndex}`}
-              span={child}
-              parentId={spanId}
-              index={childIndex}
-              expandedSections={expandedSections}
-              onToggle={onToggle}
-              workflowStartTime={workflowStartTime}
-              totalDuration={totalDuration}
-              expandedChildren={expandedChildren}
-              onToggleChildren={onToggleChildren}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-interface TraceSpanItemProps {
-  span: TraceSpan
-  totalDuration: number
-  workflowStartTime: number
-  isFirstSpan?: boolean
-}
-
-/**
- * Individual trace span card component.
- * Memoized to prevent re-renders when sibling spans change.
- */
-const TraceSpanItem = memo(function TraceSpanItem({
-  span,
-  totalDuration,
-  workflowStartTime,
-  isFirstSpan = false,
-}: TraceSpanItemProps): React.ReactNode {
-  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
-  const [expandedChildren, setExpandedChildren] = useState<Set<string>>(new Set())
-  const [isCardExpanded, setIsCardExpanded] = useState(false)
-  const toggleSet = useSetToggle()
-
+  onToggleNode,
+  onToggleSection,
+}: TraceSpanNodeProps): React.ReactNode {
   const spanId = span.id || `span-${span.name}-${span.startTime}`
   const spanStartTime = new Date(span.startTime).getTime()
   const spanEndTime = new Date(span.endTime).getTime()
   const duration = span.duration || spanEndTime - spanStartTime
 
-  const hasChildren = Boolean(span.children && span.children.length > 0)
-  const hasToolCalls = Boolean(span.toolCalls && span.toolCalls.length > 0)
-  const isError = span.status === 'error'
-
-  const inlineChildTypes = new Set([
-    'tool',
-    'model',
-    'loop-iteration',
-    'parallel-iteration',
-    'workflow',
-  ])
-
-  // For workflow-in-workflow blocks, all children should be rendered inline/nested
-  const isWorkflowBlock = span.type?.toLowerCase().includes('workflow')
-  const inlineChildren = isWorkflowBlock
-    ? span.children || []
-    : span.children?.filter((child) => inlineChildTypes.has(child.type?.toLowerCase() || '')) || []
-  const otherChildren = isWorkflowBlock
-    ? []
-    : span.children?.filter((child) => !inlineChildTypes.has(child.type?.toLowerCase() || '')) || []
-
-  const toolCallSpans = useMemo(() => {
-    if (!hasToolCalls) return []
-    return span.toolCalls!.map((toolCall, index) => {
-      const toolStartTime = toolCall.startTime
-        ? new Date(toolCall.startTime).getTime()
-        : spanStartTime
-      const toolEndTime = toolCall.endTime
-        ? new Date(toolCall.endTime).getTime()
-        : toolStartTime + (toolCall.duration || 0)
-
-      return {
-        id: `${spanId}-tool-${index}`,
-        name: toolCall.name,
-        type: 'tool',
-        duration: toolCall.duration || toolEndTime - toolStartTime,
-        startTime: new Date(toolStartTime).toISOString(),
-        endTime: new Date(toolEndTime).toISOString(),
-        status: toolCall.error ? ('error' as const) : ('success' as const),
-        input: toolCall.input,
-        output: toolCall.error
-          ? { error: toolCall.error, ...(toolCall.output || {}) }
-          : toolCall.output,
-      } as TraceSpan
-    })
-  }, [hasToolCalls, span.toolCalls, spanId, spanStartTime])
-
-  const handleSectionToggle = useCallback(
-    (section: string) => toggleSet(setExpandedSections, section),
-    [toggleSet]
-  )
-
-  const handleChildrenToggle = useCallback(
-    (childSpanId: string) => toggleSet(setExpandedChildren, childSpanId),
-    [toggleSet]
-  )
+  const isDirectError = span.status === 'error'
+  const hasNestedError = hasErrorInTree(span)
+  const showErrorStyle = isDirectError || hasNestedError
 
   const { icon: BlockIcon, bgColor } = getBlockIconAndColor(span.type, span.name)
 
-  // Check if this card has expandable inline content
-  const hasInlineContent =
-    (isWorkflowBlock && inlineChildren.length > 0) ||
-    (!isWorkflowBlock && (toolCallSpans.length > 0 || inlineChildren.length > 0))
+  // Root workflow execution is always expanded and has no toggle
+  const isRootWorkflow = depth === 0
 
-  const isExpandable = !isFirstSpan && hasInlineContent
+  // Build all children including tool calls
+  const allChildren = useMemo(() => {
+    const children: TraceSpan[] = []
+
+    // Add tool calls as child spans
+    if (span.toolCalls && span.toolCalls.length > 0) {
+      span.toolCalls.forEach((toolCall, index) => {
+        const toolStartTime = toolCall.startTime
+          ? new Date(toolCall.startTime).getTime()
+          : spanStartTime
+        const toolEndTime = toolCall.endTime
+          ? new Date(toolCall.endTime).getTime()
+          : toolStartTime + (toolCall.duration || 0)
+
+        children.push({
+          id: `${spanId}-tool-${index}`,
+          name: toolCall.name,
+          type: 'tool',
+          duration: toolCall.duration || toolEndTime - toolStartTime,
+          startTime: new Date(toolStartTime).toISOString(),
+          endTime: new Date(toolEndTime).toISOString(),
+          status: toolCall.error ? ('error' as const) : ('success' as const),
+          input: toolCall.input,
+          output: toolCall.error
+            ? { error: toolCall.error, ...(toolCall.output || {}) }
+            : toolCall.output,
+        } as TraceSpan)
+      })
+    }
+
+    // Add regular children
+    if (span.children && span.children.length > 0) {
+      children.push(...span.children)
+    }
+
+    // Sort by start time
+    return children.sort((a, b) => parseTime(a.startTime) - parseTime(b.startTime))
+  }, [span, spanId, spanStartTime])
+
+  const hasChildren = allChildren.length > 0
+  const isExpanded = isRootWorkflow || expandedNodes.has(spanId)
+  const isToggleable = !isRootWorkflow
+
+  const hasInput = Boolean(span.input)
+  const hasOutput = Boolean(span.output)
+
+  // For progress bar - show child segments for workflow/iteration types
+  const lowerType = span.type?.toLowerCase() || ''
+  const showChildrenInProgressBar =
+    isIterationType(lowerType) || lowerType === 'workflow' || lowerType === 'workflow_input'
 
   return (
-    <>
-      <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px]'>
-        <ExpandableRowHeader
-          name={span.name}
-          duration={duration}
-          isError={isError}
-          isExpanded={isCardExpanded}
-          hasChildren={isExpandable}
-          showIcon={!isFirstSpan}
-          icon={BlockIcon}
-          bgColor={bgColor}
-          onToggle={() => setIsCardExpanded((prev) => !prev)}
-        />
-
-        <SpanContent
-          span={span}
-          spanId={spanId}
-          isError={isError}
-          workflowStartTime={workflowStartTime}
-          totalDuration={totalDuration}
-          expandedSections={expandedSections}
-          onToggle={handleSectionToggle}
-        />
-
-        {/* For workflow blocks, keep children nested within the card (not as separate cards) */}
-        {!isFirstSpan && isWorkflowBlock && inlineChildren.length > 0 && isCardExpanded && (
-          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
-            {inlineChildren.map((childSpan, index) => (
-              <NestedBlockItem
-                key={childSpan.id || `${spanId}-nested-${index}`}
-                span={childSpan}
-                parentId={spanId}
-                index={index}
-                expandedSections={expandedSections}
-                onToggle={handleSectionToggle}
-                workflowStartTime={workflowStartTime}
-                totalDuration={totalDuration}
-                expandedChildren={expandedChildren}
-                onToggleChildren={handleChildrenToggle}
-              />
-            ))}
-          </div>
-        )}
-
-        {/* For non-workflow blocks, render inline children/tool calls */}
-        {!isFirstSpan && !isWorkflowBlock && isCardExpanded && (
-          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
-            {[...toolCallSpans, ...inlineChildren].map((childSpan, index) => {
-              const childId = childSpan.id || `${spanId}-inline-${index}`
-              const childIsError = childSpan.status === 'error'
-              const childLowerType = childSpan.type?.toLowerCase() || ''
-              const hasNestedChildren = Boolean(childSpan.children && childSpan.children.length > 0)
-              const isNestedExpanded = expandedChildren.has(childId)
-              const showChildrenInProgressBar =
-                isIterationType(childLowerType) || childLowerType === 'workflow'
-              const { icon: ChildIcon, bgColor: childBgColor } = getBlockIconAndColor(
-                childSpan.type,
-                childSpan.name
-              )
-
-              return (
-                <div
-                  key={`inline-${childId}`}
-                  className='flex min-w-0 flex-col gap-[8px] overflow-hidden'
-                >
-                  <ExpandableRowHeader
-                    name={childSpan.name}
-                    duration={childSpan.duration || 0}
-                    isError={childIsError}
-                    isExpanded={isNestedExpanded}
-                    hasChildren={hasNestedChildren}
-                    showIcon={!isIterationType(childSpan.type)}
-                    icon={ChildIcon}
-                    bgColor={childBgColor}
-                    onToggle={() => handleChildrenToggle(childId)}
-                  />
-
-                  <ProgressBar
-                    span={childSpan}
-                    childSpans={showChildrenInProgressBar ? childSpan.children : undefined}
-                    workflowStartTime={workflowStartTime}
-                    totalDuration={totalDuration}
-                  />
-
-                  {childSpan.input && (
-                    <InputOutputSection
-                      label='Input'
-                      data={childSpan.input}
-                      isError={false}
-                      spanId={childId}
-                      sectionType='input'
-                      expandedSections={expandedSections}
-                      onToggle={handleSectionToggle}
-                    />
-                  )}
-
-                  {childSpan.input && childSpan.output && (
-                    <div className='border-[var(--border)] border-t border-dashed' />
-                  )}
-
-                  {childSpan.output && (
-                    <InputOutputSection
-                      label={childIsError ? 'Error' : 'Output'}
-                      data={childSpan.output}
-                      isError={childIsError}
-                      spanId={childId}
-                      sectionType='output'
-                      expandedSections={expandedSections}
-                      onToggle={handleSectionToggle}
-                    />
-                  )}
-
-                  {/* Nested children */}
-                  {showChildrenInProgressBar && hasNestedChildren && isNestedExpanded && (
-                    <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
-                      {childSpan.children!.map((nestedChild, nestedIndex) => (
-                        <NestedBlockItem
-                          key={nestedChild.id || `${childId}-nested-${nestedIndex}`}
-                          span={nestedChild}
-                          parentId={childId}
-                          index={nestedIndex}
-                          expandedSections={expandedSections}
-                          onToggle={handleSectionToggle}
-                          workflowStartTime={workflowStartTime}
-                          totalDuration={totalDuration}
-                          expandedChildren={expandedChildren}
-                          onToggleChildren={handleChildrenToggle}
-                        />
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )
-            })}
-          </div>
+    <div className='flex min-w-0 flex-col'>
+      {/* Node Header Row */}
+      <div
+        className={cn(
+          'group flex items-center justify-between gap-[8px] py-[6px]',
+          isToggleable && 'cursor-pointer'
         )}
+        onClick={isToggleable ? () => onToggleNode(spanId) : undefined}
+        onKeyDown={
+          isToggleable
+            ? (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault()
+                  onToggleNode(spanId)
+                }
+              }
+            : undefined
+        }
+        role={isToggleable ? 'button' : undefined}
+        tabIndex={isToggleable ? 0 : undefined}
+        aria-expanded={isToggleable ? isExpanded : undefined}
+        aria-label={isToggleable ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
+      >
+        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+          {!isIterationType(span.type) && (
+            <div
+              className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+              style={{ background: bgColor }}
+            >
+              {BlockIcon && <BlockIcon className='h-[9px] w-[9px] text-white' />}
+            </div>
+          )}
+          <span
+            className='min-w-0 max-w-[180px] truncate font-medium text-[12px]'
+            style={{ color: showErrorStyle ? 'var(--text-error)' : 'var(--text-secondary)' }}
+          >
+            {span.name}
+          </span>
+          {isToggleable && (
+            <ChevronDown
+              className='h-[8px] w-[8px] flex-shrink-0 text-[var(--text-tertiary)] transition-colors transition-transform duration-100 group-hover:text-[var(--text-primary)]'
+              style={{
+                transform: `translateY(-0.25px) ${isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'}`,
+              }}
+            />
+          )}
+        </div>
+        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+          {formatDuration(duration, { precision: 2 })}
+        </span>
       </div>
 
-      {/* For the first span (workflow execution), render all children as separate top-level cards */}
-      {isFirstSpan &&
-        hasChildren &&
-        span.children!.map((childSpan, index) => (
-          <TraceSpanItem
-            key={childSpan.id || `${spanId}-child-${index}`}
-            span={childSpan}
-            totalDuration={totalDuration}
+      {/* Expanded Content */}
+      {isExpanded && (
+        <div className='flex min-w-0 flex-col gap-[10px]'>
+          {/* Progress Bar */}
+          <ProgressBar
+            span={span}
+            childSpans={showChildrenInProgressBar ? span.children : undefined}
             workflowStartTime={workflowStartTime}
-            isFirstSpan={false}
+            totalDuration={totalDuration}
           />
-        ))}
 
-      {!isFirstSpan &&
-        otherChildren.map((childSpan, index) => (
-          <TraceSpanItem
-            key={childSpan.id || `${spanId}-other-${index}`}
-            span={childSpan}
-            totalDuration={totalDuration}
-            workflowStartTime={workflowStartTime}
-            isFirstSpan={false}
-          />
-        ))}
-    </>
+          {/* Input/Output Sections */}
+          {(hasInput || hasOutput) && (
+            <div className='flex min-w-0 flex-col gap-[6px] overflow-hidden py-[2px]'>
+              {hasInput && (
+                <InputOutputSection
+                  label='Input'
+                  data={span.input}
+                  isError={false}
+                  spanId={spanId}
+                  sectionType='input'
+                  expandedSections={expandedSections}
+                  onToggle={onToggleSection}
+                />
+              )}
+
+              {hasInput && hasOutput && (
+                <div className='border-[var(--border)] border-t border-dashed' />
+              )}
+
+              {hasOutput && (
+                <InputOutputSection
+                  label={isDirectError ? 'Error' : 'Output'}
+                  data={span.output}
+                  isError={isDirectError}
+                  spanId={spanId}
+                  sectionType='output'
+                  expandedSections={expandedSections}
+                  onToggle={onToggleSection}
+                />
+              )}
+            </div>
+          )}
+
+          {/* Nested Children */}
+          {hasChildren && (
+            <div className='flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[10px]'>
+              {allChildren.map((child, index) => (
+                <div key={child.id || `${spanId}-child-${index}`} className='pl-[6px]'>
+                  <TraceSpanNode
+                    span={child}
+                    workflowStartTime={workflowStartTime}
+                    totalDuration={totalDuration}
+                    depth={depth + 1}
+                    expandedNodes={expandedNodes}
+                    expandedSections={expandedSections}
+                    onToggleNode={onToggleNode}
+                    onToggleSection={onToggleSection}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
   )
 })
 
 /**
- * Displays workflow execution trace spans with nested structure.
+ * Displays workflow execution trace spans with nested tree structure.
  * Memoized to prevent re-renders when parent LogDetails updates.
  */
-export const TraceSpans = memo(function TraceSpans({
-  traceSpans,
-  totalDuration = 0,
-}: TraceSpansProps) {
+export const TraceSpans = memo(function TraceSpans({ traceSpans }: TraceSpansProps) {
+  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(() => new Set())
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
+  const toggleSet = useSetToggle()
+
   const { workflowStartTime, actualTotalDuration, normalizedSpans } = useMemo(() => {
     if (!traceSpans || traceSpans.length === 0) {
-      return { workflowStartTime: 0, actualTotalDuration: totalDuration, normalizedSpans: [] }
+      return { workflowStartTime: 0, actualTotalDuration: 0, normalizedSpans: [] }
     }
 
     let earliest = Number.POSITIVE_INFINITY
@@ -962,26 +736,37 @@ export const TraceSpans = memo(function TraceSpans({
       actualTotalDuration: latest - earliest,
       normalizedSpans: normalizeAndSortSpans(traceSpans),
     }
-  }, [traceSpans, totalDuration])
+  }, [traceSpans])
+
+  const handleToggleNode = useCallback(
+    (nodeId: string) => toggleSet(setExpandedNodes, nodeId),
+    [toggleSet]
+  )
+
+  const handleToggleSection = useCallback(
+    (section: string) => toggleSet(setExpandedSections, section),
+    [toggleSet]
+  )
 
   if (!traceSpans || traceSpans.length === 0) {
     return <div className='text-[12px] text-[var(--text-secondary)]'>No trace data available</div>
   }
 
   return (
-    <div className='flex w-full min-w-0 flex-col gap-[6px] overflow-hidden rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
-      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>Trace Span</span>
-      <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
-        {normalizedSpans.map((span, index) => (
-          <TraceSpanItem
-            key={span.id || index}
-            span={span}
-            totalDuration={actualTotalDuration}
-            workflowStartTime={workflowStartTime}
-            isFirstSpan={index === 0}
-          />
-        ))}
-      </div>
+    <div className='flex w-full min-w-0 flex-col overflow-hidden'>
+      {normalizedSpans.map((span, index) => (
+        <TraceSpanNode
+          key={span.id || index}
+          span={span}
+          workflowStartTime={workflowStartTime}
+          totalDuration={actualTotalDuration}
+          depth={0}
+          expandedNodes={expandedNodes}
+          expandedSections={expandedSections}
+          onToggleNode={handleToggleNode}
+          onToggleSection={handleToggleSection}
+        />
+      ))}
     </div>
   )
 })

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -1,10 +1,23 @@
 'use client'
 
-import { memo, useEffect, useMemo, useRef, useState } from 'react'
-import { ChevronUp, X } from 'lucide-react'
-import { Button, Eye } from '@/components/emcn'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ArrowDown, ArrowUp, Check, ChevronUp, Clipboard, Search, X } from 'lucide-react'
+import { createPortal } from 'react-dom'
+import {
+  Button,
+  Code,
+  Eye,
+  Input,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+  Tooltip,
+} from '@/components/emcn'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
+import { cn } from '@/lib/core/utils/cn'
 import {
   ExecutionSnapshot,
   FileCards,
@@ -17,11 +30,194 @@ import {
   StatusBadge,
   TriggerBadge,
 } from '@/app/workspace/[workspaceId]/logs/utils'
+import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { formatCost } from '@/providers/utils'
 import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { useLogDetailsUIStore } from '@/stores/logs/store'
 
+/**
+ * Workflow Output section with code viewer, copy, search, and context menu functionality
+ */
+function WorkflowOutputSection({ output }: { output: Record<string, unknown> }) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [copied, setCopied] = useState(false)
+
+  // Context menu state
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
+  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
+
+  const {
+    isSearchActive,
+    searchQuery,
+    setSearchQuery,
+    matchCount,
+    currentMatchIndex,
+    activateSearch,
+    closeSearch,
+    goToNextMatch,
+    goToPreviousMatch,
+    handleMatchCountChange,
+    searchInputRef,
+  } = useCodeViewerFeatures({ contentRef })
+
+  const jsonString = useMemo(() => JSON.stringify(output, null, 2), [output])
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setContextMenuPosition({ x: e.clientX, y: e.clientY })
+    setIsContextMenuOpen(true)
+  }, [])
+
+  const closeContextMenu = useCallback(() => {
+    setIsContextMenuOpen(false)
+  }, [])
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(jsonString)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+    closeContextMenu()
+  }, [jsonString, closeContextMenu])
+
+  const handleSearch = useCallback(() => {
+    activateSearch()
+    closeContextMenu()
+  }, [activateSearch, closeContextMenu])
+
+  return (
+    <div className='relative flex min-w-0 flex-col overflow-hidden'>
+      <div ref={contentRef} onContextMenu={handleContextMenu} className='relative'>
+        <Code.Viewer
+          code={jsonString}
+          language='json'
+          className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+          wrapText
+          searchQuery={isSearchActive ? searchQuery : undefined}
+          currentMatchIndex={currentMatchIndex}
+          onMatchCountChange={handleMatchCountChange}
+        />
+        {/* Glass action buttons overlay */}
+        {!isSearchActive && (
+          <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  type='button'
+                  variant='default'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    handleCopy()
+                  }}
+                  className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                >
+                  {copied ? (
+                    <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
+                  ) : (
+                    <Clipboard className='h-[10px] w-[10px]' />
+                  )}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
+            </Tooltip.Root>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  type='button'
+                  variant='default'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    activateSearch()
+                  }}
+                  className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                >
+                  <Search className='h-[10px] w-[10px]' />
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content side='top'>Search</Tooltip.Content>
+            </Tooltip.Root>
+          </div>
+        )}
+      </div>
+
+      {/* Search Overlay */}
+      {isSearchActive && (
+        <div
+          className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+          onClick={(e) => e.stopPropagation()}
+        >
+          <Input
+            ref={searchInputRef}
+            type='text'
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder='Search...'
+            className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+          />
+          <span
+            className={cn(
+              'min-w-[45px] text-center text-[11px]',
+              matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
+            )}
+          >
+            {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
+          </span>
+          <Button
+            variant='ghost'
+            className='!p-1'
+            onClick={goToPreviousMatch}
+            disabled={matchCount === 0}
+            aria-label='Previous match'
+          >
+            <ArrowUp className='h-[12px] w-[12px]' />
+          </Button>
+          <Button
+            variant='ghost'
+            className='!p-1'
+            onClick={goToNextMatch}
+            disabled={matchCount === 0}
+            aria-label='Next match'
+          >
+            <ArrowDown className='h-[12px] w-[12px]' />
+          </Button>
+          <Button variant='ghost' className='!p-1' onClick={closeSearch} aria-label='Close search'>
+            <X className='h-[12px] w-[12px]' />
+          </Button>
+        </div>
+      )}
+
+      {/* Context Menu - rendered in portal to avoid transform/overflow clipping */}
+      {typeof document !== 'undefined' &&
+        createPortal(
+          <Popover
+            open={isContextMenuOpen}
+            onOpenChange={closeContextMenu}
+            variant='secondary'
+            size='sm'
+            colorScheme='inverted'
+          >
+            <PopoverAnchor
+              style={{
+                position: 'fixed',
+                left: `${contextMenuPosition.x}px`,
+                top: `${contextMenuPosition.y}px`,
+                width: '1px',
+                height: '1px',
+              }}
+            />
+            <PopoverContent align='start' side='bottom' sideOffset={4}>
+              <PopoverItem onClick={handleCopy}>Copy</PopoverItem>
+              <PopoverDivider />
+              <PopoverItem onClick={handleSearch}>Search</PopoverItem>
+            </PopoverContent>
+          </Popover>,
+          document.body
+        )}
+    </div>
+  )
+}
+
 interface LogDetailsProps {
   /** The log to display details for */
   log: WorkflowLog | null
@@ -78,6 +274,18 @@ export const LogDetails = memo(function LogDetails({
     return isWorkflowExecutionLog && log?.cost
   }, [log, isWorkflowExecutionLog])
 
+  // Extract and clean the workflow final output (remove childTraceSpans for cleaner display)
+  const workflowOutput = useMemo(() => {
+    const executionData = log?.executionData as
+      | { finalOutput?: Record<string, unknown> }
+      | undefined
+    if (!executionData?.finalOutput) return null
+    const { childTraceSpans, ...cleanOutput } = executionData.finalOutput as {
+      childTraceSpans?: unknown
+    } & Record<string, unknown>
+    return cleanOutput
+  }, [log?.executionData])
+
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && isOpen) {
@@ -87,12 +295,12 @@ export const LogDetails = memo(function LogDetails({
       if (isOpen) {
         if (e.key === 'ArrowUp' && hasPrev && onNavigatePrev) {
           e.preventDefault()
-          handleNavigate(onNavigatePrev)
+          onNavigatePrev()
         }
 
         if (e.key === 'ArrowDown' && hasNext && onNavigateNext) {
           e.preventDefault()
-          handleNavigate(onNavigateNext)
+          onNavigateNext()
         }
       }
     }
@@ -101,10 +309,6 @@ export const LogDetails = memo(function LogDetails({
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [isOpen, onClose, hasPrev, hasNext, onNavigatePrev, onNavigateNext])
 
-  const handleNavigate = (navigateFunction: () => void) => {
-    navigateFunction()
-  }
-
   const formattedTimestamp = useMemo(
     () => (log ? formatDate(log.createdAt) : null),
     [log?.createdAt]
@@ -142,7 +346,7 @@ export const LogDetails = memo(function LogDetails({
                 <Button
                   variant='ghost'
                   className='!p-[4px]'
-                  onClick={() => hasPrev && handleNavigate(onNavigatePrev!)}
+                  onClick={() => hasPrev && onNavigatePrev?.()}
                   disabled={!hasPrev}
                   aria-label='Previous log'
                 >
@@ -151,7 +355,7 @@ export const LogDetails = memo(function LogDetails({
                 <Button
                   variant='ghost'
                   className='!p-[4px]'
-                  onClick={() => hasNext && handleNavigate(onNavigateNext!)}
+                  onClick={() => hasNext && onNavigateNext?.()}
                   disabled={!hasNext}
                   aria-label='Next log'
                 >
@@ -204,7 +408,7 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Execution ID */}
                 {log.executionId && (
-                  <div className='flex flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+                  <div className='flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
                       Execution ID
                     </span>
@@ -215,7 +419,7 @@ export const LogDetails = memo(function LogDetails({
                 )}
 
                 {/* Details Section */}
-                <div className='flex min-w-0 flex-col overflow-hidden'>
+                <div className='-my-[4px] flex min-w-0 flex-col overflow-hidden'>
                   {/* Level */}
                   <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
@@ -267,19 +471,35 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Workflow State */}
                 {isWorkflowExecutionLog && log.executionId && !permissionConfig.hideTraceSpans && (
-                  <div className='flex flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+                  <div className='-mt-[8px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
                       Workflow State
                     </span>
-                    <button
+                    <Button
+                      variant='active'
                       onClick={() => setIsExecutionSnapshotOpen(true)}
-                      className='flex items-center justify-between rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px] transition-colors hover:bg-[var(--surface-4)]'
+                      className='flex w-full items-center justify-between px-[10px] py-[6px]'
                     >
-                      <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
-                        View Snapshot
-                      </span>
-                      <Eye className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
-                    </button>
+                      <span className='font-medium text-[12px]'>View Snapshot</span>
+                      <Eye className='h-[14px] w-[14px]' />
+                    </Button>
+                  </div>
+                )}
+
+                {/* Workflow Output */}
+                {isWorkflowExecutionLog && workflowOutput && !permissionConfig.hideTraceSpans && (
+                  <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
+                    <span
+                      className={cn(
+                        'font-medium text-[12px]',
+                        workflowOutput.error
+                          ? 'text-[var(--text-error)]'
+                          : 'text-[var(--text-tertiary)]'
+                      )}
+                    >
+                      Workflow Output
+                    </span>
+                    <WorkflowOutputSection output={workflowOutput} />
                   </div>
                 )}
 
@@ -287,10 +507,12 @@ export const LogDetails = memo(function LogDetails({
                 {isWorkflowExecutionLog &&
                   log.executionData?.traceSpans &&
                   !permissionConfig.hideTraceSpans && (
-                    <TraceSpans
-                      traceSpans={log.executionData.traceSpans}
-                      totalDuration={log.executionData.totalDuration}
-                    />
+                    <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
+                      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                        Trace Span
+                      </span>
+                      <TraceSpans traceSpans={log.executionData.traceSpans} />
+                    </div>
                   )}
 
                 {/* Files */}

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -94,7 +94,9 @@ export default function Logs() {
   const [previewLogId, setPreviewLogId] = useState<string | null>(null)
 
   const activeLogId = isPreviewOpen ? previewLogId : selectedLogId
-  const activeLogQuery = useLogDetail(activeLogId ?? undefined)
+  const activeLogQuery = useLogDetail(activeLogId ?? undefined, {
+    refetchInterval: isLive ? 3000 : false,
+  })
 
   const logFilters = useMemo(
     () => ({
@@ -113,7 +115,7 @@ export default function Logs() {
 
   const logsQuery = useLogsList(workspaceId, logFilters, {
     enabled: Boolean(workspaceId) && isInitialized.current,
-    refetchInterval: isLive ? 5000 : false,
+    refetchInterval: isLive ? 3000 : false,
   })
 
   const dashboardFilters = useMemo(
@@ -132,7 +134,7 @@ export default function Logs() {
 
   const dashboardStatsQuery = useDashboardStats(workspaceId, dashboardFilters, {
     enabled: Boolean(workspaceId) && isInitialized.current,
-    refetchInterval: isLive ? 5000 : false,
+    refetchInterval: isLive ? 3000 : false,
   })
 
   const logs = useMemo(() => {
@@ -160,12 +162,6 @@ export default function Logs() {
     }
   }, [debouncedSearchQuery, setStoreSearchQuery])
 
-  useEffect(() => {
-    if (!isLive || !selectedLogId) return
-    const interval = setInterval(() => activeLogQuery.refetch(), 5000)
-    return () => clearInterval(interval)
-  }, [isLive, selectedLogId, activeLogQuery])
-
   const handleLogClick = useCallback(
     (log: WorkflowLog) => {
       if (selectedLogId === log.id && isSidebarOpen) {
@@ -279,8 +275,11 @@ export default function Logs() {
       setIsVisuallyRefreshing(true)
       setTimeout(() => setIsVisuallyRefreshing(false), REFRESH_SPINNER_DURATION_MS)
       logsQuery.refetch()
+      if (selectedLogId) {
+        activeLogQuery.refetch()
+      }
     }
-  }, [isLive, logsQuery])
+  }, [isLive, logsQuery, activeLogQuery, selectedLogId])
 
   const prevIsFetchingRef = useRef(logsQuery.isFetching)
   useEffect(() => {

apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx

@@ -213,7 +213,6 @@ function TemplateCardInner({
             isPannable={false}
             defaultZoom={0.8}
             fitPadding={0.2}
-            lightweight
             cursorStyle='pointer'
           />
         ) : (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -128,7 +128,30 @@ export const ActionBar = memo(
           'dark:border-transparent dark:bg-[var(--surface-4)]'
         )}
       >
-        {!isNoteBlock && !isSubflowBlock && (
+        {!isNoteBlock && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (!disabled) {
+                    collaborativeBatchToggleBlockEnabled([blockId])
+                  }
+                }}
+                className={ACTION_BUTTON_STYLES}
+                disabled={disabled}
+              >
+                {isEnabled ? <Circle className={ICON_SIZE} /> : <CircleOff className={ICON_SIZE} />}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
+            </Tooltip.Content>
+          </Tooltip.Root>
+        )}
+
+        {isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
@@ -222,29 +245,6 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
-        {isSubflowBlock && (
-          <Tooltip.Root>
-            <Tooltip.Trigger asChild>
-              <Button
-                variant='ghost'
-                onClick={(e) => {
-                  e.stopPropagation()
-                  if (!disabled) {
-                    collaborativeBatchToggleBlockEnabled([blockId])
-                  }
-                }}
-                className={ACTION_BUTTON_STYLES}
-                disabled={disabled}
-              >
-                {isEnabled ? <Circle className={ICON_SIZE} /> : <CircleOff className={ICON_SIZE} />}
-              </Button>
-            </Tooltip.Trigger>
-            <Tooltip.Content side='top'>
-              {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
-            </Tooltip.Content>
-          </Tooltip.Root>
-        )}
-
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx

@@ -80,6 +80,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
       isAborting,
     } = useCopilotStore()
 
+    const maskCredentialValue = useCopilotStore((s) => s.maskCredentialValue)
+
     const messageCheckpoints = isUser ? allMessageCheckpoints[message.id] || [] : []
     const hasCheckpoints = messageCheckpoints.length > 0 && messageCheckpoints.some((cp) => cp?.id)
 
@@ -210,7 +212,10 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           const isLastTextBlock =
             index === message.contentBlocks!.length - 1 && block.type === 'text'
           const parsed = parseSpecialTags(block.content)
-          const cleanBlockContent = parsed.cleanContent.replace(/\n{3,}/g, '\n\n')
+          // Mask credential IDs in the displayed content
+          const cleanBlockContent = maskCredentialValue(
+            parsed.cleanContent.replace(/\n{3,}/g, '\n\n')
+          )
 
           if (!cleanBlockContent.trim()) return null
 
@@ -238,7 +243,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
           return (
             <div key={blockKey} className='w-full'>
               <ThinkingBlock
-                content={block.content}
+                content={maskCredentialValue(block.content)}
                 isStreaming={isActivelyStreaming}
                 hasFollowingContent={hasFollowingContent}
                 hasSpecialTags={hasSpecialTags}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx

@@ -782,6 +782,7 @@ const SubagentContentRenderer = memo(function SubagentContentRenderer({
   const [isExpanded, setIsExpanded] = useState(true)
   const [duration, setDuration] = useState(0)
   const startTimeRef = useRef<number>(Date.now())
+  const maskCredentialValue = useCopilotStore((s) => s.maskCredentialValue)
   const wasStreamingRef = useRef(false)
 
   // Only show streaming animations for current message
@@ -816,14 +817,16 @@ const SubagentContentRenderer = memo(function SubagentContentRenderer({
       currentText += parsed.cleanContent
     } else if (block.type === 'subagent_tool_call' && block.toolCall) {
       if (currentText.trim()) {
-        segments.push({ type: 'text', content: currentText })
+        // Mask any credential IDs in the accumulated text before displaying
+        segments.push({ type: 'text', content: maskCredentialValue(currentText) })
         currentText = ''
       }
       segments.push({ type: 'tool', block })
     }
   }
   if (currentText.trim()) {
-    segments.push({ type: 'text', content: currentText })
+    // Mask any credential IDs in the accumulated text before displaying
+    segments.push({ type: 'text', content: maskCredentialValue(currentText) })
   }
 
   const allParsed = parseSpecialTags(allRawText)
@@ -952,6 +955,7 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
   toolCall: CopilotToolCall
 }) {
   const blocks = useWorkflowStore((s) => s.blocks)
+  const maskCredentialValue = useCopilotStore((s) => s.maskCredentialValue)
 
   const cachedBlockInfoRef = useRef<Record<string, { name: string; type: string }>>({})
 
@@ -983,6 +987,7 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
     title: string
     value: any
     isPassword?: boolean
+    isCredential?: boolean
   }
 
   interface BlockChange {
@@ -1091,6 +1096,7 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
               title: subBlockConfig.title ?? subBlockConfig.id,
               value,
               isPassword: subBlockConfig.password === true,
+              isCredential: subBlockConfig.type === 'oauth-input',
             })
           }
         }
@@ -1172,8 +1178,15 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
         {subBlocksToShow && subBlocksToShow.length > 0 && (
           <div className='border-[var(--border-1)] border-t px-2.5 py-1.5'>
             {subBlocksToShow.map((sb) => {
-              // Mask password fields like the canvas does
-              const displayValue = sb.isPassword ? '•••' : getDisplayValue(sb.value)
+              // Mask password fields and credential IDs
+              let displayValue: string
+              if (sb.isPassword) {
+                displayValue = '•••'
+              } else {
+                // Get display value first, then mask any credential IDs that might be in it
+                const rawValue = getDisplayValue(sb.value)
+                displayValue = maskCredentialValue(rawValue)
+              }
               return (
                 <div key={sb.id} className='flex items-start gap-1.5 py-0.5 text-[11px]'>
                   <span
@@ -1412,10 +1425,10 @@ function RunSkipButtons({
     setIsProcessing(true)
     setButtonsHidden(true)
     try {
-      // Add to auto-allowed list first
       await addAutoAllowedTool(toolCall.name)
-      // Then execute
-      await handleRun(toolCall, setToolCallState, onStateChange, editedParams)
+      if (!isIntegrationTool(toolCall.name)) {
+        await handleRun(toolCall, setToolCallState, onStateChange, editedParams)
+      }
     } finally {
       setIsProcessing(false)
       actionInProgressRef.current = false
@@ -1438,10 +1451,10 @@ function RunSkipButtons({
 
   if (buttonsHidden) return null
 
-  // Hide "Always Allow" for integration tools (only show for client tools with interrupts)
-  const showAlwaysAllow = !isIntegrationTool(toolCall.name)
+  // Show "Always Allow" for all tools that require confirmation
+  const showAlwaysAllow = true
 
-  // Standardized buttons for all interrupt tools: Allow, (Always Allow for client tools only), Skip
+  // Standardized buttons for all interrupt tools: Allow, Always Allow, Skip
   return (
     <div className='mt-[10px] flex gap-[6px]'>
       <Button onClick={onRun} disabled={isProcessing} variant='tertiary'>
@@ -1510,7 +1523,11 @@ export function ToolCall({
     toolCall.name === 'user_memory' ||
     toolCall.name === 'edit_respond' ||
     toolCall.name === 'debug_respond' ||
-    toolCall.name === 'plan_respond'
+    toolCall.name === 'plan_respond' ||
+    toolCall.name === 'research_respond' ||
+    toolCall.name === 'info_respond' ||
+    toolCall.name === 'deploy_respond' ||
+    toolCall.name === 'superagent_respond'
   )
     return null
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts

@@ -209,9 +209,20 @@ export interface SlashCommand {
 export const TOP_LEVEL_COMMANDS: readonly SlashCommand[] = [
   { id: 'fast', label: 'Fast' },
   { id: 'research', label: 'Research' },
-  { id: 'superagent', label: 'Actions' },
+  { id: 'actions', label: 'Actions' },
 ] as const
 
+/**
+ * Maps UI command IDs to API command IDs.
+ * Some commands have different IDs for display vs API (e.g., "actions" -> "superagent")
+ */
+export function getApiCommandId(uiCommandId: string): string {
+  const commandMapping: Record<string, string> = {
+    actions: 'superagent',
+  }
+  return commandMapping[uiCommandId] || uiCommandId
+}
+
 export const WEB_COMMANDS: readonly SlashCommand[] = [
   { id: 'search', label: 'Search' },
   { id: 'read', label: 'Read' },

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/hooks/use-copilot-initialization.ts

@@ -105,10 +105,10 @@ export function useCopilotInitialization(props: UseCopilotInitializationProps) {
     isSendingMessage,
   ])
 
-  /** Load auto-allowed tools once on mount */
+  /** Load auto-allowed tools once on mount - runs immediately, independent of workflow */
   const hasLoadedAutoAllowedToolsRef = useRef(false)
   useEffect(() => {
-    if (hasMountedRef.current && !hasLoadedAutoAllowedToolsRef.current) {
+    if (!hasLoadedAutoAllowedToolsRef.current) {
       hasLoadedAutoAllowedToolsRef.current = true
       loadAutoAllowedTools().catch((err) => {
         logger.warn('[Copilot] Failed to load auto-allowed tools', err)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx

@@ -18,8 +18,8 @@ import {
 import { Skeleton } from '@/components/ui'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 import {
-  BlockDetailsSidebar,
   getLeftmostBlockId,
+  PreviewEditor,
   WorkflowPreview,
 } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
@@ -337,7 +337,7 @@ export function GeneralDeploy({
                   />
                 </div>
                 {expandedSelectedBlockId && workflowToShow.blocks?.[expandedSelectedBlockId] && (
-                  <BlockDetailsSidebar
+                  <PreviewEditor
                     block={workflowToShow.blocks[expandedSelectedBlockId]}
                     workflowVariables={workflowToShow.variables}
                     loops={workflowToShow.loops}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx

@@ -446,7 +446,6 @@ const OGCaptureContainer = forwardRef<HTMLDivElement>((_, ref) => {
         isPannable={false}
         defaultZoom={0.8}
         fitPadding={0.2}
-        lightweight
       />
     </div>
   )

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx

@@ -95,6 +95,7 @@ export function DeployModal({
   const [activeTab, setActiveTab] = useState<TabView>('general')
   const [chatSubmitting, setChatSubmitting] = useState(false)
   const [apiDeployError, setApiDeployError] = useState<string | null>(null)
+  const [apiDeployWarnings, setApiDeployWarnings] = useState<string[]>([])
   const [isChatFormValid, setIsChatFormValid] = useState(false)
   const [selectedStreamingOutputs, setSelectedStreamingOutputs] = useState<string[]>([])
 
@@ -227,6 +228,7 @@ export function DeployModal({
     if (open && workflowId) {
       setActiveTab('general')
       setApiDeployError(null)
+      setApiDeployWarnings([])
     }
   }, [open, workflowId])
 
@@ -282,9 +284,13 @@ export function DeployModal({
     if (!workflowId) return
 
     setApiDeployError(null)
+    setApiDeployWarnings([])
 
     try {
-      await deployMutation.mutateAsync({ workflowId, deployChatEnabled: false })
+      const result = await deployMutation.mutateAsync({ workflowId, deployChatEnabled: false })
+      if (result.warnings && result.warnings.length > 0) {
+        setApiDeployWarnings(result.warnings)
+      }
       await refetchDeployedState()
     } catch (error: unknown) {
       logger.error('Error deploying workflow:', { error })
@@ -297,8 +303,13 @@ export function DeployModal({
     async (version: number) => {
       if (!workflowId) return
 
+      setApiDeployWarnings([])
+
       try {
-        await activateVersionMutation.mutateAsync({ workflowId, version })
+        const result = await activateVersionMutation.mutateAsync({ workflowId, version })
+        if (result.warnings && result.warnings.length > 0) {
+          setApiDeployWarnings(result.warnings)
+        }
         await refetchDeployedState()
       } catch (error) {
         logger.error('Error promoting version:', { error })
@@ -324,9 +335,13 @@ export function DeployModal({
     if (!workflowId) return
 
     setApiDeployError(null)
+    setApiDeployWarnings([])
 
     try {
-      await deployMutation.mutateAsync({ workflowId, deployChatEnabled: false })
+      const result = await deployMutation.mutateAsync({ workflowId, deployChatEnabled: false })
+      if (result.warnings && result.warnings.length > 0) {
+        setApiDeployWarnings(result.warnings)
+      }
       await refetchDeployedState()
     } catch (error: unknown) {
       logger.error('Error redeploying workflow:', { error })
@@ -338,6 +353,7 @@ export function DeployModal({
   const handleCloseModal = useCallback(() => {
     setChatSubmitting(false)
     setApiDeployError(null)
+    setApiDeployWarnings([])
     onOpenChange(false)
   }, [onOpenChange])
 
@@ -479,6 +495,14 @@ export function DeployModal({
                   <div>{apiDeployError}</div>
                 </div>
               )}
+              {apiDeployWarnings.length > 0 && (
+                <div className='mb-3 rounded-[4px] border border-amber-500/30 bg-amber-500/10 p-3 text-amber-700 dark:text-amber-400 text-sm'>
+                  <div className='font-semibold'>Deployment Warning</div>
+                  {apiDeployWarnings.map((warning, index) => (
+                    <div key={index}>{warning}</div>
+                  ))}
+                </div>
+              )}
               <ModalTabsContent value='general'>
                 <GeneralDeploy
                   workflowId={workflowId}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx

@@ -38,6 +38,7 @@ import type { GenerationType } from '@/blocks/types'
 import { normalizeName } from '@/executor/constants'
 import { createEnvVarPattern, createReferencePattern } from '@/executor/utils/reference-validation'
 import { useTagSelection } from '@/hooks/kb/use-tag-selection'
+import { createShouldHighlightEnvVar, useAvailableEnvVarKeys } from '@/hooks/use-available-env-vars'
 
 const logger = createLogger('Code')
 
@@ -88,21 +89,27 @@ interface CodePlaceholder {
 /**
  * Creates a syntax highlighter function with custom reference and environment variable highlighting.
  * @param effectiveLanguage - The language to use for syntax highlighting
- * @param shouldHighlightReference - Function to determine if a reference should be highlighted
+ * @param shouldHighlightReference - Function to determine if a block reference should be highlighted
+ * @param shouldHighlightEnvVar - Function to determine if an env var should be highlighted
  * @returns A function that highlights code with syntax and custom highlights
  */
 const createHighlightFunction = (
   effectiveLanguage: 'javascript' | 'python' | 'json',
-  shouldHighlightReference: (part: string) => boolean
+  shouldHighlightReference: (part: string) => boolean,
+  shouldHighlightEnvVar: (varName: string) => boolean
 ) => {
   return (codeToHighlight: string): string => {
     const placeholders: CodePlaceholder[] = []
     let processedCode = codeToHighlight
 
     processedCode = processedCode.replace(createEnvVarPattern(), (match) => {
-      const placeholder = `__ENV_VAR_${placeholders.length}__`
-      placeholders.push({ placeholder, original: match, type: 'env' })
-      return placeholder
+      const varName = match.slice(2, -2).trim()
+      if (shouldHighlightEnvVar(varName)) {
+        const placeholder = `__ENV_VAR_${placeholders.length}__`
+        placeholders.push({ placeholder, original: match, type: 'env' })
+        return placeholder
+      }
+      return match
     })
 
     processedCode = processedCode.replace(createReferencePattern(), (match) => {
@@ -212,6 +219,7 @@ export const Code = memo(function Code({
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
   const emitTagSelection = useTagSelection(blockId, subBlockId)
   const [languageValue] = useSubBlockValue<string>(blockId, 'language')
+  const availableEnvVars = useAvailableEnvVarKeys(workspaceId)
 
   const effectiveLanguage = (languageValue as 'javascript' | 'python' | 'json') || language
 
@@ -603,9 +611,15 @@ export const Code = memo(function Code({
     [generateCodeStream, isPromptVisible, isAiStreaming]
   )
 
+  const shouldHighlightEnvVar = useMemo(
+    () => createShouldHighlightEnvVar(availableEnvVars),
+    [availableEnvVars]
+  )
+
   const highlightCode = useMemo(
-    () => createHighlightFunction(effectiveLanguage, shouldHighlightReference),
-    [effectiveLanguage, shouldHighlightReference]
+    () =>
+      createHighlightFunction(effectiveLanguage, shouldHighlightReference, shouldHighlightEnvVar),
+    [effectiveLanguage, shouldHighlightReference, shouldHighlightEnvVar]
   )
 
   const handleValueChange = useCallback(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { ChevronDown, ChevronsUpDown, ChevronUp, Plus } from 'lucide-react'
 import { useParams } from 'next/navigation'
@@ -35,6 +35,7 @@ import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/
 import { normalizeName } from '@/executor/constants'
 import { createEnvVarPattern, createReferencePattern } from '@/executor/utils/reference-validation'
 import { useTagSelection } from '@/hooks/kb/use-tag-selection'
+import { createShouldHighlightEnvVar, useAvailableEnvVarKeys } from '@/hooks/use-available-env-vars'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('ConditionInput')
@@ -123,6 +124,11 @@ export function ConditionInput({
 
   const emitTagSelection = useTagSelection(blockId, subBlockId)
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
+  const availableEnvVars = useAvailableEnvVarKeys(workspaceId)
+  const shouldHighlightEnvVar = useMemo(
+    () => createShouldHighlightEnvVar(availableEnvVars),
+    [availableEnvVars]
+  )
 
   const containerRef = useRef<HTMLDivElement>(null)
   const inputRefs = useRef<Map<string, HTMLTextAreaElement>>(new Map())
@@ -1136,14 +1142,18 @@ export function ConditionInput({
                           let processedCode = codeToHighlight
 
                           processedCode = processedCode.replace(createEnvVarPattern(), (match) => {
-                            const placeholder = `__ENV_VAR_${placeholders.length}__`
-                            placeholders.push({
-                              placeholder,
-                              original: match,
-                              type: 'env',
-                              shouldHighlight: true,
-                            })
-                            return placeholder
+                            const varName = match.slice(2, -2).trim()
+                            if (shouldHighlightEnvVar(varName)) {
+                              const placeholder = `__ENV_VAR_${placeholders.length}__`
+                              placeholders.push({
+                                placeholder,
+                                original: match,
+                                type: 'env',
+                                shouldHighlight: true,
+                              })
+                              return placeholder
+                            }
+                            return match
                           })
 
                           processedCode = processedCode.replace(

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text.tsx

@@ -7,6 +7,7 @@ import { createCombinedPattern } from '@/executor/utils/reference-validation'
 
 export interface HighlightContext {
   accessiblePrefixes?: Set<string>
+  availableEnvVars?: Set<string>
   highlightAll?: boolean
 }
 
@@ -43,9 +44,17 @@ export function formatDisplayText(text: string, context?: HighlightContext): Rea
     return false
   }
 
+  const shouldHighlightEnvVar = (varName: string): boolean => {
+    if (context?.highlightAll) {
+      return true
+    }
+    if (context?.availableEnvVars === undefined) {
+      return true
+    }
+    return context.availableEnvVars.has(varName)
+  }
+
   const nodes: ReactNode[] = []
-  // Match variable references without allowing nested brackets to prevent matching across references
-  // e.g., "<3. text <real.ref>" should match "<3" and "<real.ref>", not the whole string
   const regex = createCombinedPattern()
   let lastIndex = 0
   let key = 0
@@ -65,11 +74,16 @@ export function formatDisplayText(text: string, context?: HighlightContext): Rea
     }
 
     if (matchText.startsWith(REFERENCE.ENV_VAR_START)) {
-      nodes.push(
-        <span key={key++} className='text-[var(--brand-secondary)]'>
-          {matchText}
-        </span>
-      )
+      const varName = matchText.slice(2, -2).trim()
+      if (shouldHighlightEnvVar(varName)) {
+        nodes.push(
+          <span key={key++} className='text-[var(--brand-secondary)]'>
+            {matchText}
+          </span>
+        )
+      } else {
+        nodes.push(<span key={key++}>{matchText}</span>)
+      }
     } else {
       const split = splitReferenceSegment(matchText)
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts

@@ -34,3 +34,4 @@ export { Text } from './text/text'
 export { TimeInput } from './time-input/time-input'
 export { ToolInput } from './tool-input/tool-input'
 export { VariablesInput } from './variables-input/variables-input'
+export { WorkflowSelectorInput } from './workflow-selector/workflow-selector-input'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx

@@ -2,12 +2,13 @@ import { useMemo, useRef, useState } from 'react'
 import { Badge, Input } from '@/components/emcn'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
+import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
 import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
-import { useWorkflowInputFields } from '@/hooks/queries/workflows'
+import { useWorkflowState } from '@/hooks/queries/workflows'
 
 /**
  * Props for the InputMappingField component
@@ -70,7 +71,11 @@ export function InputMapping({
   const overlayRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
   const workflowId = typeof selectedWorkflowId === 'string' ? selectedWorkflowId : undefined
-  const { data: childInputFields = [], isLoading } = useWorkflowInputFields(workflowId)
+  const { data: workflowState, isLoading } = useWorkflowState(workflowId)
+  const childInputFields = useMemo(
+    () => (workflowState?.blocks ? extractInputFieldsFromBlocks(workflowState.blocks) : []),
+    [workflowState?.blocks]
+  )
   const [collapsedFields, setCollapsedFields] = useState<Record<string, boolean>>({})
 
   const valueObj: Record<string, string> = useMemo(() => {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx

@@ -1312,15 +1312,16 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
     if (currentLoop && isLoopBlock) {
       containingLoopBlockId = blockId
       const loopType = currentLoop.loopType || 'for'
-      const contextualTags: string[] = ['index']
-      if (loopType === 'forEach') {
-        contextualTags.push('currentItem')
-        contextualTags.push('items')
-      }
 
       const loopBlock = blocks[blockId]
       if (loopBlock) {
         const loopBlockName = loopBlock.name || loopBlock.type
+        const normalizedLoopName = normalizeName(loopBlockName)
+        const contextualTags: string[] = [`${normalizedLoopName}.index`]
+        if (loopType === 'forEach') {
+          contextualTags.push(`${normalizedLoopName}.currentItem`)
+          contextualTags.push(`${normalizedLoopName}.items`)
+        }
 
         loopBlockGroup = {
           blockName: loopBlockName,
@@ -1328,21 +1329,23 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           blockType: 'loop',
           tags: contextualTags,
           distance: 0,
+          isContextual: true,
         }
       }
     } else if (containingLoop) {
       const [loopId, loop] = containingLoop
       containingLoopBlockId = loopId
       const loopType = loop.loopType || 'for'
-      const contextualTags: string[] = ['index']
-      if (loopType === 'forEach') {
-        contextualTags.push('currentItem')
-        contextualTags.push('items')
-      }
 
       const containingLoopBlock = blocks[loopId]
       if (containingLoopBlock) {
         const loopBlockName = containingLoopBlock.name || containingLoopBlock.type
+        const normalizedLoopName = normalizeName(loopBlockName)
+        const contextualTags: string[] = [`${normalizedLoopName}.index`]
+        if (loopType === 'forEach') {
+          contextualTags.push(`${normalizedLoopName}.currentItem`)
+          contextualTags.push(`${normalizedLoopName}.items`)
+        }
 
         loopBlockGroup = {
           blockName: loopBlockName,
@@ -1350,6 +1353,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           blockType: 'loop',
           tags: contextualTags,
           distance: 0,
+          isContextual: true,
         }
       }
     }
@@ -1363,15 +1367,16 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
       const [parallelId, parallel] = containingParallel
       containingParallelBlockId = parallelId
       const parallelType = parallel.parallelType || 'count'
-      const contextualTags: string[] = ['index']
-      if (parallelType === 'collection') {
-        contextualTags.push('currentItem')
-        contextualTags.push('items')
-      }
 
       const containingParallelBlock = blocks[parallelId]
       if (containingParallelBlock) {
         const parallelBlockName = containingParallelBlock.name || containingParallelBlock.type
+        const normalizedParallelName = normalizeName(parallelBlockName)
+        const contextualTags: string[] = [`${normalizedParallelName}.index`]
+        if (parallelType === 'collection') {
+          contextualTags.push(`${normalizedParallelName}.currentItem`)
+          contextualTags.push(`${normalizedParallelName}.items`)
+        }
 
         parallelBlockGroup = {
           blockName: parallelBlockName,
@@ -1379,6 +1384,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           blockType: 'parallel',
           tags: contextualTags,
           distance: 0,
+          isContextual: true,
         }
       }
     }
@@ -1645,38 +1651,29 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
   const nestedBlockTagGroups: NestedBlockTagGroup[] = useMemo(() => {
     return filteredBlockTagGroups.map((group: BlockTagGroup) => {
       const normalizedBlockName = normalizeName(group.blockName)
-
-      // Handle loop/parallel contextual tags (index, currentItem, items)
       const directTags: NestedTag[] = []
       const tagsForTree: string[] = []
 
       group.tags.forEach((tag: string) => {
         const tagParts = tag.split('.')
 
-        // Loop/parallel contextual tags without block prefix
-        if (
-          (group.blockType === 'loop' || group.blockType === 'parallel') &&
-          tagParts.length === 1
-        ) {
+        if (tagParts.length === 1) {
           directTags.push({
             key: tag,
             display: tag,
             fullTag: tag,
           })
         } else if (tagParts.length === 2) {
-          // Direct property like blockname.property
           directTags.push({
             key: tagParts[1],
             display: tagParts[1],
             fullTag: tag,
           })
         } else {
-          // Nested property - add to tree builder
           tagsForTree.push(tag)
         }
       })
 
-      // Build recursive tree from nested tags
       const nestedTags = [...directTags, ...buildNestedTagTree(tagsForTree, normalizedBlockName)]
 
       return {
@@ -1800,13 +1797,19 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           processedTag = tag
         }
       } else if (
-        blockGroup &&
+        blockGroup?.isContextual &&
         (blockGroup.blockType === 'loop' || blockGroup.blockType === 'parallel')
       ) {
-        if (!tag.includes('.') && ['index', 'currentItem', 'items'].includes(tag)) {
-          processedTag = `${blockGroup.blockType}.${tag}`
+        const tagParts = tag.split('.')
+        if (tagParts.length === 1) {
+          processedTag = blockGroup.blockType
         } else {
-          processedTag = tag
+          const lastPart = tagParts[tagParts.length - 1]
+          if (['index', 'currentItem', 'items'].includes(lastPart)) {
+            processedTag = `${blockGroup.blockType}.${lastPart}`
+          } else {
+            processedTag = tag
+          }
         }
       }
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/types.ts

@@ -7,6 +7,8 @@ export interface BlockTagGroup {
   blockType: string
   tags: string[]
   distance: number
+  /** True if this is a contextual group (loop/parallel iteration context available inside the subflow) */
+  isContextual?: boolean
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx

@@ -19,6 +19,9 @@ interface TextProps {
  * - Automatically detects and renders HTML content safely
  * - Applies prose styling for HTML content (links, code, lists, etc.)
  * - Falls back to plain text rendering for non-HTML content
+ *
+ * Note: This component renders trusted, internally-defined content only
+ * (e.g., trigger setup instructions). It is NOT used for user-generated content.
  */
 export function Text({ blockId, subBlockId, content, className }: TextProps) {
   const containsHtml = /<[^>]+>/.test(content)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx

@@ -29,6 +29,7 @@ import {
   type OAuthProvider,
   type OAuthService,
 } from '@/lib/oauth'
+import { extractInputFieldsFromBlocks } from '@/lib/workflows/input-format'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import {
   CheckboxList,
@@ -65,7 +66,7 @@ import { useForceRefreshMcpTools, useMcpServers, useStoredMcpTools } from '@/hoo
 import {
   useChildDeploymentStatus,
   useDeployChildWorkflow,
-  useWorkflowInputFields,
+  useWorkflowState,
   useWorkflows,
 } from '@/hooks/queries/workflows'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
@@ -771,7 +772,11 @@ function WorkflowInputMapperSyncWrapper({
   disabled: boolean
   workflowId: string
 }) {
-  const { data: inputFields = [], isLoading } = useWorkflowInputFields(workflowId)
+  const { data: workflowState, isLoading } = useWorkflowState(workflowId)
+  const inputFields = useMemo(
+    () => (workflowState?.blocks ? extractInputFieldsFromBlocks(workflowState.blocks) : []),
+    [workflowState?.blocks]
+  )
 
   const parsedValue = useMemo(() => {
     try {

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/workflow-selector/workflow-selector-input.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useMemo } from 'react'
+import { SelectorCombobox } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox'
+import type { SubBlockConfig } from '@/blocks/types'
+import type { SelectorContext } from '@/hooks/selectors/types'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+
+interface WorkflowSelectorInputProps {
+  blockId: string
+  subBlock: SubBlockConfig
+  disabled?: boolean
+  isPreview?: boolean
+  previewValue?: string | null
+}
+
+export function WorkflowSelectorInput({
+  blockId,
+  subBlock,
+  disabled = false,
+  isPreview = false,
+  previewValue,
+}: WorkflowSelectorInputProps) {
+  const activeWorkflowId = useWorkflowRegistry((s) => s.activeWorkflowId)
+
+  const context: SelectorContext = useMemo(
+    () => ({
+      excludeWorkflowId: activeWorkflowId ?? undefined,
+    }),
+    [activeWorkflowId]
+  )
+
+  return (
+    <SelectorCombobox
+      blockId={blockId}
+      subBlock={subBlock}
+      selectorKey='sim.workflows'
+      selectorContext={context}
+      disabled={disabled}
+      isPreview={isPreview}
+      previewValue={previewValue}
+      placeholder={subBlock.placeholder || 'Select workflow...'}
+    />
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx

@@ -40,6 +40,7 @@ import {
   TimeInput,
   ToolInput,
   VariablesInput,
+  WorkflowSelectorInput,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components'
 import { useDependsOnGate } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-depends-on-gate'
 import type { SubBlockConfig } from '@/blocks/types'
@@ -90,7 +91,6 @@ const isFieldRequired = (config: SubBlockConfig, subBlockValues?: Record<string,
   if (!config.required) return false
   if (typeof config.required === 'boolean') return config.required
 
-  // Helper function to evaluate a condition
   const evalCond = (
     cond: {
       field: string
@@ -132,7 +132,6 @@ const isFieldRequired = (config: SubBlockConfig, subBlockValues?: Record<string,
     return match
   }
 
-  // If required is a condition object or function, evaluate it
   const condition = typeof config.required === 'function' ? config.required() : config.required
   return evalCond(condition, subBlockValues || {})
 }
@@ -378,7 +377,6 @@ function SubBlockComponent({
     setIsValidJson(isValid)
   }
 
-  // Check if wand is enabled for this sub-block
   const isWandEnabled = config.wandConfig?.enabled ?? false
 
   /**
@@ -438,8 +436,6 @@ function SubBlockComponent({
     | null
     | undefined
 
-  // Use dependsOn gating to compute final disabled state
-  // Only pass previewContextValues when in preview mode to avoid format mismatches
   const { finalDisabled: gatedDisabled } = useDependsOnGate(blockId, config, {
     disabled,
     isPreview,
@@ -869,6 +865,17 @@ function SubBlockComponent({
           />
         )
 
+      case 'workflow-selector':
+        return (
+          <WorkflowSelectorInput
+            blockId={blockId}
+            subBlock={config}
+            disabled={isDisabled}
+            isPreview={isPreview}
+            previewValue={previewValue as string | null}
+          />
+        )
+
       case 'mcp-server-selector':
         return (
           <McpServerSelector

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx

@@ -68,7 +68,7 @@ export function SubflowEditor({
     <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
       {/* Subflow Editor Section */}
       <div ref={subBlocksRef} className='subblocks-section flex flex-1 flex-col overflow-hidden'>
-        <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[5px] pb-[8px]'>
+        <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[9px] pb-[8px]'>
           {/* Type Selection */}
           <div>
             <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx

@@ -2,7 +2,16 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { isEqual } from 'lodash'
-import { BookOpen, Check, ChevronDown, ChevronUp, Pencil } from 'lucide-react'
+import {
+  BookOpen,
+  Check,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Loader2,
+  Pencil,
+} from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { useShallow } from 'zustand/react/shallow'
 import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { Button, Tooltip } from '@/components/emcn'
@@ -29,8 +38,10 @@ import { LoopTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/component
 import { ParallelTool } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/parallel/parallel-config'
 import { getSubBlockStableKey } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
 import { useCurrentWorkflow } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import type { SubBlockType } from '@/blocks/types'
+import { useWorkflowState } from '@/hooks/queries/workflows'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { usePanelEditorStore } from '@/stores/panel'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -85,6 +96,14 @@ export function Editor() {
   // Get subflow display properties from configs
   const subflowConfig = isSubflow ? (currentBlock.type === 'loop' ? LoopTool : ParallelTool) : null
 
+  // Check if selected block is a workflow block
+  const isWorkflowBlock =
+    currentBlock && (currentBlock.type === 'workflow' || currentBlock.type === 'workflow_input')
+
+  // Get workspace ID from params
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+
   // Refs for resize functionality
   const subBlocksRef = useRef<HTMLDivElement>(null)
 
@@ -254,11 +273,11 @@ export function Editor() {
 
   // Trigger rename mode when signaled from context menu
   useEffect(() => {
-    if (shouldFocusRename && currentBlock && !isSubflow) {
+    if (shouldFocusRename && currentBlock) {
       handleStartRename()
       setShouldFocusRename(false)
     }
-  }, [shouldFocusRename, currentBlock, isSubflow, handleStartRename, setShouldFocusRename])
+  }, [shouldFocusRename, currentBlock, handleStartRename, setShouldFocusRename])
 
   /**
    * Handles opening documentation link in a new secure tab.
@@ -270,6 +289,22 @@ export function Editor() {
     }
   }
 
+  // Get child workflow ID for workflow blocks
+  const childWorkflowId = isWorkflowBlock ? blockSubBlockValues?.workflowId : null
+
+  // Fetch child workflow state for preview (only for workflow blocks with a selected workflow)
+  const { data: childWorkflowState, isLoading: isLoadingChildWorkflow } =
+    useWorkflowState(childWorkflowId)
+
+  /**
+   * Handles opening the child workflow in a new tab.
+   */
+  const handleOpenChildWorkflow = useCallback(() => {
+    if (childWorkflowId && workspaceId) {
+      window.open(`/workspace/${workspaceId}/w/${childWorkflowId}`, '_blank', 'noopener,noreferrer')
+    }
+  }, [childWorkflowId, workspaceId])
+
   // Determine if connections are at minimum height (collapsed state)
   const isConnectionsAtMinHeight = connectionsHeight <= 35
 
@@ -322,7 +357,7 @@ export function Editor() {
         </div>
         <div className='flex shrink-0 items-center gap-[8px]'>
           {/* Rename button */}
-          {currentBlock && !isSubflow && (
+          {currentBlock && (
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button
@@ -408,7 +443,66 @@ export function Editor() {
             className='subblocks-section flex flex-1 flex-col overflow-hidden'
           >
             <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[12px] pb-[8px] [overflow-anchor:none]'>
-              {subBlocks.length === 0 ? (
+              {/* Workflow Preview - only for workflow blocks with a selected child workflow */}
+              {isWorkflowBlock && childWorkflowId && (
+                <>
+                  <div className='subblock-content flex flex-col gap-[9.5px]'>
+                    <div className='pl-[2px] font-medium text-[13px] text-[var(--text-primary)] leading-none'>
+                      Workflow Preview
+                    </div>
+                    <div className='relative h-[160px] overflow-hidden rounded-[4px] border border-[var(--border)]'>
+                      {isLoadingChildWorkflow ? (
+                        <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
+                          <Loader2 className='h-5 w-5 animate-spin text-[var(--text-tertiary)]' />
+                        </div>
+                      ) : childWorkflowState ? (
+                        <>
+                          <div className='[&_*:active]:!cursor-grabbing [&_*]:!cursor-grab [&_.react-flow__handle]:!hidden h-full w-full'>
+                            <WorkflowPreview
+                              workflowState={childWorkflowState}
+                              height={160}
+                              width='100%'
+                              isPannable={true}
+                              defaultZoom={0.6}
+                              fitPadding={0.15}
+                              cursorStyle='grab'
+                            />
+                          </div>
+                          <Tooltip.Root>
+                            <Tooltip.Trigger asChild>
+                              <Button
+                                type='button'
+                                variant='ghost'
+                                onClick={handleOpenChildWorkflow}
+                                className='absolute right-[6px] bottom-[6px] z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover:bg-[var(--surface-4)]'
+                              >
+                                <ExternalLink className='h-[12px] w-[12px]' />
+                              </Button>
+                            </Tooltip.Trigger>
+                            <Tooltip.Content side='top'>Open workflow</Tooltip.Content>
+                          </Tooltip.Root>
+                        </>
+                      ) : (
+                        <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
+                          <span className='text-[13px] text-[var(--text-tertiary)]'>
+                            Unable to load preview
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                    <div
+                      className='h-[1.25px]'
+                      style={{
+                        backgroundImage:
+                          'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
+                      }}
+                    />
+                  </div>
+                </>
+              )}
+              {subBlocks.length === 0 && !isWorkflowBlock ? (
                 <div className='flex h-full items-center justify-center text-center text-[#8D8D8D] text-[13px]'>
                   This block has no subblocks
                 </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-subflow-editor.ts

@@ -1,4 +1,5 @@
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { useParams } from 'next/navigation'
 import { highlight, languages } from '@/components/emcn'
 import {
   isLikelyReferenceSegment,
@@ -9,6 +10,7 @@ import { checkTagTrigger } from '@/app/workspace/[workspaceId]/w/[workflowId]/co
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import { normalizeName, REFERENCE } from '@/executor/constants'
 import { createEnvVarPattern, createReferencePattern } from '@/executor/utils/reference-validation'
+import { createShouldHighlightEnvVar, useAvailableEnvVarKeys } from '@/hooks/use-available-env-vars'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { BlockState } from '@/stores/workflows/workflow/types'
@@ -53,6 +55,9 @@ const SUBFLOW_CONFIG = {
  * @returns Subflow editor state and handlers
  */
 export function useSubflowEditor(currentBlock: BlockState | null, currentBlockId: string | null) {
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+
   const textareaRef = useRef<HTMLTextAreaElement | null>(null)
   const editorContainerRef = useRef<HTMLDivElement>(null)
 
@@ -81,6 +86,13 @@ export function useSubflowEditor(currentBlock: BlockState | null, currentBlockId
   // Get accessible prefixes for tag dropdown
   const accessiblePrefixes = useAccessibleReferencePrefixes(currentBlockId || '')
 
+  // Get available env vars for highlighting validation
+  const availableEnvVars = useAvailableEnvVarKeys(workspaceId)
+  const shouldHighlightEnvVar = useMemo(
+    () => createShouldHighlightEnvVar(availableEnvVars),
+    [availableEnvVars]
+  )
+
   // Collaborative actions
   const {
     collaborativeUpdateLoopType,
@@ -140,9 +152,13 @@ export function useSubflowEditor(currentBlock: BlockState | null, currentBlockId
       let processedCode = code
 
       processedCode = processedCode.replace(createEnvVarPattern(), (match) => {
-        const placeholder = `__ENV_VAR_${placeholders.length}__`
-        placeholders.push({ placeholder, original: match, type: 'env' })
-        return placeholder
+        const varName = match.slice(2, -2).trim()
+        if (shouldHighlightEnvVar(varName)) {
+          const placeholder = `__ENV_VAR_${placeholders.length}__`
+          placeholders.push({ placeholder, original: match, type: 'env' })
+          return placeholder
+        }
+        return match
       })
 
       // Use [^<>]+ to prevent matching across nested brackets (e.g., "<3 <real.ref>" should match separately)
@@ -174,7 +190,7 @@ export function useSubflowEditor(currentBlock: BlockState | null, currentBlockId
 
       return highlightedCode
     },
-    [shouldHighlightReference]
+    [shouldHighlightReference, shouldHighlightEnvVar]
   )
 
   /**

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -7,7 +7,7 @@ import { useStoreWithEqualityFn } from 'zustand/traditional'
 import { Badge, Tooltip } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import { createMcpToolId } from '@/lib/mcp/utils'
+import { createMcpToolId } from '@/lib/mcp/shared'
 import { getProviderIdFromServiceId } from '@/lib/oauth'
 import { BLOCK_DIMENSIONS, HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import {

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/block.tsx

@@ -21,11 +21,9 @@ interface WorkflowPreviewBlockData {
 }
 
 /**
- * Lightweight block component for workflow previews.
- * Renders block header, dummy subblocks skeleton, and handles.
- * Respects horizontalHandles and enabled state from workflow.
- * No heavy hooks, store subscriptions, or interactive features.
- * Used in template cards and other preview contexts for performance.
+ * Preview block component for workflow visualization.
+ * Renders block header, subblocks skeleton, and handles without
+ * hooks, store subscriptions, or interactive features.
  */
 function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>) {
   const {

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor.tsx

@@ -13,6 +13,7 @@ import {
 import { ReactFlowProvider } from 'reactflow'
 import { Badge, Button, ChevronDown, Code, Combobox, Input, Label } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
+import { formatDuration } from '@/lib/core/utils/formatting'
 import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
 import {
   buildCanonicalIndex,
@@ -685,7 +686,7 @@ interface WorkflowVariable {
   value: unknown
 }
 
-interface BlockDetailsSidebarProps {
+interface PreviewEditorProps {
   block: BlockState
   executionData?: ExecutionData
   /** All block execution data for resolving variable references */
@@ -704,14 +705,6 @@ interface BlockDetailsSidebarProps {
   onClose?: () => void
 }
 
-/**
- * Format duration for display
- */
-function formatDuration(ms: number): string {
-  if (ms < 1000) return `${ms}ms`
-  return `${(ms / 1000).toFixed(2)}s`
-}
-
 /** Minimum height for the connections section (header only) */
 const MIN_CONNECTIONS_HEIGHT = 30
 /** Maximum height for the connections section */
@@ -722,7 +715,7 @@ const DEFAULT_CONNECTIONS_HEIGHT = 150
 /**
  * Readonly sidebar panel showing block configuration using SubBlock components.
  */
-function BlockDetailsSidebarContent({
+function PreviewEditorContent({
   block,
   executionData,
   allBlockExecutions,
@@ -732,7 +725,7 @@ function BlockDetailsSidebarContent({
   parallels,
   isExecutionMode = false,
   onClose,
-}: BlockDetailsSidebarProps) {
+}: PreviewEditorProps) {
   // Convert Record<string, Variable> to Array<Variable> for iteration
   const normalizedWorkflowVariables = useMemo(() => {
     if (!workflowVariables) return []
@@ -998,6 +991,22 @@ function BlockDetailsSidebarContent({
     })
   }, [extractedRefs.envVars])
 
+  const rawValues = useMemo(() => {
+    return Object.entries(subBlockValues).reduce<Record<string, unknown>>((acc, [key, entry]) => {
+      if (entry && typeof entry === 'object' && 'value' in entry) {
+        acc[key] = (entry as { value: unknown }).value
+      } else {
+        acc[key] = entry
+      }
+      return acc
+    }, {})
+  }, [subBlockValues])
+
+  const canonicalIndex = useMemo(
+    () => buildCanonicalIndex(blockConfig?.subBlocks || []),
+    [blockConfig?.subBlocks]
+  )
+
   // Check if this is a subflow block (loop or parallel)
   const isSubflow = block.type === 'loop' || block.type === 'parallel'
   const loopConfig = block.type === 'loop' ? loops?.[block.id] : undefined
@@ -1079,21 +1088,6 @@ function BlockDetailsSidebarContent({
     )
   }
 
-  const rawValues = useMemo(() => {
-    return Object.entries(subBlockValues).reduce<Record<string, unknown>>((acc, [key, entry]) => {
-      if (entry && typeof entry === 'object' && 'value' in entry) {
-        acc[key] = (entry as { value: unknown }).value
-      } else {
-        acc[key] = entry
-      }
-      return acc
-    }, {})
-  }, [subBlockValues])
-
-  const canonicalIndex = useMemo(
-    () => buildCanonicalIndex(blockConfig.subBlocks),
-    [blockConfig.subBlocks]
-  )
   const canonicalModeOverrides = block.data?.canonicalModes
   const effectiveAdvanced =
     (block.advancedMode ?? false) ||
@@ -1179,7 +1173,7 @@ function BlockDetailsSidebarContent({
                     )}
                     {executionData.durationMs !== undefined && (
                       <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
-                        {formatDuration(executionData.durationMs)}
+                        {formatDuration(executionData.durationMs, { precision: 2 })}
                       </span>
                     )}
                   </div>
@@ -1371,12 +1365,12 @@ function BlockDetailsSidebarContent({
 }
 
 /**
- * Block details sidebar wrapped in ReactFlowProvider for hook compatibility.
+ * Preview editor wrapped in ReactFlowProvider for hook compatibility.
  */
-export function BlockDetailsSidebar(props: BlockDetailsSidebarProps) {
+export function PreviewEditor(props: PreviewEditorProps) {
   return (
     <ReactFlowProvider>
-      <BlockDetailsSidebarContent {...props} />
+      <PreviewEditorContent {...props} />
     </ReactFlowProvider>
   )
 }

apps/sim/app/workspace/[workspaceId]/w/components/preview/components/subflow.tsx

@@ -15,10 +15,9 @@ interface WorkflowPreviewSubflowData {
 }
 
 /**
- * Lightweight subflow component for workflow previews.
- * Matches the styling of the actual SubflowNodeComponent but without
- * hooks, store subscriptions, or interactive features.
- * Used in template cards and other preview contexts for performance.
+ * Preview subflow component for workflow visualization.
+ * Renders loop/parallel containers without hooks, store subscriptions,
+ * or interactive features.
  */
 function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowData>) {
   const { name, width = 500, height = 300, kind, isPreviewSelected = false } = data

apps/sim/app/workspace/[workspaceId]/w/components/preview/index.ts

@@ -1,2 +1,2 @@
-export { BlockDetailsSidebar } from './components/block-details-sidebar'
+export { PreviewEditor } from './components/preview-editor'
 export { getLeftmostBlockId, WorkflowPreview } from './preview'