improvement(workflow): hide raw json childworkflow span

* improvement(switch): dark styling

* improvement(settings): change deployed MCPs to MCPs servers

* improvement(preview): added error paths, loop logic

* improvement(preview): nested workflows preview

* feat(preview): lightweight param

* improvement(preview): staging changes integrated

.devcontainer/docker-compose.yml

@@ -44,7 +44,7 @@ services:
     deploy:
       resources:
         limits:
-          memory: 4G
+          memory: 1G
     environment:
       - NODE_ENV=development
       - DATABASE_URL=postgresql://postgres:postgres@db:5432/simstudio

.github/workflows/ci.yml

@@ -10,6 +10,9 @@ concurrency:
   group: ci-${{ github.ref }}
   cancel-in-progress: false
 
+permissions:
+  contents: read
+
 jobs:
   test-build:
     name: Test and Build
@@ -27,10 +30,11 @@ jobs:
     steps:
       - name: Extract version from commit message
         id: extract
+        env:
+          COMMIT_MSG: ${{ github.event.head_commit.message }}
         run: |
-          COMMIT_MSG="${{ github.event.head_commit.message }}"
           # Only tag versions on main branch
-          if [ "${{ github.ref }}" = "refs/heads/main" ] && [[ "$COMMIT_MSG" =~ ^(v[0-9]+\.[0-9]+\.[0-9]+): ]]; then
+          if [ "$GITHUB_REF" = "refs/heads/main" ] && [[ "$COMMIT_MSG" =~ ^(v[0-9]+\.[0-9]+\.[0-9]+): ]]; then
             VERSION="${BASH_REMATCH[1]}"
             echo "version=${VERSION}" >> $GITHUB_OUTPUT
             echo "is_release=true" >> $GITHUB_OUTPUT
@@ -277,3 +281,30 @@ jobs:
     if: needs.check-docs-changes.outputs.docs_changed == 'true'
     uses: ./.github/workflows/docs-embeddings.yml
     secrets: inherit
+
+  # Create GitHub Release (only for version commits on main, after all builds complete)
+  create-release:
+    name: Create GitHub Release
+    runs-on: blacksmith-4vcpu-ubuntu-2404
+    needs: [create-ghcr-manifests, detect-version]
+    if: needs.detect-version.outputs.is_release == 'true'
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Create release
+        env:
+          GH_PAT: ${{ secrets.GITHUB_TOKEN }}
+        run: bun run scripts/create-single-release.ts ${{ needs.detect-version.outputs.version }}

.github/workflows/docs-embeddings.yml

@@ -4,6 +4,9 @@ on:
   workflow_call:
   workflow_dispatch: # Allow manual triggering
 
+permissions:
+  contents: read
+
 jobs:
   process-docs-embeddings:
     name: Process Documentation Embeddings

.github/workflows/migrations.yml

@@ -4,6 +4,9 @@ on:
   workflow_call:
   workflow_dispatch:
 
+permissions:
+  contents: read
+
 jobs:
   migrate:
     name: Apply Database Migrations

.github/workflows/publish-cli.yml

@@ -6,6 +6,9 @@ on:
     paths:
       - 'packages/cli/**'
 
+permissions:
+  contents: read
+
 jobs:
   publish-npm:
     runs-on: blacksmith-4vcpu-ubuntu-2404

.github/workflows/publish-python-sdk.yml

@@ -6,6 +6,9 @@ on:
     paths:
       - 'packages/python-sdk/**'
 
+permissions:
+  contents: write
+
 jobs:
   publish-pypi:
     runs-on: blacksmith-4vcpu-ubuntu-2404

.github/workflows/publish-ts-sdk.yml

@@ -6,6 +6,9 @@ on:
     paths:
       - 'packages/ts-sdk/**'
 
+permissions:
+  contents: write
+
 jobs:
   publish-npm:
     runs-on: blacksmith-4vcpu-ubuntu-2404

.github/workflows/test-build.yml

@@ -4,6 +4,9 @@ on:
   workflow_call:
   workflow_dispatch:
 
+permissions:
+  contents: read
+
 jobs:
   test-build:
     name: Test and Build

apps/docs/app/[lang]/[[...slug]]/page.tsx

@@ -185,11 +185,6 @@ export default async function Page(props: { params: Promise<{ slug?: string[]; l
         tableOfContent={{
           style: 'clerk',
           enabled: true,
-          header: (
-            <div key='toc-header' className='mb-2 font-medium text-sm'>
-              On this page
-            </div>
-          ),
           footer: <TOCFooter />,
           single: false,
         }}

apps/docs/app/[lang]/layout.tsx

@@ -3,13 +3,13 @@ import { defineI18nUI } from 'fumadocs-ui/i18n'
 import { DocsLayout } from 'fumadocs-ui/layouts/docs'
 import { RootProvider } from 'fumadocs-ui/provider/next'
 import { Geist_Mono, Inter } from 'next/font/google'
-import Image from 'next/image'
 import {
   SidebarFolder,
   SidebarItem,
   SidebarSeparator,
 } from '@/components/docs-layout/sidebar-components'
 import { Navbar } from '@/components/navbar/navbar'
+import { SimLogoFull } from '@/components/ui/sim-logo'
 import { i18n } from '@/lib/i18n'
 import { source } from '@/lib/source'
 import '../global.css'
@@ -102,16 +102,7 @@ export default async function Layout({ children, params }: LayoutProps) {
           <DocsLayout
             tree={source.pageTree[lang]}
             nav={{
-              title: (
-                <Image
-                  src='/static/logo.png'
-                  alt='Sim'
-                  width={72}
-                  height={28}
-                  className='h-7 w-auto'
-                  priority
-                />
-              ),
+              title: <SimLogoFull className='h-7 w-auto' />,
             }}
             sidebar={{
               defaultOpenLevel: 0,

apps/docs/app/api/og/route.tsx

@@ -33,15 +33,41 @@ async function loadGoogleFont(font: string, weights: string, text: string): Prom
   throw new Error('Failed to load font data')
 }
 
+/**
+ * Sim logo with icon and "Sim" text for OG image.
+ */
+function SimLogoFull() {
+  return (
+    <svg height='28' viewBox='720 440 1020 320' fill='none'>
+      {/* Green icon - top left shape with cutout */}
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M875.791 577.171C875.791 581.922 873.911 586.483 870.576 589.842L870.098 590.323C866.764 593.692 862.234 595.575 857.517 595.575H750.806C740.978 595.575 733 603.6 733 613.498V728.902C733 738.799 740.978 746.826 750.806 746.826H865.382C875.209 746.826 883.177 738.799 883.177 728.902V620.853C883.177 616.448 884.912 612.222 888.008 609.104C891.093 605.997 895.29 604.249 899.664 604.249H1008.16C1017.99 604.249 1025.96 596.224 1025.96 586.327V470.923C1025.96 461.025 1017.99 453 1008.16 453H893.586C883.759 453 875.791 461.025 875.791 470.923V577.171ZM910.562 477.566H991.178C996.922 477.566 1001.57 482.254 1001.57 488.029V569.22C1001.57 574.995 996.922 579.683 991.178 579.683H910.562C904.828 579.683 900.173 574.995 900.173 569.22V488.029C900.173 482.254 904.828 477.566 910.562 477.566Z'
+        fill='#33C482'
+      />
+      {/* Green icon - bottom right square */}
+      <path
+        d='M1008.3 624.59H923.113C912.786 624.59 904.414 633.022 904.414 643.423V728.171C904.414 738.572 912.786 747.004 923.113 747.004H1008.3C1018.63 747.004 1027 738.572 1027 728.171V643.423C1027 633.022 1018.63 624.59 1008.3 624.59Z'
+        fill='#33C482'
+      />
+      {/* "Sim" text - white for dark background */}
+      <path
+        d='M1210.54 515.657C1226.65 515.657 1240.59 518.51 1252.31 524.257H1252.31C1264.3 529.995 1273.63 538.014 1280.26 548.319H1280.26C1287.19 558.635 1290.78 570.899 1291.08 585.068L1291.1 586.089H1249.11L1249.09 585.115C1248.8 574.003 1245.18 565.493 1238.32 559.451C1231.45 553.399 1221.79 550.308 1209.21 550.308C1196.3 550.308 1186.48 553.113 1179.61 558.588C1172.76 564.046 1169.33 571.499 1169.33 581.063C1169.33 588.092 1171.88 593.978 1177.01 598.783C1182.17 603.618 1189.99 607.399 1200.56 610.061H1200.56L1238.77 619.451C1257.24 623.65 1271.21 630.571 1280.57 640.293L1281.01 640.739C1290.13 650.171 1294.64 662.97 1294.64 679.016C1294.64 692.923 1290.88 705.205 1283.34 715.822L1283.33 715.834C1275.81 726.134 1265.44 734.14 1252.26 739.866L1252.25 739.871C1239.36 745.302 1224.12 748 1206.54 748C1180.9 748 1160.36 741.696 1145.02 728.984C1129.67 716.258 1122 699.269 1122 678.121V677.121H1163.99V678.121C1163.99 688.869 1167.87 697.367 1175.61 703.722L1176.34 704.284C1184.04 709.997 1194.37 712.902 1207.43 712.902C1222.13 712.902 1233.3 710.087 1241.07 704.588C1248.8 698.812 1252.64 691.21 1252.64 681.699C1252.64 674.769 1250.5 669.057 1246.25 664.49L1246.23 664.478L1246.22 664.464C1242.28 659.929 1234.83 656.119 1223.64 653.152L1185.43 644.208L1185.42 644.204C1166.05 639.407 1151.49 632.035 1141.83 622.012L1141.83 622.006L1141.82 622C1132.43 611.94 1127.78 598.707 1127.78 582.405C1127.78 568.81 1131.23 556.976 1138.17 546.949L1138.18 546.941L1138.19 546.933C1145.41 536.936 1155.18 529.225 1167.48 523.793L1167.48 523.79C1180.07 518.36 1194.43 515.657 1210.54 515.657ZM1323.39 521.979C1331.68 525.008 1337.55 526.482 1343.51 526.482C1349.48 526.482 1355.64 525.005 1364.49 521.973L1365.82 521.52V742.633H1322.05V521.489L1323.39 521.979ZM1642.01 515.657C1667.11 515.657 1686.94 523.031 1701.39 537.876C1715.83 552.716 1723 572.968 1723 598.507V742.633H1680.12V608.794C1680.12 591.666 1675.72 578.681 1667.07 569.681L1667.06 569.669L1667.04 569.656C1658.67 560.359 1647.26 555.675 1632.68 555.675C1622.47 555.675 1613.47 558.022 1605.64 562.69L1605.63 562.696C1598.11 567.064 1592.17 573.475 1587.8 581.968C1583.44 590.448 1581.25 600.424 1581.25 611.925V742.633H1537.92V608.347C1537.92 591.208 1533.67 578.376 1525.31 569.68L1525.31 569.674L1525.3 569.668C1516.93 560.664 1505.52 556.122 1490.93 556.122C1480.72 556.122 1471.72 558.469 1463.89 563.138L1463.88 563.144C1456.36 567.511 1450.41 573.922 1446.05 582.415L1446.05 582.422L1446.04 582.428C1441.69 590.602 1439.5 600.423 1439.5 611.925V742.633H1395.72V521.919H1435.05V554.803C1439.92 544.379 1447.91 535.465 1458.37 528.356C1470.71 519.875 1485.58 515.657 1502.93 515.657C1522.37 515.657 1538.61 520.931 1551.55 531.538C1560.38 538.771 1567.1 547.628 1571.72 558.091C1576.05 547.619 1582.83 538.757 1592.07 531.524C1605.61 520.93 1622.28 515.657 1642.01 515.657ZM1343.49 452C1351.45 452 1358.23 454.786 1363.75 460.346C1369.27 465.905 1372.04 472.721 1372.04 480.73C1372.04 488.452 1369.27 495.254 1363.77 501.096L1363.76 501.105L1363.75 501.115C1358.23 506.675 1351.45 509.461 1343.49 509.461C1335.81 509.461 1329.05 506.669 1323.25 501.134L1323.23 501.115L1323.21 501.096C1317.71 495.254 1314.94 488.452 1314.94 480.73C1314.94 472.721 1317.7 465.905 1323.23 460.346L1323.24 460.337L1323.25 460.327C1329.05 454.792 1335.81 452 1343.49 452Z'
+        fill='#fafafa'
+      />
+    </svg>
+  )
+}
+
 /**
  * Generates dynamic Open Graph images for documentation pages.
+ * Style matches Cursor docs: dark background, title at top, logo bottom-left, domain bottom-right.
  */
 export async function GET(request: NextRequest) {
   const { searchParams } = new URL(request.url)
   const title = searchParams.get('title') || 'Documentation'
 
-  const baseUrl = new URL(request.url).origin
-
   const allText = `${title}docs.sim.ai`
   const fontData = await loadGoogleFont('Geist', '400;500;600', allText)
 
@@ -52,84 +78,39 @@ export async function GET(request: NextRequest) {
         width: '100%',
         display: 'flex',
         flexDirection: 'column',
-        background: '#0c0c0c',
-        position: 'relative',
+        justifyContent: 'space-between',
+        padding: '56px 64px',
+        background: '#121212', // Dark mode background matching docs (hsla 0, 0%, 7%)
         fontFamily: 'Geist',
       }}
     >
-      {/* Base gradient layer - subtle purple tint across the entire image */}
-      <div
+      {/* Title at top */}
+      <span
         style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          background:
-            'radial-gradient(ellipse 150% 100% at 50% 100%, rgba(88, 28, 135, 0.15) 0%, rgba(88, 28, 135, 0.08) 25%, rgba(88, 28, 135, 0.03) 50%, transparent 80%)',
-          display: 'flex',
-        }}
-      />
-
-      {/* Secondary glow - adds depth without harsh edges */}
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          background:
-            'radial-gradient(ellipse 100% 80% at 80% 90%, rgba(112, 31, 252, 0.12) 0%, rgba(112, 31, 252, 0.04) 40%, transparent 70%)',
-          display: 'flex',
-        }}
-      />
-
-      {/* Top darkening - creates natural vignette */}
-      <div
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          width: '100%',
-          height: '100%',
-          background:
-            'linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 40%, transparent 100%)',
-          display: 'flex',
-        }}
-      />
-
-      {/* Content */}
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          padding: '56px 72px',
-          height: '100%',
-          justifyContent: 'space-between',
+          fontSize: getTitleFontSize(title),
+          fontWeight: 500,
+          color: '#fafafa', // Light text matching docs
+          lineHeight: 1.2,
+          letterSpacing: '-0.02em',
         }}
       >
-        {/* Logo */}
-        <img src={`${baseUrl}/static/logo.png`} alt='sim' height={32} />
+        {title}
+      </span>
 
-        {/* Title */}
-        <span
-          style={{
-            fontSize: getTitleFontSize(title),
-            fontWeight: 600,
-            color: '#ffffff',
-            lineHeight: 1.1,
-            letterSpacing: '-0.02em',
-          }}
-        >
-          {title}
-        </span>
-
-        {/* Footer */}
+      {/* Footer: icon left, domain right */}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          width: '100%',
+        }}
+      >
+        <SimLogoFull />
         <span
           style={{
             fontSize: 20,
-            fontWeight: 500,
+            fontWeight: 400,
             color: '#71717a',
           }}
         >

apps/docs/app/global.css

@@ -9,11 +9,20 @@ body {
 }
 
 @theme {
-  --color-fd-primary: #802fff; /* Purple from control-bar component */
+  --color-fd-primary: #33c482; /* Green from Sim logo */
   --font-geist-sans: var(--font-geist-sans);
   --font-geist-mono: var(--font-geist-mono);
 }
 
+/* Ensure primary color is set in both light and dark modes */
+:root {
+  --color-fd-primary: #33c482;
+}
+
+.dark {
+  --color-fd-primary: #33c482;
+}
+
 /* Font family utilities */
 .font-sans {
   font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
@@ -34,7 +43,7 @@ body {
 :root {
   --fd-border: transparent !important;
   --fd-border-sidebar: transparent !important;
-  --fd-nav-height: 64px; /* Custom navbar height (h-16 = 4rem = 64px) */
+  --fd-nav-height: 65px; /* Custom navbar height (h-16 = 64px + 1px border) */
   /* Content container width used to center main content */
   --spacing-fd-container: 1400px;
   /* Edge gutter = leftover space on each side of centered container */
@@ -119,15 +128,28 @@ aside#nd-sidebar {
   }
 }
 
+/* Hide TOC popover on tablet/medium screens (768px - 1279px) */
+/* Keeps it visible on mobile (<768px) for easy navigation */
+/* Desktop (>=1280px) already hides it via fumadocs xl:hidden */
+@media (min-width: 768px) and (max-width: 1279px) {
+  #nd-docs-layout {
+    --fd-toc-popover-height: 0px !important;
+  }
+
+  [data-toc-popover] {
+    display: none !important;
+  }
+}
+
 /* Desktop only: Apply custom navbar offset, sidebar width and margin offsets */
 /* On mobile, let fumadocs handle the layout natively */
 @media (min-width: 1024px) {
   :root {
-    --fd-banner-height: 64px !important;
+    --fd-banner-height: 65px !important; /* 64px navbar + 1px border */
   }
 
   #nd-docs-layout {
-    --fd-docs-height: calc(100dvh - 64px) !important;
+    --fd-docs-height: calc(100dvh - 65px) !important; /* 64px navbar + 1px border */
     --fd-sidebar-width: 300px !important;
     margin-left: var(--sidebar-offset) !important;
     margin-right: var(--toc-offset) !important;
@@ -214,19 +236,19 @@ html:not(.dark) #nd-sidebar button:not([aria-label*="ollapse"]):not([aria-label*
   letter-spacing: 0.05em !important;
 }
 
-/* Override active state (NO PURPLE) */
+/* Override active state */
 #nd-sidebar a[data-active="true"],
 #nd-sidebar button[data-active="true"],
 #nd-sidebar a.bg-fd-primary\/10,
 #nd-sidebar a.text-fd-primary,
 #nd-sidebar a[class*="bg-fd-primary"],
 #nd-sidebar a[class*="text-fd-primary"],
-/* Override custom sidebar purple classes */
+/* Override custom sidebar green classes */
   #nd-sidebar
-  a.bg-purple-50\/80,
-#nd-sidebar a.text-purple-600,
-#nd-sidebar a[class*="bg-purple"],
-#nd-sidebar a[class*="text-purple"] {
+  a.bg-emerald-50\/80,
+#nd-sidebar a.text-emerald-600,
+#nd-sidebar a[class*="bg-emerald"],
+#nd-sidebar a[class*="text-emerald"] {
   background-image: none !important;
 }
 
@@ -237,10 +259,10 @@ html.dark #nd-sidebar a.bg-fd-primary\/10,
 html.dark #nd-sidebar a.text-fd-primary,
 html.dark #nd-sidebar a[class*="bg-fd-primary"],
 html.dark #nd-sidebar a[class*="text-fd-primary"],
-html.dark #nd-sidebar a.bg-purple-50\/80,
-html.dark #nd-sidebar a.text-purple-600,
-html.dark #nd-sidebar a[class*="bg-purple"],
-html.dark #nd-sidebar a[class*="text-purple"] {
+html.dark #nd-sidebar a.bg-emerald-50\/80,
+html.dark #nd-sidebar a.text-emerald-600,
+html.dark #nd-sidebar a[class*="bg-emerald"],
+html.dark #nd-sidebar a[class*="text-emerald"] {
   background-color: rgba(255, 255, 255, 0.15) !important;
   color: rgba(255, 255, 255, 1) !important;
 }
@@ -252,10 +274,10 @@ html:not(.dark) #nd-sidebar a.bg-fd-primary\/10,
 html:not(.dark) #nd-sidebar a.text-fd-primary,
 html:not(.dark) #nd-sidebar a[class*="bg-fd-primary"],
 html:not(.dark) #nd-sidebar a[class*="text-fd-primary"],
-html:not(.dark) #nd-sidebar a.bg-purple-50\/80,
-html:not(.dark) #nd-sidebar a.text-purple-600,
-html:not(.dark) #nd-sidebar a[class*="bg-purple"],
-html:not(.dark) #nd-sidebar a[class*="text-purple"] {
+html:not(.dark) #nd-sidebar a.bg-emerald-50\/80,
+html:not(.dark) #nd-sidebar a.text-emerald-600,
+html:not(.dark) #nd-sidebar a[class*="bg-emerald"],
+html:not(.dark) #nd-sidebar a[class*="text-emerald"] {
   background-color: rgba(0, 0, 0, 0.07) !important;
   color: rgba(0, 0, 0, 0.9) !important;
 }
@@ -273,8 +295,8 @@ html:not(.dark) #nd-sidebar button:hover:not([data-active="true"]) {
 }
 
 /* Dark mode - ensure active/selected items don't change on hover */
-html.dark #nd-sidebar a.bg-purple-50\/80:hover,
-html.dark #nd-sidebar a[class*="bg-purple"]:hover,
+html.dark #nd-sidebar a.bg-emerald-50\/80:hover,
+html.dark #nd-sidebar a[class*="bg-emerald"]:hover,
 html.dark #nd-sidebar a[data-active="true"]:hover,
 html.dark #nd-sidebar button[data-active="true"]:hover {
   background-color: rgba(255, 255, 255, 0.15) !important;
@@ -282,8 +304,8 @@ html.dark #nd-sidebar button[data-active="true"]:hover {
 }
 
 /* Light mode - ensure active/selected items don't change on hover */
-html:not(.dark) #nd-sidebar a.bg-purple-50\/80:hover,
-html:not(.dark) #nd-sidebar a[class*="bg-purple"]:hover,
+html:not(.dark) #nd-sidebar a.bg-emerald-50\/80:hover,
+html:not(.dark) #nd-sidebar a[class*="bg-emerald"]:hover,
 html:not(.dark) #nd-sidebar a[data-active="true"]:hover,
 html:not(.dark) #nd-sidebar button[data-active="true"]:hover {
   background-color: rgba(0, 0, 0, 0.07) !important;
@@ -355,16 +377,24 @@ aside[data-sidebar] > *:not([data-sidebar-viewport]) {
   button[aria-label="Toggle Sidebar"],
   button[aria-label="Collapse Sidebar"],
   /* Hide nav title/logo in sidebar on desktop - target all possible locations */
+    /* Lower specificity selectors first (attribute selectors) */
+    [data-sidebar-header],
+  [data-sidebar] [data-title],
   aside[data-sidebar] a[href="/"],
   aside[data-sidebar] a[href="/"] img,
   aside[data-sidebar] > a:first-child,
   aside[data-sidebar] > div > a:first-child,
   aside[data-sidebar] img[alt="Sim"],
-  [data-sidebar-header],
-  [data-sidebar] [data-title],
+  aside[data-sidebar] svg[aria-label="Sim"],
+  /* Higher specificity selectors (ID selectors) */
+    #nd-sidebar
+    a[href="/"],
+  #nd-sidebar a[href="/"] img,
+  #nd-sidebar a[href="/"] svg,
   #nd-sidebar > a:first-child,
   #nd-sidebar > div:first-child > a:first-child,
   #nd-sidebar img[alt="Sim"],
+  #nd-sidebar svg[aria-label="Sim"],
   /* Hide theme toggle at bottom of sidebar on desktop */
     #nd-sidebar
     > footer,
@@ -502,6 +532,15 @@ pre code .line {
   color: var(--color-fd-primary);
 }
 
+/* ============================================
+   TOC (Table of Contents) Styling
+   ============================================ */
+
+/* Remove the thin border-left on nested TOC items (keeps main indicator only) */
+#nd-toc a[style*="padding-inline-start"] {
+  border-left: none !important;
+}
+
 /* Add bottom spacing to prevent abrupt page endings */
 [data-content] {
   padding-top: 1.5rem !important;

apps/docs/components/docs-layout/sidebar-components.tsx

@@ -44,7 +44,7 @@ export function SidebarItem({ item }: { item: Item }) {
         'lg:text-gray-600 lg:dark:text-gray-400',
         !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
         active &&
-          'lg:bg-purple-50/80 lg:font-normal lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+          'lg:bg-emerald-50/80 lg:font-normal lg:text-emerald-600 lg:dark:bg-emerald-900/15 lg:dark:text-emerald-400'
       )}
     >
       {item.name}
@@ -79,7 +79,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
           'lg:text-gray-600 lg:dark:text-gray-400',
           !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
           active &&
-            'lg:bg-purple-50/80 lg:font-normal lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+            'lg:bg-emerald-50/80 lg:font-normal lg:text-emerald-600 lg:dark:bg-emerald-900/15 lg:dark:text-emerald-400'
         )}
       >
         {item.name}
@@ -104,7 +104,7 @@ export function SidebarFolder({ item, children }: { item: Folder; children: Reac
               'lg:text-gray-800 lg:dark:text-gray-200',
               !active && 'lg:hover:bg-gray-100/60 lg:dark:hover:bg-gray-800/40',
               active &&
-                'lg:bg-purple-50/80 lg:text-purple-600 lg:dark:bg-purple-900/15 lg:dark:text-purple-400'
+                'lg:bg-emerald-50/80 lg:text-emerald-600 lg:dark:bg-emerald-900/15 lg:dark:text-emerald-400'
             )}
           >
             {item.name}

apps/docs/components/docs-layout/toc-footer.tsx

@@ -23,7 +23,7 @@ export function TOCFooter() {
           rel='noopener noreferrer'
           onMouseEnter={() => setIsHovered(true)}
           onMouseLeave={() => setIsHovered(false)}
-          className='group mt-2 inline-flex h-8 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] px-3 pr-[10px] pl-[12px] font-medium text-sm text-white shadow-[inset_0_2px_4px_0_#9B77FF] outline-none transition-all hover:shadow-lg focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50'
+          className='group mt-2 inline-flex h-8 w-fit items-center justify-center gap-1 whitespace-nowrap rounded-[10px] border border-[#2AAD6C] bg-gradient-to-b from-[#3ED990] to-[#2AAD6C] px-3 pr-[10px] pl-[12px] font-medium text-sm text-white shadow-[inset_0_2px_4px_0_#5EE8A8] outline-none transition-all hover:shadow-lg focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50'
           aria-label='Get started with Sim - Sign up for free'
         >
           <span>Get started</span>

apps/docs/components/navbar/navbar.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import Image from 'next/image'
 import Link from 'next/link'
 import { LanguageDropdown } from '@/components/ui/language-dropdown'
 import { SearchTrigger } from '@/components/ui/search-trigger'
+import { SimLogoFull } from '@/components/ui/sim-logo'
 import { ThemeToggle } from '@/components/ui/theme-toggle'
 
 export function Navbar() {
@@ -27,13 +27,7 @@ export function Navbar() {
           {/* Left cluster: logo */}
           <div className='flex items-center'>
             <Link href='/' className='flex min-w-[100px] items-center'>
-              <Image
-                src='/static/logo.png'
-                alt='Sim'
-                width={72}
-                height={28}
-                className='h-7 w-auto'
-              />
+              <SimLogoFull className='h-7 w-auto' />
             </Link>
           </div>
 

apps/docs/components/ui/action-media.tsx

@@ -0,0 +1,87 @@
+'use client'
+
+import { useState } from 'react'
+import { cn, getAssetUrl } from '@/lib/utils'
+import { Lightbox } from './lightbox'
+
+interface ActionImageProps {
+  src: string
+  alt: string
+  enableLightbox?: boolean
+}
+
+interface ActionVideoProps {
+  src: string
+  alt: string
+  enableLightbox?: boolean
+}
+
+export function ActionImage({ src, alt, enableLightbox = true }: ActionImageProps) {
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+
+  const handleClick = () => {
+    if (enableLightbox) {
+      setIsLightboxOpen(true)
+    }
+  }
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt}
+        onClick={handleClick}
+        className={cn(
+          'inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700',
+          enableLightbox && 'cursor-pointer transition-opacity hover:opacity-90'
+        )}
+      />
+      {enableLightbox && (
+        <Lightbox
+          isOpen={isLightboxOpen}
+          onClose={() => setIsLightboxOpen(false)}
+          src={src}
+          alt={alt}
+          type='image'
+        />
+      )}
+    </>
+  )
+}
+
+export function ActionVideo({ src, alt, enableLightbox = true }: ActionVideoProps) {
+  const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+  const resolvedSrc = getAssetUrl(src)
+
+  const handleClick = () => {
+    if (enableLightbox) {
+      setIsLightboxOpen(true)
+    }
+  }
+
+  return (
+    <>
+      <video
+        src={resolvedSrc}
+        autoPlay
+        loop
+        muted
+        playsInline
+        onClick={handleClick}
+        className={cn(
+          'inline-block w-full max-w-[200px] rounded border border-neutral-200 dark:border-neutral-700',
+          enableLightbox && 'cursor-pointer transition-opacity hover:opacity-90'
+        )}
+      />
+      {enableLightbox && (
+        <Lightbox
+          isOpen={isLightboxOpen}
+          onClose={() => setIsLightboxOpen(false)}
+          src={src}
+          alt={alt}
+          type='video'
+        />
+      )}
+    </>
+  )
+}

apps/docs/components/ui/language-dropdown.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Check, ChevronRight } from 'lucide-react'
+import { Check, ChevronDown } from 'lucide-react'
 import { useParams, usePathname, useRouter } from 'next/navigation'
+import { cn } from '@/lib/utils'
 
 const languages = {
   en: { name: 'English', flag: '🇺🇸' },
@@ -15,6 +16,7 @@ const languages = {
 
 export function LanguageDropdown() {
   const [isOpen, setIsOpen] = useState(false)
+  const [hoveredIndex, setHoveredIndex] = useState<number>(-1)
   const pathname = usePathname()
   const params = useParams()
   const router = useRouter()
@@ -71,6 +73,15 @@ export function LanguageDropdown() {
     return () => window.removeEventListener('keydown', onKey)
   }, [isOpen])
 
+  // Reset hovered index when popover closes
+  useEffect(() => {
+    if (!isOpen) {
+      setHoveredIndex(-1)
+    }
+  }, [isOpen])
+
+  const languageEntries = Object.entries(languages)
+
   return (
     <div className='relative'>
       <button
@@ -82,14 +93,14 @@ export function LanguageDropdown() {
         aria-haspopup='listbox'
         aria-expanded={isOpen}
         aria-controls='language-menu'
-        className='flex cursor-pointer items-center gap-1.5 rounded-xl px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+        className='flex cursor-pointer items-center gap-1.5 rounded-[6px] px-3 py-2 font-normal text-[0.9375rem] text-foreground/60 leading-[1.4] transition-colors hover:bg-foreground/8 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring'
         style={{
           fontFamily:
             '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
         }}
       >
         <span>{languages[currentLang as keyof typeof languages]?.name}</span>
-        <ChevronRight className='h-3.5 w-3.5' />
+        <ChevronDown className={cn('h-3.5 w-3.5 transition-transform', isOpen && 'rotate-180')} />
       </button>
 
       {isOpen && (
@@ -98,29 +109,37 @@ export function LanguageDropdown() {
           <div
             id='language-menu'
             role='listbox'
-            className='absolute top-full right-0 z-[1001] mt-1 max-h-[75vh] w-56 overflow-auto rounded-xl border border-border/50 bg-white shadow-2xl md:w-44 md:bg-background/95 md:backdrop-blur-md dark:bg-neutral-950 md:dark:bg-background/95'
+            className='absolute top-full right-0 z-[1001] mt-2 max-h-[400px] min-w-[160px] overflow-auto rounded-[6px] bg-white px-[6px] py-[6px] shadow-lg dark:bg-neutral-900'
           >
-            {Object.entries(languages).map(([code, lang]) => (
-              <button
-                key={code}
-                onClick={(e) => {
-                  e.preventDefault()
-                  e.stopPropagation()
-                  handleLanguageChange(code)
-                }}
-                role='option'
-                aria-selected={currentLang === code}
-                className={`flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-base transition-colors first:rounded-t-xl last:rounded-b-xl hover:bg-muted/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring md:gap-2 md:px-2.5 md:py-2 md:text-sm ${
-                  currentLang === code ? 'bg-muted/60 font-medium text-primary' : 'text-foreground'
-                }`}
-              >
-                <span className='text-base md:text-sm'>{lang.flag}</span>
-                <span className='leading-none'>{lang.name}</span>
-                {currentLang === code && (
-                  <Check className='ml-auto h-4 w-4 text-primary md:h-3.5 md:w-3.5' />
-                )}
-              </button>
-            ))}
+            {languageEntries.map(([code, lang], index) => {
+              const isSelected = currentLang === code
+              const isHovered = hoveredIndex === index
+
+              return (
+                <button
+                  key={code}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    e.stopPropagation()
+                    handleLanguageChange(code)
+                  }}
+                  onMouseEnter={() => setHoveredIndex(index)}
+                  onMouseLeave={() => setHoveredIndex(-1)}
+                  role='option'
+                  aria-selected={isSelected}
+                  className={cn(
+                    'flex h-[26px] w-full min-w-0 cursor-pointer items-center gap-[8px] rounded-[6px] px-[6px] text-[13px] transition-colors',
+                    'text-neutral-700 dark:text-neutral-200',
+                    isHovered && 'bg-neutral-100 dark:bg-neutral-800',
+                    'focus:outline-none'
+                  )}
+                >
+                  <span className='text-[13px]'>{lang.flag}</span>
+                  <span className='flex-1 text-left leading-none'>{lang.name}</span>
+                  {isSelected && <Check className='ml-auto h-3.5 w-3.5' />}
+                </button>
+              )
+            })}
           </div>
         </>
       )}

apps/docs/components/ui/sim-logo.tsx

@@ -0,0 +1,108 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface SimLogoProps {
+  className?: string
+}
+
+/**
+ * Sim logo with icon and text.
+ * The icon stays green (#33C482), text adapts to light/dark mode.
+ */
+export function SimLogo({ className }: SimLogoProps) {
+  return (
+    <svg
+      viewBox='720 440 320 320'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={cn('h-7 w-auto', className)}
+      aria-label='Sim'
+    >
+      {/* Green icon - top left shape with cutout */}
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M875.791 577.171C875.791 581.922 873.911 586.483 870.576 589.842L870.098 590.323C866.764 593.692 862.234 595.575 857.517 595.575H750.806C740.978 595.575 733 603.6 733 613.498V728.902C733 738.799 740.978 746.826 750.806 746.826H865.382C875.209 746.826 883.177 738.799 883.177 728.902V620.853C883.177 616.448 884.912 612.222 888.008 609.104C891.093 605.997 895.29 604.249 899.664 604.249H1008.16C1017.99 604.249 1025.96 596.224 1025.96 586.327V470.923C1025.96 461.025 1017.99 453 1008.16 453H893.586C883.759 453 875.791 461.025 875.791 470.923V577.171ZM910.562 477.566H991.178C996.922 477.566 1001.57 482.254 1001.57 488.029V569.22C1001.57 574.995 996.922 579.683 991.178 579.683H910.562C904.828 579.683 900.173 574.995 900.173 569.22V488.029C900.173 482.254 904.828 477.566 910.562 477.566Z'
+        fill='#33C482'
+      />
+      {/* Green icon - bottom right square */}
+      <path
+        d='M1008.3 624.59H923.113C912.786 624.59 904.414 633.022 904.414 643.423V728.171C904.414 738.572 912.786 747.004 923.113 747.004H1008.3C1018.63 747.004 1027 738.572 1027 728.171V643.423C1027 633.022 1018.63 624.59 1008.3 624.59Z'
+        fill='#33C482'
+      />
+      {/* Gradient overlay on bottom right square */}
+      <path
+        d='M1008.3 624.199H923.113C912.786 624.199 904.414 632.631 904.414 643.033V727.78C904.414 738.181 912.786 746.612 923.113 746.612H1008.3C1018.63 746.612 1027 738.181 1027 727.78V643.033C1027 632.631 1018.63 624.199 1008.3 624.199Z'
+        fill='url(#sim-logo-gradient)'
+        fillOpacity='0.2'
+      />
+      <defs>
+        <linearGradient
+          id='sim-logo-gradient'
+          x1='904.414'
+          y1='624.199'
+          x2='978.836'
+          y2='698.447'
+          gradientUnits='userSpaceOnUse'
+        >
+          <stop />
+          <stop offset='1' stopOpacity='0' />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+/**
+ * Full Sim logo with icon and "Sim" text.
+ * The icon stays green (#33C482), text adapts to light/dark mode.
+ */
+export function SimLogoFull({ className }: SimLogoProps) {
+  return (
+    <svg
+      viewBox='720 440 1020 320'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={cn('h-7 w-auto', className)}
+      aria-label='Sim'
+    >
+      {/* Green icon - top left shape with cutout */}
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M875.791 577.171C875.791 581.922 873.911 586.483 870.576 589.842L870.098 590.323C866.764 593.692 862.234 595.575 857.517 595.575H750.806C740.978 595.575 733 603.6 733 613.498V728.902C733 738.799 740.978 746.826 750.806 746.826H865.382C875.209 746.826 883.177 738.799 883.177 728.902V620.853C883.177 616.448 884.912 612.222 888.008 609.104C891.093 605.997 895.29 604.249 899.664 604.249H1008.16C1017.99 604.249 1025.96 596.224 1025.96 586.327V470.923C1025.96 461.025 1017.99 453 1008.16 453H893.586C883.759 453 875.791 461.025 875.791 470.923V577.171ZM910.562 477.566H991.178C996.922 477.566 1001.57 482.254 1001.57 488.029V569.22C1001.57 574.995 996.922 579.683 991.178 579.683H910.562C904.828 579.683 900.173 574.995 900.173 569.22V488.029C900.173 482.254 904.828 477.566 910.562 477.566Z'
+        fill='#33C482'
+      />
+      {/* Green icon - bottom right square */}
+      <path
+        d='M1008.3 624.59H923.113C912.786 624.59 904.414 633.022 904.414 643.423V728.171C904.414 738.572 912.786 747.004 923.113 747.004H1008.3C1018.63 747.004 1027 738.572 1027 728.171V643.423C1027 633.022 1018.63 624.59 1008.3 624.59Z'
+        fill='#33C482'
+      />
+      {/* Gradient overlay on bottom right square */}
+      <path
+        d='M1008.3 624.199H923.113C912.786 624.199 904.414 632.631 904.414 643.033V727.78C904.414 738.181 912.786 746.612 923.113 746.612H1008.3C1018.63 746.612 1027 738.181 1027 727.78V643.033C1027 632.631 1018.63 624.199 1008.3 624.199Z'
+        fill='url(#sim-logo-full-gradient)'
+        fillOpacity='0.2'
+      />
+      {/* "Sim" text - adapts to light/dark mode via currentColor */}
+      <path
+        d='M1210.54 515.657C1226.65 515.657 1240.59 518.51 1252.31 524.257H1252.31C1264.3 529.995 1273.63 538.014 1280.26 548.319H1280.26C1287.19 558.635 1290.78 570.899 1291.08 585.068L1291.1 586.089H1249.11L1249.09 585.115C1248.8 574.003 1245.18 565.493 1238.32 559.451C1231.45 553.399 1221.79 550.308 1209.21 550.308C1196.3 550.308 1186.48 553.113 1179.61 558.588C1172.76 564.046 1169.33 571.499 1169.33 581.063C1169.33 588.092 1171.88 593.978 1177.01 598.783C1182.17 603.618 1189.99 607.399 1200.56 610.061H1200.56L1238.77 619.451C1257.24 623.65 1271.21 630.571 1280.57 640.293L1281.01 640.739C1290.13 650.171 1294.64 662.97 1294.64 679.016C1294.64 692.923 1290.88 705.205 1283.34 715.822L1283.33 715.834C1275.81 726.134 1265.44 734.14 1252.26 739.866L1252.25 739.871C1239.36 745.302 1224.12 748 1206.54 748C1180.9 748 1160.36 741.696 1145.02 728.984C1129.67 716.258 1122 699.269 1122 678.121V677.121H1163.99V678.121C1163.99 688.869 1167.87 697.367 1175.61 703.722L1176.34 704.284C1184.04 709.997 1194.37 712.902 1207.43 712.902C1222.13 712.902 1233.3 710.087 1241.07 704.588C1248.8 698.812 1252.64 691.21 1252.64 681.699C1252.64 674.769 1250.5 669.057 1246.25 664.49L1246.23 664.478L1246.22 664.464C1242.28 659.929 1234.83 656.119 1223.64 653.152L1185.43 644.208L1185.42 644.204C1166.05 639.407 1151.49 632.035 1141.83 622.012L1141.83 622.006L1141.82 622C1132.43 611.94 1127.78 598.707 1127.78 582.405C1127.78 568.81 1131.23 556.976 1138.17 546.949L1138.18 546.941L1138.19 546.933C1145.41 536.936 1155.18 529.225 1167.48 523.793L1167.48 523.79C1180.07 518.36 1194.43 515.657 1210.54 515.657ZM1323.39 521.979C1331.68 525.008 1337.55 526.482 1343.51 526.482C1349.48 526.482 1355.64 525.005 1364.49 521.973L1365.82 521.52V742.633H1322.05V521.489L1323.39 521.979ZM1642.01 515.657C1667.11 515.657 1686.94 523.031 1701.39 537.876C1715.83 552.716 1723 572.968 1723 598.507V742.633H1680.12V608.794C1680.12 591.666 1675.72 578.681 1667.07 569.681L1667.06 569.669L1667.04 569.656C1658.67 560.359 1647.26 555.675 1632.68 555.675C1622.47 555.675 1613.47 558.022 1605.64 562.69L1605.63 562.696C1598.11 567.064 1592.17 573.475 1587.8 581.968C1583.44 590.448 1581.25 600.424 1581.25 611.925V742.633H1537.92V608.347C1537.92 591.208 1533.67 578.376 1525.31 569.68L1525.31 569.674L1525.3 569.668C1516.93 560.664 1505.52 556.122 1490.93 556.122C1480.72 556.122 1471.72 558.469 1463.89 563.138L1463.88 563.144C1456.36 567.511 1450.41 573.922 1446.05 582.415L1446.05 582.422L1446.04 582.428C1441.69 590.602 1439.5 600.423 1439.5 611.925V742.633H1395.72V521.919H1435.05V554.803C1439.92 544.379 1447.91 535.465 1458.37 528.356C1470.71 519.875 1485.58 515.657 1502.93 515.657C1522.37 515.657 1538.61 520.931 1551.55 531.538C1560.38 538.771 1567.1 547.628 1571.72 558.091C1576.05 547.619 1582.83 538.757 1592.07 531.524C1605.61 520.93 1622.28 515.657 1642.01 515.657ZM1343.49 452C1351.45 452 1358.23 454.786 1363.75 460.346C1369.27 465.905 1372.04 472.721 1372.04 480.73C1372.04 488.452 1369.27 495.254 1363.77 501.096L1363.76 501.105L1363.75 501.115C1358.23 506.675 1351.45 509.461 1343.49 509.461C1335.81 509.461 1329.05 506.669 1323.25 501.134L1323.23 501.115L1323.21 501.096C1317.71 495.254 1314.94 488.452 1314.94 480.73C1314.94 472.721 1317.7 465.905 1323.23 460.346L1323.24 460.337L1323.25 460.327C1329.05 454.792 1335.81 452 1343.49 452Z'
+        className='fill-neutral-900 dark:fill-white'
+      />
+      <defs>
+        <linearGradient
+          id='sim-logo-full-gradient'
+          x1='904.414'
+          y1='624.199'
+          x2='978.836'
+          y2='698.447'
+          gradientUnits='userSpaceOnUse'
+        >
+          <stop />
+          <stop offset='1' stopOpacity='0' />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

apps/docs/content/docs/de/mcp/deploy-workflows.mdx

@@ -17,7 +17,7 @@ MCP-Server gruppieren Ihre Workflow-Tools zusammen. Erstellen und verwalten Sie
   <Video src="mcp/mcp-server.mp4" width={700} height={450} />
 </div>
 
-1. Navigieren Sie zu **Einstellungen → Bereitgestellte MCPs**
+1. Navigieren Sie zu **Einstellungen → MCP-Server**
 2. Klicken Sie auf **Server erstellen**
 3. Geben Sie einen Namen und eine optionale Beschreibung ein
 4. Kopieren Sie die Server-URL zur Verwendung in Ihren MCP-Clients
@@ -79,7 +79,7 @@ Füge deinen API-Key-Header (`X-API-Key`) für authentifizierten Zugriff hinzu,
 
 ## Server-Verwaltung
 
-In der Server-Detailansicht unter **Einstellungen → Bereitgestellte MCPs** können Sie:
+In der Server-Detailansicht unter **Einstellungen → MCP-Server** können Sie:
 
 - **Tools anzeigen**: Alle Workflows sehen, die einem Server hinzugefügt wurden
 - **URL kopieren**: Die Server-URL für MCP-Clients abrufen

apps/docs/content/docs/de/mcp/index.mdx

@@ -27,7 +27,7 @@ MCP-Server stellen Sammlungen von Tools bereit, die Ihre Agenten nutzen können.
 </div>
 
 1. Navigieren Sie zu Ihren Workspace-Einstellungen
-2. Gehen Sie zum Abschnitt **Bereitgestellte MCPs**
+2. Gehen Sie zum Abschnitt **MCP-Server**
 3. Klicken Sie auf **MCP-Server hinzufügen**
 4. Geben Sie die Server-Konfigurationsdetails ein
 5. Speichern Sie die Konfiguration

apps/docs/content/docs/de/self-hosting/index.mdx

@@ -10,12 +10,20 @@ Stellen Sie Sim auf Ihrer eigenen Infrastruktur mit Docker oder Kubernetes berei
 
 ## Anforderungen
 
-| Ressource | Minimum | Empfohlen |
-|----------|---------|-------------|
-| CPU | 2 Kerne | 4+ Kerne |
-| RAM | 12 GB | 16+ GB |
-| Speicher | 20 GB SSD | 50+ GB SSD |
-| Docker | 20.10+ | Neueste Version |
+| Ressource | Klein | Standard | Produktion |
+|----------|-------|----------|------------|
+| CPU | 2 Kerne | 4 Kerne | 8+ Kerne |
+| RAM | 12 GB | 16 GB | 32+ GB |
+| Speicher | 20 GB SSD | 50 GB SSD | 100+ GB SSD |
+| Docker | 20.10+ | 20.10+ | Neueste Version |
+
+**Klein**: Entwicklung, Tests, Einzelnutzer (1-5 Nutzer)
+**Standard**: Teams (5-50 Nutzer), moderate Arbeitslasten
+**Produktion**: Große Teams (50+ Nutzer), Hochverfügbarkeit, intensive Workflow-Ausführung
+
+<Callout type="info">
+Die Ressourcenanforderungen werden durch Workflow-Ausführung (isolated-vm Sandboxing), Dateiverarbeitung (In-Memory-Dokumentenparsing) und Vektoroperationen (pgvector) bestimmt. Arbeitsspeicher ist typischerweise der limitierende Faktor, nicht CPU. Produktionsdaten zeigen, dass die Hauptanwendung durchschnittlich 4-8 GB und bei hoher Last bis zu 12 GB benötigt.
+</Callout>
 
 ## Schnellstart
 

apps/docs/content/docs/en/blocks/agent.mdx

@@ -56,6 +56,10 @@ Controls response randomness and creativity:
 - **Medium (0.3-0.7)**: Balanced creativity and focus. Good for general use.
 - **High (0.7-2.0)**: Creative and varied. Ideal for brainstorming and content generation.
 
+### Max Output Tokens
+
+Controls the maximum length of the model's response. For Anthropic models, Sim uses reliable defaults: streaming executions use the model's full capacity (e.g. 64,000 tokens for Claude 4.5), while non-streaming executions default to 8,192 to avoid timeout issues. For long-form content generation via API, explicitly set a higher value.
+
 ### API Key
 
 Your API key for the selected LLM provider. This is securely stored and used for authentication.

apps/docs/content/docs/en/copilot/index.mdx

@@ -5,45 +5,25 @@ title: Copilot
 import { Callout } from 'fumadocs-ui/components/callout'
 import { Card, Cards } from 'fumadocs-ui/components/card'
 import { Image } from '@/components/ui/image'
-import { MessageCircle, Package, Zap, Infinity as InfinityIcon, Brain, BrainCircuit } from 'lucide-react'
+import { MessageCircle, Hammer, Zap, Globe, Paperclip, History, RotateCcw, Brain } from 'lucide-react'
 
-Copilot is your in-editor assistant that helps you build and edit workflows with Sim Copilot, as well as understand and improve them. It can:
+Copilot is your in-editor assistant that helps you build and edit workflows. It can:
 
 - **Explain**: Answer questions about Sim and your current workflow
 - **Guide**: Suggest edits and best practices
-- **Edit**: Make changes to blocks, connections, and settings when you approve
+- **Build**: Add blocks, wire connections, and configure settings
+- **Debug**: Analyze execution issues and optimize performance
 
 <Callout type="info">
-  Copilot is a Sim-managed service. For self-hosted deployments, generate a Copilot API key in the hosted app (sim.ai → Settings → Copilot)
+  Copilot is a Sim-managed service. For self-hosted deployments:
   1. Go to [sim.ai](https://sim.ai) → Settings → Copilot and generate a Copilot API key
-  2. Set `COPILOT_API_KEY` in your self-hosted environment to that value
+  2. Set `COPILOT_API_KEY` in your self-hosted environment
 </Callout>
 
-## Context Menu (@)
-
-Use the `@` symbol to reference various resources and give Copilot more context about your workspace:
-
-<Image
-  src="/static/copilot/copilot-menu.png"
-  alt="Copilot context menu showing available reference options"
-  width={600}
-  height={400}
-/>
-
-The `@` menu provides access to:
-- **Chats**: Reference previous copilot conversations
-- **All workflows**: Reference any workflow in your workspace
-- **Workflow Blocks**: Reference specific blocks from workflows
-- **Blocks**: Reference block types and templates
-- **Knowledge**: Reference your uploaded documents and knowledgebase
-- **Docs**: Reference Sim documentation
-- **Templates**: Reference workflow templates
-- **Logs**: Reference execution logs and results
-
-This contextual information helps Copilot provide more accurate and relevant assistance for your specific use case.
-
 ## Modes
 
+Switch between modes using the mode selector at the bottom of the input area.
+
 <Cards>
   <Card
     title={
@@ -60,113 +40,153 @@ This contextual information helps Copilot provide more accurate and relevant ass
   <Card
     title={
       <span className="inline-flex items-center gap-2">
-        <Package className="h-4 w-4 text-muted-foreground" />
-        Agent
+        <Hammer className="h-4 w-4 text-muted-foreground" />
+        Build
       </span>
     }
   >
     <div className="m-0 text-sm">
-      Build-and-edit mode. Copilot proposes specific edits (add blocks, wire variables, tweak settings) and applies them when you approve.
+      Workflow building mode. Copilot can add blocks, wire connections, edit configurations, and debug issues.
     </div>
   </Card>
 </Cards>
 
-<div className="flex justify-center">
-  <Image
-    src="/static/copilot/copilot-mode.png"
-    alt="Copilot mode selection interface"
-    width={600}
-    height={400}
-    className="my-6"
-  />
-</div>
+## Models
 
-## Depth Levels
+Select your preferred AI model using the model selector at the bottom right of the input area.
 
-<Cards>
-  <Card
-    title={
-      <span className="inline-flex items-center gap-2">
-        <Zap className="h-4 w-4 text-muted-foreground" />
-        Fast
-      </span>
-    }
-  >
-    <div className="m-0 text-sm">Quickest and cheapest. Best for small edits, simple workflows, and minor tweaks.</div>
-  </Card>
-  <Card
-    title={
-      <span className="inline-flex items-center gap-2">
-        <InfinityIcon className="h-4 w-4 text-muted-foreground" />
-        Auto
-      </span>
-    }
-  >
-    <div className="m-0 text-sm">Balanced speed and reasoning. Recommended default for most tasks.</div>
-  </Card>
-  <Card
-    title={
-      <span className="inline-flex items-center gap-2">
-        <Brain className="h-4 w-4 text-muted-foreground" />
-        Advanced
-      </span>
-    }
-  >
-    <div className="m-0 text-sm">More reasoning for larger workflows and complex edits while staying performant.</div>
-  </Card>
-  <Card
-    title={
-      <span className="inline-flex items-center gap-2">
-        <BrainCircuit className="h-4 w-4 text-muted-foreground" />
-        Behemoth
-      </span>
-    }
-  >
-    <div className="m-0 text-sm">Maximum reasoning for deep planning, debugging, and complex architectural changes.</div>
-  </Card>
-</Cards>
+**Available Models:**
+- Claude 4.5 Opus, Sonnet (default), Haiku
+- GPT 5.2 Codex, Pro
+- Gemini 3 Pro
 
-### Mode Selection Interface
+Choose based on your needs: faster models for simple tasks, more capable models for complex workflows.
 
-You can easily switch between different reasoning modes using the mode selector in the Copilot interface:
+## Context Menu (@)
 
-<Image
-  src="/static/copilot/copilot-models.png"
-  alt="Copilot mode selection showing Advanced mode with MAX toggle"
-  width={600}
-  height={300}
-/>
+Use the `@` symbol to reference resources and give Copilot more context:
 
-The interface allows you to:
-- **Select reasoning level**: Choose from Fast, Auto, Advanced, or Behemoth
-- **Enable MAX mode**: Toggle for maximum reasoning capabilities when you need the most thorough analysis
-- **See mode descriptions**: Understand what each mode is optimized for
+| Reference | Description |
+|-----------|-------------|
+| **Chats** | Previous copilot conversations |
+| **Workflows** | Any workflow in your workspace |
+| **Workflow Blocks** | Blocks in the current workflow |
+| **Blocks** | Block types and templates |
+| **Knowledge** | Uploaded documents and knowledge bases |
+| **Docs** | Sim documentation |
+| **Templates** | Workflow templates |
+| **Logs** | Execution logs and results |
 
-Choose your mode based on the complexity of your task - use Fast for simple questions and Behemoth for complex architectural changes.
+Type `@` in the input field to open the context menu, then search or browse to find what you need.
 
-## Billing and Cost Calculation
+## Slash Commands (/)
 
-### How Costs Are Calculated
+Use slash commands for quick actions:
 
-Copilot usage is billed per token from the underlying LLM:
+| Command | Description |
+|---------|-------------|
+| `/fast` | Fast mode execution |
+| `/research` | Research and exploration mode |
+| `/actions` | Execute agent actions |
 
-- **Input tokens**: billed at the provider's base rate (**at-cost**)
-- **Output tokens**: billed at **1.5×** the provider's base output rate
+**Web Commands:**
 
-```javascript
-copilotCost = (inputTokens × inputPrice + outputTokens × (outputPrice × 1.5)) / 1,000,000
-```
+| Command | Description |
+|---------|-------------|
+| `/search` | Search the web |
+| `/read` | Read a specific URL |
+| `/scrape` | Scrape web page content |
+| `/crawl` | Crawl multiple pages |
 
-| Component | Rate Applied         |
-|----------|----------------------|
-| Input    | inputPrice           |
-| Output   | outputPrice × 1.5    |
+Type `/` in the input field to see available commands.
 
-<Callout type="warning">
-  Pricing shown reflects rates as of September 4, 2025. Check provider documentation for current pricing.
-</Callout>
+## Chat Management
+
+### Starting a New Chat
+
+Click the **+** button in the Copilot header to start a fresh conversation.
+
+### Chat History
+
+Click **History** to view previous conversations grouped by date. You can:
+- Click a chat to resume it
+- Delete chats you no longer need
+
+### Editing Messages
+
+Hover over any of your messages and click **Edit** to modify and resend it. This is useful for refining your prompts.
+
+### Message Queue
+
+If you send a message while Copilot is still responding, it gets queued. You can:
+- View queued messages in the expandable queue panel
+- Send a queued message immediately (aborts current response)
+- Remove messages from the queue
+
+## File Attachments
+
+Click the attachment icon to upload files with your message. Supported file types include:
+- Images (preview thumbnails shown)
+- PDFs
+- Text files, JSON, XML
+- Other document formats
+
+Files are displayed as clickable thumbnails that open in a new tab.
+
+## Checkpoints & Changes
+
+When Copilot makes changes to your workflow, it saves checkpoints so you can revert if needed.
+
+### Viewing Checkpoints
+
+Hover over a Copilot message and click the checkpoints icon to see saved workflow states for that message.
+
+### Reverting Changes
+
+Click **Revert** on any checkpoint to restore your workflow to that state. A confirmation dialog will warn that this action cannot be undone.
+
+### Accepting Changes
+
+When Copilot proposes changes, you can:
+- **Accept**: Apply the proposed changes (`Mod+Shift+Enter`)
+- **Reject**: Dismiss the changes and keep your current workflow
+
+## Thinking Blocks
+
+For complex requests, Copilot may show its reasoning process in expandable thinking blocks:
+
+- Blocks auto-expand while Copilot is thinking
+- Click to manually expand/collapse
+- Shows duration of the thinking process
+- Helps you understand how Copilot arrived at its solution
+
+## Options Selection
+
+When Copilot presents multiple options, you can select using:
+
+| Control | Action |
+|---------|--------|
+| **1-9** | Select option by number |
+| **Arrow Up/Down** | Navigate between options |
+| **Enter** | Select highlighted option |
+
+Selected options are highlighted; unselected options appear struck through.
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `@` | Open context menu |
+| `/` | Open slash commands |
+| `Arrow Up/Down` | Navigate menu items |
+| `Enter` | Select menu item |
+| `Esc` | Close menus |
+| `Mod+Shift+Enter` | Accept Copilot changes |
+
+## Usage Limits
+
+Copilot usage is billed per token from the underlying LLM. If you reach your usage limit, Copilot will prompt you to increase your limit. You can add usage in increments ($50, $100) from your current base.
 
 <Callout type="info">
-  Model prices are per million tokens. The calculation divides by 1,000,000 to get the actual cost. See <a href="/execution/costs">the Cost Calculation page</a> for background and examples.
+  See the [Cost Calculation page](/execution/costs) for billing details.
 </Callout>
-

apps/docs/content/docs/en/keyboard-shortcuts/index.mdx

@@ -34,6 +34,8 @@ Speed up your workflow building with these keyboard shortcuts and mouse controls
 | `Mod` + `V` | Paste blocks |
 | `Delete` or `Backspace` | Delete selected blocks or edges |
 | `Shift` + `L` | Auto-layout canvas |
+| `Mod` + `Shift` + `F` | Fit to view |
+| `Mod` + `Shift` + `Enter` | Accept Copilot changes |
 
 ## Panel Navigation
 

apps/docs/content/docs/en/mcp/deploy-workflows.mdx

@@ -16,7 +16,7 @@ MCP servers group your workflow tools together. Create and manage them in worksp
   <Video src="mcp/mcp-server.mp4" width={700} height={450} />
 </div>
 
-1. Navigate to **Settings → Deployed MCPs**
+1. Navigate to **Settings → MCP Servers**
 2. Click **Create Server**
 3. Enter a name and optional description
 4. Copy the server URL for use in your MCP clients
@@ -78,7 +78,7 @@ Include your API key header (`X-API-Key`) for authenticated access when using mc
 
 ## Server Management
 
-From the server detail view in **Settings → Deployed MCPs**, you can:
+From the server detail view in **Settings → MCP Servers**, you can:
 
 - **View tools**: See all workflows added to a server
 - **Copy URL**: Get the server URL for MCP clients

apps/docs/content/docs/en/mcp/index.mdx

@@ -27,7 +27,7 @@ MCP servers provide collections of tools that your agents can use. Configure the
 </div>
 
 1. Navigate to your workspace settings
-2. Go to the **Deployed MCPs** section
+2. Go to the **MCP Servers** section
 3. Click **Add MCP Server**
 4. Enter the server configuration details
 5. Save the configuration

apps/docs/content/docs/en/meta.json

@@ -3,6 +3,7 @@
   "pages": [
     "./introduction/index",
     "./getting-started/index",
+    "./quick-reference/index",
     "triggers",
     "blocks",
     "tools",

apps/docs/content/docs/en/quick-reference/index.mdx

@@ -0,0 +1,375 @@
+---
+title: Quick Reference
+description: Essential actions for navigating and using the Sim workflow editor
+---
+
+import { Callout } from 'fumadocs-ui/components/callout'
+import { ActionImage, ActionVideo } from '@/components/ui/action-media'
+
+A quick lookup for everyday actions in the Sim workflow editor. For keyboard shortcuts, see [Keyboard Shortcuts](/keyboard-shortcuts).
+
+<Callout type="info">
+  **Mod** refers to `Cmd` on macOS and `Ctrl` on Windows/Linux.
+</Callout>
+
+## Workspaces
+
+<table>
+  <thead>
+    <tr><th>Action</th><th>How</th><th>Preview</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Create a workspace</td>
+      <td>Click workspace dropdown → **New Workspace**</td>
+      <td><ActionVideo src="quick-reference/create-workspace.mp4" alt="Create workspace" /></td>
+    </tr>
+    <tr>
+      <td>Switch workspaces</td>
+      <td>Click workspace dropdown → Select workspace</td>
+      <td><ActionVideo src="quick-reference/switch-workspace.mp4" alt="Switch workspaces" /></td>
+    </tr>
+    <tr>
+      <td>Invite team members</td>
+      <td>Sidebar → **Invite**</td>
+      <td><ActionVideo src="quick-reference/invite.mp4" alt="Invite team members" /></td>
+    </tr>
+    <tr>
+      <td>Rename a workspace</td>
+      <td>Right-click workspace → **Rename**</td>
+      <td rowSpan={4}><ActionImage src="/static/quick-reference/workspace-context-menu.png" alt="Workspace context menu" /></td>
+    </tr>
+    <tr>
+      <td>Duplicate a workspace</td>
+      <td>Right-click workspace → **Duplicate**</td>
+    </tr>
+    <tr>
+      <td>Export a workspace</td>
+      <td>Right-click workspace → **Export**</td>
+    </tr>
+    <tr>
+      <td>Delete a workspace</td>
+      <td>Right-click workspace → **Delete**</td>
+    </tr>
+  </tbody>
+</table>
+
+## Workflows
+
+<table>
+  <thead>
+    <tr><th>Action</th><th>How</th><th>Preview</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Create a workflow</td>
+      <td>Click **+** button in sidebar</td>
+      <td><ActionImage src="/static/quick-reference/create-workflow.png" alt="Create workflow" /></td>
+    </tr>
+    <tr>
+      <td>Reorder / move workflows</td>
+      <td>Drag workflow up/down or onto a folder</td>
+      <td><ActionVideo src="quick-reference/reordering.mp4" alt="Reorder workflows" /></td>
+    </tr>
+    <tr>
+      <td>Import a workflow</td>
+      <td>Click import button in sidebar → Select file</td>
+      <td><ActionImage src="/static/quick-reference/import-workflow.png" alt="Import workflow" /></td>
+    </tr>
+    <tr>
+      <td>Multi-select workflows</td>
+      <td>`Mod+Click` or `Shift+Click` workflows in sidebar</td>
+      <td><ActionVideo src="quick-reference/multiselect.mp4" alt="Multi-select workflows" /></td>
+    </tr>
+    <tr>
+      <td>Open in new tab</td>
+      <td>Right-click workflow → **Open in New Tab**</td>
+      <td rowSpan={6}><ActionImage src="/static/quick-reference/workflow-context-menu.png" alt="Workflow context menu" /></td>
+    </tr>
+    <tr>
+      <td>Rename a workflow</td>
+      <td>Right-click workflow → **Rename**</td>
+    </tr>
+    <tr>
+      <td>Assign workflow color</td>
+      <td>Right-click workflow → **Change Color**</td>
+    </tr>
+    <tr>
+      <td>Duplicate a workflow</td>
+      <td>Right-click workflow → **Duplicate**</td>
+    </tr>
+    <tr>
+      <td>Export a workflow</td>
+      <td>Right-click workflow → **Export**</td>
+    </tr>
+    <tr>
+      <td>Delete a workflow</td>
+      <td>Right-click workflow → **Delete**</td>
+    </tr>
+    <tr>
+      <td>Rename a folder</td>
+      <td>Right-click folder → **Rename**</td>
+      <td rowSpan={6}><ActionImage src="/static/quick-reference/folder-context-menu.png" alt="Folder context menu" /></td>
+    </tr>
+    <tr>
+      <td>Create workflow in folder</td>
+      <td>Right-click folder → **Create workflow**</td>
+    </tr>
+    <tr>
+      <td>Create folder in folder</td>
+      <td>Right-click folder → **Create folder**</td>
+    </tr>
+    <tr>
+      <td>Duplicate a folder</td>
+      <td>Right-click folder → **Duplicate**</td>
+    </tr>
+    <tr>
+      <td>Export a folder</td>
+      <td>Right-click folder → **Export**</td>
+    </tr>
+    <tr>
+      <td>Delete a folder</td>
+      <td>Right-click folder → **Delete**</td>
+    </tr>
+  </tbody>
+</table>
+
+## Blocks
+
+<table>
+  <thead>
+    <tr><th>Action</th><th>How</th><th>Preview</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Add a block</td>
+      <td>Drag from Toolbar panel, or right-click canvas → **Add Block**</td>
+      <td><ActionVideo src="quick-reference/add-block.mp4" alt="Add a block" /></td>
+    </tr>
+    <tr>
+      <td>Multi-select blocks</td>
+      <td>`Mod+Click` additional blocks, or shift-drag to draw selection box</td>
+      <td><ActionVideo src="quick-reference/multiselect-blocks.mp4" alt="Multi-select blocks" /></td>
+    </tr>
+    <tr>
+      <td>Copy blocks</td>
+      <td>`Mod+C` with blocks selected</td>
+      <td rowSpan={2}><ActionVideo src="quick-reference/copy-paste.mp4" alt="Copy and paste blocks" /></td>
+    </tr>
+    <tr>
+      <td>Paste blocks</td>
+      <td>`Mod+V` to paste copied blocks</td>
+    </tr>
+    <tr>
+      <td>Duplicate blocks</td>
+      <td>Right-click → **Duplicate**</td>
+      <td><ActionVideo src="quick-reference/duplicate-block.mp4" alt="Duplicate blocks" /></td>
+    </tr>
+    <tr>
+      <td>Delete blocks</td>
+      <td>`Delete` or `Backspace` key, or right-click → **Delete**</td>
+      <td><ActionImage src="/static/quick-reference/delete-block.png" alt="Delete block" /></td>
+    </tr>
+    <tr>
+      <td>Rename a block</td>
+      <td>Click block name in header, or edit in the Editor panel</td>
+      <td><ActionVideo src="quick-reference/rename-block.mp4" alt="Rename a block" /></td>
+    </tr>
+    <tr>
+      <td>Enable/Disable a block</td>
+      <td>Right-click → **Enable/Disable**</td>
+      <td><ActionImage src="/static/quick-reference/disable-block.png" alt="Disable block" /></td>
+    </tr>
+    <tr>
+      <td>Toggle handle orientation</td>
+      <td>Right-click → **Toggle Handles**</td>
+      <td><ActionVideo src="quick-reference/toggle-handles.mp4" alt="Toggle handle orientation" /></td>
+    </tr>
+    <tr>
+      <td>Configure a block</td>
+      <td>Select block → use Editor panel on right</td>
+      <td><ActionVideo src="quick-reference/configure-block.mp4" alt="Configure a block" /></td>
+    </tr>
+  </tbody>
+</table>
+
+## Connections
+
+<table>
+  <thead>
+    <tr><th>Action</th><th>How</th><th>Preview</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Create a connection</td>
+      <td>Drag from output handle to input handle</td>
+      <td><ActionVideo src="quick-reference/connect-blocks.mp4" alt="Connect blocks" /></td>
+    </tr>
+    <tr>
+      <td>Delete a connection</td>
+      <td>Click edge to select → `Delete` key</td>
+      <td><ActionVideo src="quick-reference/delete-connection.mp4" alt="Delete connection" /></td>
+    </tr>
+    <tr>
+      <td>Use output in another block</td>
+      <td>Drag connection tag into input field</td>
+      <td><ActionVideo src="quick-reference/connection-tag.mp4" alt="Use connection tag" /></td>
+    </tr>
+  </tbody>
+</table>
+
+## Panels & Views
+
+<table>
+  <thead>
+    <tr><th>Action</th><th>How</th><th>Preview</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Search toolbar</td>
+      <td>`Mod+F`</td>
+      <td><ActionVideo src="quick-reference/search-toolbar.mp4" alt="Search toolbar" /></td>
+    </tr>
+    <tr>
+      <td>Search everything</td>
+      <td>`Mod+K`</td>
+      <td><ActionImage src="/static/quick-reference/search-everything.png" alt="Search everything" /></td>
+    </tr>
+    <tr>
+      <td>Toggle manual mode</td>
+      <td>Click toggle button to switch between manual and selector</td>
+      <td><ActionImage src="/static/quick-reference/toggle-manual-mode.png" alt="Toggle manual mode" /></td>
+    </tr>
+    <tr>
+      <td>Collapse/expand sidebar</td>
+      <td>Click collapse button on sidebar</td>
+      <td><ActionVideo src="quick-reference/collapse-sidebar.mp4" alt="Collapse sidebar" /></td>
+    </tr>
+  </tbody>
+</table>
+
+## Running & Testing
+
+<table>
+  <thead>
+    <tr><th>Action</th><th>How</th><th>Preview</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Run workflow</td>
+      <td>Click Run Workflow button or `Mod+Enter`</td>
+      <td><ActionImage src="/static/quick-reference/run-workflow.png" alt="Run workflow" /></td>
+    </tr>
+    <tr>
+      <td>Stop workflow</td>
+      <td>Click Stop button or `Mod+Enter` while running</td>
+      <td><ActionImage src="/static/quick-reference/stop-workflow.png" alt="Stop workflow" /></td>
+    </tr>
+    <tr>
+      <td>Test with chat</td>
+      <td>Use Chat panel on the right side</td>
+      <td><ActionImage src="/static/quick-reference/test-chat.png" alt="Test with chat" /></td>
+    </tr>
+    <tr>
+      <td>Select output to view</td>
+      <td>Click dropdown in Chat panel → Select block output</td>
+      <td><ActionImage src="/static/quick-reference/output-select.png" alt="Select output to view" /></td>
+    </tr>
+    <tr>
+      <td>Clear chat history</td>
+      <td>Click clear button in Chat panel</td>
+      <td><ActionImage src="/static/quick-reference/clear-chat.png" alt="Clear chat history" /></td>
+    </tr>
+    <tr>
+      <td>View execution logs</td>
+      <td>Open terminal panel at bottom, or `Mod+L`</td>
+      <td><ActionImage src="/static/quick-reference/terminal.png" alt="Execution logs terminal" /></td>
+    </tr>
+    <tr>
+      <td>Filter logs by block or status</td>
+      <td>Click block filter in terminal or right-click log entry → **Filter by Block** or **Filter by Status**</td>
+      <td><ActionImage src="/static/quick-reference/filter-block.png" alt="Filter logs by block" /></td>
+    </tr>
+    <tr>
+      <td>Search logs</td>
+      <td>Use search field in terminal or right-click log entry → **Search**</td>
+      <td><ActionImage src="/static/quick-reference/terminal-search.png" alt="Search logs" /></td>
+    </tr>
+    <tr>
+      <td>Copy log entry</td>
+      <td>Clipboard Icon or Right-click log entry → **Copy**</td>
+      <td><ActionImage src="/static/quick-reference/copy-log.png" alt="Copy log entry" /></td>
+    </tr>
+    <tr>
+      <td>Clear terminal</td>
+      <td>Trash icon or `Mod+D`</td>
+      <td><ActionImage src="/static/quick-reference/clear-terminal.png" alt="Clear terminal" /></td>
+    </tr>
+  </tbody>
+</table>
+
+## Deployment
+
+<table>
+  <thead>
+    <tr><th>Action</th><th>How</th><th>Preview</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Deploy a workflow</td>
+      <td>Click **Deploy** button in panel</td>
+      <td><ActionImage src="/static/quick-reference/deploy.png" alt="Deploy workflow" /></td>
+    </tr>
+    <tr>
+      <td>Update deployment</td>
+      <td>Click **Update** when changes are detected</td>
+      <td><ActionImage src="/static/quick-reference/update-deployment.png" alt="Update deployment" /></td>
+    </tr>
+    <tr>
+      <td>View deployment status</td>
+      <td>Check status indicator (Live/Update/Deploy) in Deploy tab</td>
+      <td><ActionImage src="/static/quick-reference/view-deployment.png" alt="View deployment status" /></td>
+    </tr>
+    <tr>
+      <td>Revert deployment</td>
+      <td>Access previous versions in Deploy tab → **Promote to live**</td>
+      <td><ActionImage src="/static/quick-reference/promote-deployment.png" alt="Promote deployment to live" /></td>
+    </tr>
+    <tr>
+      <td>Copy API endpoint</td>
+      <td>Deploy tab → API → Copy API cURL</td>
+      <td><ActionImage src="/static/quick-reference/copy-api.png" alt="Copy API endpoint" /></td>
+    </tr>
+  </tbody>
+</table>
+
+## Variables
+
+<table>
+  <thead>
+    <tr><th>Action</th><th>How</th><th>Preview</th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Add / Edit / Delete workflow variable</td>
+      <td>Panel -> Variables -> **Add Variable**, click to edit, or delete icon</td>
+      <td><ActionImage src="/static/quick-reference/variables.png" alt="Variables panel" /></td>
+    </tr>
+    <tr>
+      <td>Add environment variable</td>
+      <td>Settings → **Environment Variables** → **Add**</td>
+      <td><ActionImage src="/static/quick-reference/add-env-variable.png" alt="Add environment variable" /></td>
+    </tr>
+    <tr>
+      <td>Reference a workflow variable</td>
+      <td>Use `<blockName.itemName>` syntax in block inputs</td>
+      <td><ActionImage src="/static/quick-reference/variable-reference.png" alt="Reference workflow variable" /></td>
+    </tr>
+    <tr>
+      <td>Reference an environment variable</td>
+      <td>Use `{{ENV_VAR}}` syntax in block inputs</td>
+      <td><ActionImage src="/static/quick-reference/env-variable-reference.png" alt="Reference environment variable" /></td>
+    </tr>
+  </tbody>
+</table>
+

apps/docs/content/docs/en/self-hosting/index.mdx

@@ -16,12 +16,20 @@ Deploy Sim on your own infrastructure with Docker or Kubernetes.
 
 ## Requirements
 
-| Resource | Minimum | Recommended |
-|----------|---------|-------------|
-| CPU | 2 cores | 4+ cores |
-| RAM | 12 GB | 16+ GB |
-| Storage | 20 GB SSD | 50+ GB SSD |
-| Docker | 20.10+ | Latest |
+| Resource | Small | Standard | Production |
+|----------|-------|----------|------------|
+| CPU | 2 cores | 4 cores | 8+ cores |
+| RAM | 12 GB | 16 GB | 32+ GB |
+| Storage | 20 GB SSD | 50 GB SSD | 100+ GB SSD |
+| Docker | 20.10+ | 20.10+ | Latest |
+
+**Small**: Development, testing, single user (1-5 users)
+**Standard**: Teams (5-50 users), moderate workloads
+**Production**: Large teams (50+ users), high availability, heavy workflow execution
+
+<Callout type="info">
+Resource requirements are driven by workflow execution (isolated-vm sandboxing), file processing (in-memory document parsing), and vector operations (pgvector). Memory is typically the constraining factor rather than CPU. Production telemetry shows the main app uses 4-8 GB average with peaks up to 12 GB under heavy load.
+</Callout>
 
 ## Quick Start
 

apps/docs/content/docs/es/mcp/deploy-workflows.mdx

@@ -17,7 +17,7 @@ Los servidores MCP agrupan tus herramientas de flujo de trabajo. Créalos y gest
   <Video src="mcp/mcp-server.mp4" width={700} height={450} />
 </div>
 
-1. Navega a **Configuración → MCP implementados**
+1. Navega a **Configuración → Servidores MCP**
 2. Haz clic en **Crear servidor**
 3. Introduce un nombre y una descripción opcional
 4. Copia la URL del servidor para usarla en tus clientes MCP
@@ -79,7 +79,7 @@ Incluye tu encabezado de clave API (`X-API-Key`) para acceso autenticado al usar
 
 ## Gestión del servidor
 
-Desde la vista de detalles del servidor en **Configuración → MCP implementados**, puedes:
+Desde la vista de detalles del servidor en **Configuración → Servidores MCP**, puedes:
 
 - **Ver herramientas**: consulta todos los flujos de trabajo añadidos a un servidor
 - **Copiar URL**: obtén la URL del servidor para clientes MCP

apps/docs/content/docs/es/mcp/index.mdx

@@ -27,7 +27,7 @@ Los servidores MCP proporcionan colecciones de herramientas que tus agentes pued
 </div>
 
 1. Navega a la configuración de tu espacio de trabajo
-2. Ve a la sección **MCP implementados**
+2. Ve a la sección **Servidores MCP**
 3. Haz clic en **Añadir servidor MCP**
 4. Introduce los detalles de configuración del servidor
 5. Guarda la configuración

apps/docs/content/docs/es/self-hosting/index.mdx

@@ -10,12 +10,20 @@ Despliega Sim en tu propia infraestructura con Docker o Kubernetes.
 
 ## Requisitos
 
-| Recurso | Mínimo | Recomendado |
-|----------|---------|-------------|
-| CPU | 2 núcleos | 4+ núcleos |
-| RAM | 12 GB | 16+ GB |
-| Almacenamiento | 20 GB SSD | 50+ GB SSD |
-| Docker | 20.10+ | Última versión |
+| Recurso | Pequeño | Estándar | Producción |
+|----------|---------|----------|------------|
+| CPU | 2 núcleos | 4 núcleos | 8+ núcleos |
+| RAM | 12 GB | 16 GB | 32+ GB |
+| Almacenamiento | 20 GB SSD | 50 GB SSD | 100+ GB SSD |
+| Docker | 20.10+ | 20.10+ | Última versión |
+
+**Pequeño**: Desarrollo, pruebas, usuario único (1-5 usuarios)
+**Estándar**: Equipos (5-50 usuarios), cargas de trabajo moderadas
+**Producción**: Equipos grandes (50+ usuarios), alta disponibilidad, ejecución intensiva de workflows
+
+<Callout type="info">
+Los requisitos de recursos están determinados por la ejecución de workflows (sandboxing isolated-vm), procesamiento de archivos (análisis de documentos en memoria) y operaciones vectoriales (pgvector). La memoria suele ser el factor limitante, no la CPU. La telemetría de producción muestra que la aplicación principal usa 4-8 GB en promedio con picos de hasta 12 GB bajo carga pesada.
+</Callout>
 
 ## Inicio rápido
 

apps/docs/content/docs/fr/mcp/deploy-workflows.mdx

@@ -17,7 +17,7 @@ Les serveurs MCP regroupent vos outils de workflow. Créez-les et gérez-les dan
   <Video src="mcp/mcp-server.mp4" width={700} height={450} />
 </div>
 
-1. Accédez à **Paramètres → MCP déployés**
+1. Accédez à **Paramètres → Serveurs MCP**
 2. Cliquez sur **Créer un serveur**
 3. Saisissez un nom et une description facultative
 4. Copiez l'URL du serveur pour l'utiliser dans vos clients MCP
@@ -79,7 +79,7 @@ Incluez votre en-tête de clé API (`X-API-Key`) pour un accès authentifié lor
 
 ## Gestion du serveur
 
-Depuis la vue détaillée du serveur dans **Paramètres → MCP déployés**, vous pouvez :
+Depuis la vue détaillée du serveur dans **Paramètres → Serveurs MCP**, vous pouvez :
 
 - **Voir les outils** : voir tous les workflows ajoutés à un serveur
 - **Copier l'URL** : obtenir l'URL du serveur pour les clients MCP

apps/docs/content/docs/fr/mcp/index.mdx

@@ -28,7 +28,7 @@ Les serveurs MCP fournissent des collections d'outils que vos agents peuvent uti
 </div>
 
 1. Accédez aux paramètres de votre espace de travail
-2. Allez dans la section **MCP déployés**
+2. Allez dans la section **Serveurs MCP**
 3. Cliquez sur **Ajouter un serveur MCP**
 4. Saisissez les détails de configuration du serveur
 5. Enregistrez la configuration

apps/docs/content/docs/fr/self-hosting/index.mdx

@@ -10,12 +10,20 @@ Déployez Sim sur votre propre infrastructure avec Docker ou Kubernetes.
 
 ## Prérequis
 
-| Ressource | Minimum | Recommandé |
-|----------|---------|-------------|
-| CPU | 2 cœurs | 4+ cœurs |
-| RAM | 12 Go | 16+ Go |
-| Stockage | 20 Go SSD | 50+ Go SSD |
-| Docker | 20.10+ | Dernière version |
+| Ressource | Petit | Standard | Production |
+|----------|-------|----------|------------|
+| CPU | 2 cœurs | 4 cœurs | 8+ cœurs |
+| RAM | 12 Go | 16 Go | 32+ Go |
+| Stockage | 20 Go SSD | 50 Go SSD | 100+ Go SSD |
+| Docker | 20.10+ | 20.10+ | Dernière version |
+
+**Petit** : Développement, tests, utilisateur unique (1-5 utilisateurs)
+**Standard** : Équipes (5-50 utilisateurs), charges de travail modérées
+**Production** : Grandes équipes (50+ utilisateurs), haute disponibilité, exécution intensive de workflows
+
+<Callout type="info">
+Les besoins en ressources sont déterminés par l'exécution des workflows (sandboxing isolated-vm), le traitement des fichiers (analyse de documents en mémoire) et les opérations vectorielles (pgvector). La mémoire est généralement le facteur limitant, pas le CPU. La télémétrie de production montre que l'application principale utilise 4-8 Go en moyenne avec des pics jusqu'à 12 Go sous forte charge.
+</Callout>
 
 ## Démarrage rapide
 

apps/docs/content/docs/ja/mcp/deploy-workflows.mdx

@@ -16,7 +16,7 @@ MCPサーバーは、ワークフローツールをまとめてグループ化
   <Video src="mcp/mcp-server.mp4" width={700} height={450} />
 </div>
 
-1. **設定 → デプロイ済みMCP**に移動します
+1. **設定 → MCP サーバー**に移動します
 2. **サーバーを作成**をクリックします
 3. 名前とオプションの説明を入力します
 4. MCPクライアントで使用するためにサーバーURLをコピーします
@@ -78,7 +78,7 @@ mcp-remoteまたは他のHTTPベースのMCPトランスポートを使用する
 
 ## サーバー管理
 
-**設定 → デプロイ済みMCP**のサーバー詳細ビューから、次のことができます:
+**設定 → MCP サーバー**のサーバー詳細ビューから、次のことができます:
 
 - **ツールを表示**: サーバーに追加されたすべてのワークフローを確認
 - **URLをコピー**: MCPクライアント用のサーバーURLを取得

apps/docs/content/docs/ja/mcp/index.mdx

@@ -27,7 +27,7 @@ MCPサーバーはエージェントが使用できるツールのコレクシ
 </div>
 
 1. ワークスペース設定に移動します
-2. **デプロイ済みMCP**セクションに移動します
+2. **MCP サーバー**セクションに移動します
 3. **MCPサーバーを追加**をクリックします
 4. サーバー設定の詳細を入力します
 5. 設定を保存します

apps/docs/content/docs/ja/self-hosting/index.mdx

@@ -10,12 +10,20 @@ DockerまたはKubernetesを使用して、自社のインフラストラクチ
 
 ## 要件
 
-| リソース | 最小 | 推奨 |
-|----------|---------|-------------|
-| CPU | 2コア | 4+コア |
-| RAM | 12 GB | 16+ GB |
-| ストレージ | 20 GB SSD | 50+ GB SSD |
-| Docker | 20.10+ | 最新版 |
+| リソース | スモール | スタンダード | プロダクション |
+|----------|---------|-------------|----------------|
+| CPU | 2コア | 4コア | 8+コア |
+| RAM | 12 GB | 16 GB | 32+ GB |
+| ストレージ | 20 GB SSD | 50 GB SSD | 100+ GB SSD |
+| Docker | 20.10+ | 20.10+ | 最新版 |
+
+**スモール**: 開発、テスト、シングルユーザー（1-5ユーザー）
+**スタンダード**: チーム（5-50ユーザー）、中程度のワークロード
+**プロダクション**: 大規模チーム（50+ユーザー）、高可用性、高負荷ワークフロー実行
+
+<Callout type="info">
+リソース要件は、ワークフロー実行（isolated-vmサンドボックス）、ファイル処理（メモリ内ドキュメント解析）、ベクトル演算（pgvector）によって決まります。CPUよりもメモリが制約要因となることが多いです。本番環境のテレメトリによると、メインアプリは平均4-8 GB、高負荷時は最大12 GBを使用します。
+</Callout>
 
 ## クイックスタート
 

apps/docs/content/docs/zh/mcp/deploy-workflows.mdx

@@ -16,7 +16,7 @@ MCP 服务器用于将您的工作流工具进行分组。您可以在工作区
   <Video src="mcp/mcp-server.mp4" width={700} height={450} />
 </div>
 
-1. 进入 **设置 → 已部署的 MCPs**
+1. 进入 **设置 → MCP 服务器**
 2. 点击 **创建服务器**
 3. 输入名称和可选描述
 4. 复制服务器 URL 以在你的 MCP 客户端中使用
@@ -78,7 +78,7 @@ MCP 服务器用于将您的工作流工具进行分组。您可以在工作区
 
 ## 服务器管理
 
-在 **设置 → 已部署的 MCPs** 的服务器详情页，你可以：
+在 **设置 → MCP 服务器** 的服务器详情页，你可以：
 
 - **查看工具**：查看添加到服务器的所有工作流
 - **复制 URL**：获取 MCP 客户端的服务器 URL

apps/docs/content/docs/zh/mcp/index.mdx

@@ -27,7 +27,7 @@ MCP 服务器提供工具集合，供您的代理使用。您可以在工作区
 </div>
 
 1. 进入您的工作区设置
-2. 前往 **Deployed MCPs** 部分
+2. 前往 **MCP Servers** 部分
 3. 点击 **Add MCP Server**
 4. 输入服务器配置信息
 5. 保存配置

apps/docs/content/docs/zh/self-hosting/index.mdx

@@ -10,12 +10,20 @@ import { Callout } from 'fumadocs-ui/components/callout'
 
 ## 要求
 
-| 资源 | 最低要求 | 推荐配置 |
-|----------|---------|-------------|
-| CPU | 2 核 | 4 核及以上 |
-| 内存 | 12 GB | 16 GB 及以上 |
-| 存储 | 20 GB SSD | 50 GB 及以上 SSD |
-| Docker | 20.10+ | 最新版本 |
+| 资源 | 小型 | 标准 | 生产环境 |
+|----------|------|------|----------|
+| CPU | 2 核 | 4 核 | 8+ 核 |
+| 内存 | 12 GB | 16 GB | 32+ GB |
+| 存储 | 20 GB SSD | 50 GB SSD | 100+ GB SSD |
+| Docker | 20.10+ | 20.10+ | 最新版本 |
+
+**小型**: 开发、测试、单用户（1-5 用户）
+**标准**: 团队（5-50 用户）、中等工作负载
+**生产环境**: 大型团队（50+ 用户）、高可用性、密集工作流执行
+
+<Callout type="info">
+资源需求由工作流执行（isolated-vm 沙箱）、文件处理（内存中文档解析）和向量运算（pgvector）决定。内存通常是限制因素，而不是 CPU。生产遥测数据显示，主应用平均使用 4-8 GB，高负载时峰值可达 12 GB。
+</Callout>
 
 ## 快速开始
 

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

@@ -8,6 +8,7 @@ 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 { formatLiteralForCode } from '@/executor/utils/code-formatting'
 import {
   createEnvVarPattern,
   createWorkflowVariablePattern,
@@ -387,7 +388,12 @@ function resolveWorkflowVariables(
       if (type === 'number') {
         variableValue = Number(variableValue)
       } else if (type === 'boolean') {
-        variableValue = variableValue === 'true' || variableValue === true
+        if (typeof variableValue === 'boolean') {
+          // Already a boolean, keep as-is
+        } else {
+          const normalized = String(variableValue).toLowerCase().trim()
+          variableValue = normalized === 'true'
+        }
       } else if (type === 'json' && typeof variableValue === 'string') {
         try {
           variableValue = JSON.parse(variableValue)
@@ -687,11 +693,7 @@ 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)) {
-          if (v === undefined) {
-            prologue += `const ${k} = undefined;\n`
-          } else {
-            prologue += `const ${k} = JSON.parse(${JSON.stringify(JSON.stringify(v))});\n`
-          }
+          prologue += `const ${k} = ${formatLiteralForCode(v, 'javascript')};\n`
           prologueLineCount++
         }
 
@@ -762,11 +764,7 @@ 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)) {
-        if (v === undefined) {
-          prologue += `${k} = None\n`
-        } else {
-          prologue += `${k} = json.loads(${JSON.stringify(JSON.stringify(v))})\n`
-        }
+        prologue += `${k} = ${formatLiteralForCode(v, 'python')}\n`
         prologueLineCount++
       }
       const wrapped = [

apps/sim/app/api/knowledge/route.test.ts

@@ -16,6 +16,10 @@ mockKnowledgeSchemas()
 mockDrizzleOrm()
 mockConsoleLogger()
 
+vi.mock('@/lib/workspaces/permissions/utils', () => ({
+  getUserEntityPermissions: vi.fn().mockResolvedValue({ role: 'owner' }),
+}))
+
 describe('Knowledge Base API Route', () => {
   const mockAuth$ = mockAuth()
 
@@ -86,6 +90,7 @@ describe('Knowledge Base API Route', () => {
     const validKnowledgeBaseData = {
       name: 'Test Knowledge Base',
       description: 'Test description',
+      workspaceId: 'test-workspace-id',
       chunkingConfig: {
         maxSize: 1024,
         minSize: 100,
@@ -133,11 +138,25 @@ describe('Knowledge Base API Route', () => {
       expect(data.details).toBeDefined()
     })
 
+    it('should require workspaceId', async () => {
+      mockAuth$.mockAuthenticatedUser()
+
+      const req = createMockRequest('POST', { name: 'Test KB' })
+      const { POST } = await import('@/app/api/knowledge/route')
+      const response = await POST(req)
+      const data = await response.json()
+
+      expect(response.status).toBe(400)
+      expect(data.error).toBe('Invalid request data')
+      expect(data.details).toBeDefined()
+    })
+
     it('should validate chunking config constraints', async () => {
       mockAuth$.mockAuthenticatedUser()
 
       const invalidData = {
         name: 'Test KB',
+        workspaceId: 'test-workspace-id',
         chunkingConfig: {
           maxSize: 100, // 100 tokens = 400 characters
           minSize: 500, // Invalid: minSize (500 chars) > maxSize (400 chars)
@@ -157,7 +176,7 @@ describe('Knowledge Base API Route', () => {
     it('should use default values for optional fields', async () => {
       mockAuth$.mockAuthenticatedUser()
 
-      const minimalData = { name: 'Test KB' }
+      const minimalData = { name: 'Test KB', workspaceId: 'test-workspace-id' }
       const req = createMockRequest('POST', minimalData)
       const { POST } = await import('@/app/api/knowledge/route')
       const response = await POST(req)

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

@@ -19,7 +19,7 @@ const logger = createLogger('KnowledgeBaseAPI')
 const CreateKnowledgeBaseSchema = z.object({
   name: z.string().min(1, 'Name is required'),
   description: z.string().optional(),
-  workspaceId: z.string().optional(),
+  workspaceId: z.string().min(1, 'Workspace ID is required'),
   embeddingModel: z.literal('text-embedding-3-small').default('text-embedding-3-small'),
   embeddingDimension: z.literal(1536).default(1536),
   chunkingConfig: z

apps/sim/app/api/knowledge/search/utils.test.ts

@@ -408,6 +408,7 @@ describe('Knowledge Search Utils', () => {
             input: ['test query'],
             model: 'text-embedding-3-small',
             encoding_format: 'float',
+            dimensions: 1536,
           }),
         })
       )

apps/sim/app/api/organizations/[id]/workspaces/route.ts

@@ -1,204 +0,0 @@
-import { db } from '@sim/db'
-import { member, permissions, user, workspace } from '@sim/db/schema'
-import { createLogger } from '@sim/logger'
-import { and, eq, or } from 'drizzle-orm'
-import { type NextRequest, NextResponse } from 'next/server'
-import { getSession } from '@/lib/auth'
-
-const logger = createLogger('OrganizationWorkspacesAPI')
-
-/**
- * GET /api/organizations/[id]/workspaces
- * Get workspaces related to the organization with optional filtering
- * Query parameters:
- * - ?available=true - Only workspaces where user can invite others (admin permissions)
- * - ?member=userId - Workspaces where specific member has access
- */
-export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
-  try {
-    const session = await getSession()
-
-    if (!session?.user?.id) {
-      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
-    }
-
-    const { id: organizationId } = await params
-    const url = new URL(request.url)
-    const availableOnly = url.searchParams.get('available') === 'true'
-    const memberId = url.searchParams.get('member')
-
-    // Verify user is a member of this organization
-    const memberEntry = await db
-      .select()
-      .from(member)
-      .where(and(eq(member.organizationId, organizationId), eq(member.userId, session.user.id)))
-      .limit(1)
-
-    if (memberEntry.length === 0) {
-      return NextResponse.json(
-        {
-          error: 'Forbidden - Not a member of this organization',
-        },
-        { status: 403 }
-      )
-    }
-
-    const userRole = memberEntry[0].role
-    const hasAdminAccess = ['owner', 'admin'].includes(userRole)
-
-    if (availableOnly) {
-      // Get workspaces where user has admin permissions (can invite others)
-      const availableWorkspaces = await db
-        .select({
-          id: workspace.id,
-          name: workspace.name,
-          ownerId: workspace.ownerId,
-          createdAt: workspace.createdAt,
-          isOwner: eq(workspace.ownerId, session.user.id),
-          permissionType: permissions.permissionType,
-        })
-        .from(workspace)
-        .leftJoin(
-          permissions,
-          and(
-            eq(permissions.entityType, 'workspace'),
-            eq(permissions.entityId, workspace.id),
-            eq(permissions.userId, session.user.id)
-          )
-        )
-        .where(
-          or(
-            // User owns the workspace
-            eq(workspace.ownerId, session.user.id),
-            // User has admin permission on the workspace
-            and(
-              eq(permissions.userId, session.user.id),
-              eq(permissions.entityType, 'workspace'),
-              eq(permissions.permissionType, 'admin')
-            )
-          )
-        )
-
-      // Filter and format the results
-      const workspacesWithInvitePermission = availableWorkspaces
-        .filter((workspace) => {
-          // Include if user owns the workspace OR has admin permission
-          return workspace.isOwner || workspace.permissionType === 'admin'
-        })
-        .map((workspace) => ({
-          id: workspace.id,
-          name: workspace.name,
-          isOwner: workspace.isOwner,
-          canInvite: true, // All returned workspaces have invite permission
-          createdAt: workspace.createdAt,
-        }))
-
-      logger.info('Retrieved available workspaces for organization member', {
-        organizationId,
-        userId: session.user.id,
-        workspaceCount: workspacesWithInvitePermission.length,
-      })
-
-      return NextResponse.json({
-        success: true,
-        data: {
-          workspaces: workspacesWithInvitePermission,
-          totalCount: workspacesWithInvitePermission.length,
-          filter: 'available',
-        },
-      })
-    }
-
-    if (memberId && hasAdminAccess) {
-      // Get workspaces where specific member has access (admin only)
-      const memberWorkspaces = await db
-        .select({
-          id: workspace.id,
-          name: workspace.name,
-          ownerId: workspace.ownerId,
-          isOwner: eq(workspace.ownerId, memberId),
-          permissionType: permissions.permissionType,
-          createdAt: permissions.createdAt,
-        })
-        .from(workspace)
-        .leftJoin(
-          permissions,
-          and(
-            eq(permissions.entityType, 'workspace'),
-            eq(permissions.entityId, workspace.id),
-            eq(permissions.userId, memberId)
-          )
-        )
-        .where(
-          or(
-            // Member owns the workspace
-            eq(workspace.ownerId, memberId),
-            // Member has permissions on the workspace
-            and(eq(permissions.userId, memberId), eq(permissions.entityType, 'workspace'))
-          )
-        )
-
-      const formattedWorkspaces = memberWorkspaces.map((workspace) => ({
-        id: workspace.id,
-        name: workspace.name,
-        isOwner: workspace.isOwner,
-        permission: workspace.permissionType,
-        joinedAt: workspace.createdAt,
-        createdAt: workspace.createdAt,
-      }))
-
-      return NextResponse.json({
-        success: true,
-        data: {
-          workspaces: formattedWorkspaces,
-          totalCount: formattedWorkspaces.length,
-          filter: 'member',
-          memberId,
-        },
-      })
-    }
-
-    // Default: Get all workspaces (basic info only for regular members)
-    if (!hasAdminAccess) {
-      return NextResponse.json({
-        success: true,
-        data: {
-          workspaces: [],
-          totalCount: 0,
-          message: 'Workspace access information is only available to organization admins',
-        },
-      })
-    }
-
-    // For admins: Get summary of all workspaces
-    const allWorkspaces = await db
-      .select({
-        id: workspace.id,
-        name: workspace.name,
-        ownerId: workspace.ownerId,
-        createdAt: workspace.createdAt,
-        ownerName: user.name,
-      })
-      .from(workspace)
-      .leftJoin(user, eq(workspace.ownerId, user.id))
-
-    return NextResponse.json({
-      success: true,
-      data: {
-        workspaces: allWorkspaces,
-        totalCount: allWorkspaces.length,
-        filter: 'all',
-      },
-      userRole,
-      hasAdminAccess,
-    })
-  } catch (error) {
-    logger.error('Failed to get organization workspaces', { error })
-    return NextResponse.json(
-      {
-        error: 'Internal server error',
-      },
-      { status: 500 }
-    )
-  }
-}

apps/sim/app/api/tools/supabase/storage-upload/route.ts

@@ -0,0 +1,257 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { generateRequestId } from '@/lib/core/utils/request'
+import { processSingleFileToUserFile } from '@/lib/uploads/utils/file-utils'
+import { downloadFileFromStorage } from '@/lib/uploads/utils/file-utils.server'
+
+export const dynamic = 'force-dynamic'
+
+const logger = createLogger('SupabaseStorageUploadAPI')
+
+const SupabaseStorageUploadSchema = z.object({
+  projectId: z.string().min(1, 'Project ID is required'),
+  apiKey: z.string().min(1, 'API key is required'),
+  bucket: z.string().min(1, 'Bucket name is required'),
+  fileName: z.string().min(1, 'File name is required'),
+  path: z.string().optional().nullable(),
+  fileData: z.any(),
+  contentType: z.string().optional().nullable(),
+  upsert: z.boolean().optional().default(false),
+})
+
+export async function POST(request: NextRequest) {
+  const requestId = generateRequestId()
+
+  try {
+    const authResult = await checkInternalAuth(request, { requireWorkflowId: false })
+
+    if (!authResult.success) {
+      logger.warn(
+        `[${requestId}] Unauthorized Supabase storage upload attempt: ${authResult.error}`
+      )
+      return NextResponse.json(
+        {
+          success: false,
+          error: authResult.error || 'Authentication required',
+        },
+        { status: 401 }
+      )
+    }
+
+    logger.info(
+      `[${requestId}] Authenticated Supabase storage upload request via ${authResult.authType}`,
+      {
+        userId: authResult.userId,
+      }
+    )
+
+    const body = await request.json()
+    const validatedData = SupabaseStorageUploadSchema.parse(body)
+
+    const fileData = validatedData.fileData
+    const isStringInput = typeof fileData === 'string'
+
+    logger.info(`[${requestId}] Uploading to Supabase Storage`, {
+      bucket: validatedData.bucket,
+      fileName: validatedData.fileName,
+      path: validatedData.path,
+      fileDataType: isStringInput ? 'string' : 'object',
+    })
+
+    if (!fileData) {
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'fileData is required',
+        },
+        { status: 400 }
+      )
+    }
+
+    let uploadBody: Buffer
+    let uploadContentType: string | undefined
+
+    if (isStringInput) {
+      let content = fileData as string
+
+      const dataUrlMatch = content.match(/^data:([^;]+);base64,(.+)$/s)
+      if (dataUrlMatch) {
+        const [, mimeType, base64Data] = dataUrlMatch
+        content = base64Data
+        if (!validatedData.contentType) {
+          uploadContentType = mimeType
+        }
+        logger.info(`[${requestId}] Extracted base64 from data URL (MIME: ${mimeType})`)
+      }
+
+      const cleanedContent = content.replace(/[\s\r\n]/g, '')
+      const isLikelyBase64 = /^[A-Za-z0-9+/]*={0,2}$/.test(cleanedContent)
+
+      if (isLikelyBase64 && cleanedContent.length >= 4) {
+        try {
+          uploadBody = Buffer.from(cleanedContent, 'base64')
+
+          const expectedMinSize = Math.floor(cleanedContent.length * 0.7)
+          const expectedMaxSize = Math.ceil(cleanedContent.length * 0.8)
+
+          if (
+            uploadBody.length >= expectedMinSize &&
+            uploadBody.length <= expectedMaxSize &&
+            uploadBody.length > 0
+          ) {
+            logger.info(
+              `[${requestId}] Decoded base64 content: ${cleanedContent.length} chars -> ${uploadBody.length} bytes`
+            )
+          } else {
+            const reEncoded = uploadBody.toString('base64')
+            if (reEncoded !== cleanedContent) {
+              logger.info(
+                `[${requestId}] Content looked like base64 but re-encoding didn't match, using as plain text`
+              )
+              uploadBody = Buffer.from(content, 'utf-8')
+            } else {
+              logger.info(
+                `[${requestId}] Decoded base64 content (verified): ${uploadBody.length} bytes`
+              )
+            }
+          }
+        } catch (decodeError) {
+          logger.info(
+            `[${requestId}] Failed to decode as base64, using as plain text: ${decodeError}`
+          )
+          uploadBody = Buffer.from(content, 'utf-8')
+        }
+      } else {
+        uploadBody = Buffer.from(content, 'utf-8')
+        logger.info(`[${requestId}] Using content as plain text (${uploadBody.length} bytes)`)
+      }
+
+      uploadContentType =
+        uploadContentType || validatedData.contentType || 'application/octet-stream'
+    } else {
+      const rawFile = fileData
+      logger.info(`[${requestId}] Processing file object: ${rawFile.name || 'unknown'}`)
+
+      let userFile
+      try {
+        userFile = processSingleFileToUserFile(rawFile, requestId, logger)
+      } catch (error) {
+        return NextResponse.json(
+          {
+            success: false,
+            error: error instanceof Error ? error.message : 'Failed to process file',
+          },
+          { status: 400 }
+        )
+      }
+
+      const buffer = await downloadFileFromStorage(userFile, requestId, logger)
+
+      uploadBody = buffer
+      uploadContentType = validatedData.contentType || userFile.type || 'application/octet-stream'
+    }
+
+    let fullPath = validatedData.fileName
+    if (validatedData.path) {
+      const folderPath = validatedData.path.endsWith('/')
+        ? validatedData.path
+        : `${validatedData.path}/`
+      fullPath = `${folderPath}${validatedData.fileName}`
+    }
+
+    const supabaseUrl = `https://${validatedData.projectId}.supabase.co/storage/v1/object/${validatedData.bucket}/${fullPath}`
+
+    const headers: Record<string, string> = {
+      apikey: validatedData.apiKey,
+      Authorization: `Bearer ${validatedData.apiKey}`,
+      'Content-Type': uploadContentType,
+    }
+
+    if (validatedData.upsert) {
+      headers['x-upsert'] = 'true'
+    }
+
+    logger.info(`[${requestId}] Sending to Supabase: ${supabaseUrl}`, {
+      contentType: uploadContentType,
+      bodySize: uploadBody.length,
+      upsert: validatedData.upsert,
+    })
+
+    const response = await fetch(supabaseUrl, {
+      method: 'POST',
+      headers,
+      body: new Uint8Array(uploadBody),
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      let errorData
+      try {
+        errorData = JSON.parse(errorText)
+      } catch {
+        errorData = { message: errorText }
+      }
+
+      logger.error(`[${requestId}] Supabase Storage upload failed:`, {
+        status: response.status,
+        statusText: response.statusText,
+        error: errorData,
+      })
+
+      return NextResponse.json(
+        {
+          success: false,
+          error: errorData.message || errorData.error || `Upload failed: ${response.statusText}`,
+          details: errorData,
+        },
+        { status: response.status }
+      )
+    }
+
+    const result = await response.json()
+
+    logger.info(`[${requestId}] File uploaded successfully to Supabase Storage`, {
+      bucket: validatedData.bucket,
+      path: fullPath,
+    })
+
+    const publicUrl = `https://${validatedData.projectId}.supabase.co/storage/v1/object/public/${validatedData.bucket}/${fullPath}`
+
+    return NextResponse.json({
+      success: true,
+      output: {
+        message: 'Successfully uploaded file to storage',
+        results: {
+          ...result,
+          path: fullPath,
+          bucket: validatedData.bucket,
+          publicUrl,
+        },
+      },
+    })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      logger.warn(`[${requestId}] Invalid request data`, { errors: error.errors })
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Invalid request data',
+          details: error.errors,
+        },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${requestId}] Error uploading to Supabase Storage:`, error)
+
+    return NextResponse.json(
+      {
+        success: false,
+        error: error instanceof Error ? error.message : 'Internal server error',
+      },
+      { status: 500 }
+    )
+  }
+}

apps/sim/app/templates/[id]/template.tsx

@@ -36,7 +36,7 @@ import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import type { CredentialRequirement } from '@/lib/workflows/credentials/credential-extractor'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
+import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import { useStarTemplate, useTemplate } from '@/hooks/queries/templates'
 
@@ -330,7 +330,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
 
     try {
       return (
-        <WorkflowPreview
+        <PreviewWorkflow
           workflowState={template.state}
           height='100%'
           width='100%'

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

@@ -4,7 +4,7 @@ import { Star, User } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { VerifiedBadge } from '@/components/ui/verified-badge'
 import { cn } from '@/lib/core/utils/cn'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
+import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import { useStarTemplate } from '@/hooks/queries/templates'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
@@ -200,13 +200,14 @@ function TemplateCardInner({
         className='pointer-events-none h-[180px] w-full cursor-pointer overflow-hidden rounded-[6px]'
       >
         {normalizedState && isInView ? (
-          <WorkflowPreview
+          <PreviewWorkflow
             workflowState={normalizedState}
             height={180}
             width='100%'
             isPannable={false}
             defaultZoom={0.8}
             fitPadding={0.2}
+            lightweight
           />
         ) : (
           <div className='h-full w-full bg-[var(--surface-4)]' />

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { AlertCircle, Loader2 } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
@@ -13,13 +13,8 @@ import {
   PopoverContent,
   PopoverItem,
 } from '@/components/emcn'
-import { redactApiKeys } from '@/lib/core/security/redaction'
 import { cn } from '@/lib/core/utils/cn'
-import {
-  getLeftmostBlockId,
-  PreviewEditor,
-  WorkflowPreview,
-} from '@/app/workspace/[workspaceId]/w/components/preview'
+import { Preview } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useExecutionSnapshot } from '@/hooks/queries/logs'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 
@@ -32,13 +27,6 @@ interface TraceSpan {
   children?: TraceSpan[]
 }
 
-interface BlockExecutionData {
-  input: unknown
-  output: unknown
-  status: string
-  durationMs: number
-}
-
 interface MigratedWorkflowState extends WorkflowState {
   _migrated: true
   _note?: string
@@ -70,98 +58,35 @@ export function ExecutionSnapshot({
   onClose = () => {},
 }: ExecutionSnapshotProps) {
   const { data, isLoading, error } = useExecutionSnapshot(executionId)
-  const [pinnedBlockId, setPinnedBlockId] = useState<string | null>(null)
-  const autoSelectedForExecutionRef = useRef<string | null>(null)
+  const lastExecutionIdRef = useRef<string | null>(null)
 
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 })
-  const [contextMenuBlockId, setContextMenuBlockId] = useState<string | null>(null)
   const menuRef = useRef<HTMLDivElement>(null)
 
   const closeMenu = useCallback(() => {
     setIsMenuOpen(false)
-    setContextMenuBlockId(null)
   }, [])
 
   const handleCanvasContextMenu = useCallback((e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    setContextMenuBlockId(null)
     setMenuPosition({ x: e.clientX, y: e.clientY })
     setIsMenuOpen(true)
   }, [])
 
-  const handleNodeContextMenu = useCallback(
-    (blockId: string, mousePosition: { x: number; y: number }) => {
-      setContextMenuBlockId(blockId)
-      setMenuPosition(mousePosition)
-      setIsMenuOpen(true)
-    },
-    []
-  )
-
   const handleCopyExecutionId = useCallback(() => {
     navigator.clipboard.writeText(executionId)
     closeMenu()
   }, [executionId, closeMenu])
 
-  const handleOpenDetails = useCallback(() => {
-    if (contextMenuBlockId) {
-      setPinnedBlockId(contextMenuBlockId)
-    }
-    closeMenu()
-  }, [contextMenuBlockId, closeMenu])
-
-  const blockExecutions = useMemo(() => {
-    if (!traceSpans || !Array.isArray(traceSpans)) return {}
-
-    const blockExecutionMap: Record<string, BlockExecutionData> = {}
-
-    const collectBlockSpans = (spans: TraceSpan[]): TraceSpan[] => {
-      const blockSpans: TraceSpan[] = []
-
-      for (const span of spans) {
-        if (span.blockId) {
-          blockSpans.push(span)
-        }
-        if (span.children && Array.isArray(span.children)) {
-          blockSpans.push(...collectBlockSpans(span.children))
-        }
-      }
-
-      return blockSpans
-    }
-
-    const allBlockSpans = collectBlockSpans(traceSpans)
-
-    for (const span of allBlockSpans) {
-      if (span.blockId && !blockExecutionMap[span.blockId]) {
-        blockExecutionMap[span.blockId] = {
-          input: redactApiKeys(span.input || {}),
-          output: redactApiKeys(span.output || {}),
-          status: span.status || 'unknown',
-          durationMs: span.duration || 0,
-        }
-      }
-    }
-
-    return blockExecutionMap
-  }, [traceSpans])
-
   const workflowState = data?.workflowState as WorkflowState | undefined
 
-  // Auto-select the leftmost block once when data loads for a new executionId
-  useEffect(() => {
-    if (
-      workflowState &&
-      !isMigratedWorkflowState(workflowState) &&
-      autoSelectedForExecutionRef.current !== executionId
-    ) {
-      autoSelectedForExecutionRef.current = executionId
-      const leftmostId = getLeftmostBlockId(workflowState)
-      setPinnedBlockId(leftmostId)
-    }
-  }, [executionId, workflowState])
+  // Track execution ID changes for key reset
+  const executionKey = executionId !== lastExecutionIdRef.current ? executionId : undefined
+  if (executionId !== lastExecutionIdRef.current) {
+    lastExecutionIdRef.current = executionId
+  }
 
   const renderContent = () => {
     if (isLoading) {
@@ -226,44 +151,17 @@ export function ExecutionSnapshot({
     }
 
     return (
-      <div
-        style={{ height, width }}
-        className={cn(
-          'flex overflow-hidden',
-          !isModal && 'rounded-[4px] border border-[var(--border)]',
-          className
-        )}
-      >
-        <div className='h-full flex-1' onContextMenu={handleCanvasContextMenu}>
-          <WorkflowPreview
-            workflowState={workflowState}
-            isPannable={true}
-            defaultPosition={{ x: 0, y: 0 }}
-            defaultZoom={0.8}
-            onNodeClick={(blockId) => {
-              setPinnedBlockId(blockId)
-            }}
-            onNodeContextMenu={handleNodeContextMenu}
-            onPaneClick={() => setPinnedBlockId(null)}
-            cursorStyle='pointer'
-            executedBlocks={blockExecutions}
-            selectedBlockId={pinnedBlockId}
-          />
-        </div>
-        {pinnedBlockId && workflowState.blocks[pinnedBlockId] && (
-          <PreviewEditor
-            block={workflowState.blocks[pinnedBlockId]}
-            executionData={blockExecutions[pinnedBlockId]}
-            allBlockExecutions={blockExecutions}
-            workflowBlocks={workflowState.blocks}
-            workflowVariables={workflowState.variables}
-            loops={workflowState.loops}
-            parallels={workflowState.parallels}
-            isExecutionMode
-            onClose={() => setPinnedBlockId(null)}
-          />
-        )}
-      </div>
+      <Preview
+        key={executionKey}
+        workflowState={workflowState}
+        traceSpans={traceSpans}
+        className={className}
+        height={height}
+        width={width}
+        onCanvasContextMenu={handleCanvasContextMenu}
+        showBorder={!isModal}
+        autoSelectLeftmost
+      />
     )
   }
 
@@ -287,9 +185,6 @@ export function ExecutionSnapshot({
               }}
             />
             <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
-              {contextMenuBlockId && (
-                <PopoverItem onClick={handleOpenDetails}>Open Details</PopoverItem>
-              )}
               <PopoverItem onClick={handleCopyExecutionId}>Copy Execution ID</PopoverItem>
             </PopoverContent>
           </Popover>,
@@ -304,7 +199,6 @@ export function ExecutionSnapshot({
           open={isOpen}
           onOpenChange={(open) => {
             if (!open) {
-              setPinnedBlockId(null)
               onClose()
             }
           }}

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

@@ -3,7 +3,7 @@ import { Star, User } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import { VerifiedBadge } from '@/components/ui/verified-badge'
 import { cn } from '@/lib/core/utils/cn'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
+import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import { useStarTemplate } from '@/hooks/queries/templates'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
@@ -206,7 +206,7 @@ function TemplateCardInner({
         className='pointer-events-none h-[180px] w-full overflow-hidden rounded-[6px]'
       >
         {normalizedState && isInView ? (
-          <WorkflowPreview
+          <PreviewWorkflow
             workflowState={normalizedState}
             height={180}
             width='100%'
@@ -214,6 +214,7 @@ function TemplateCardInner({
             defaultZoom={0.8}
             fitPadding={0.2}
             cursorStyle='pointer'
+            lightweight
           />
         ) : (
           <div className='h-full w-full bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />

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

@@ -25,18 +25,277 @@ function extractFieldValue(rawValue: unknown): string | undefined {
   return undefined
 }
 
+type EmbedInfo = {
+  url: string
+  type: 'iframe' | 'video' | 'audio'
+  aspectRatio?: string
+}
+
+const EMBED_SCALE = 0.78
+const EMBED_INVERSE_SCALE = `${(1 / EMBED_SCALE) * 100}%`
+
+function getTwitchParent(): string {
+  return typeof window !== 'undefined' ? window.location.hostname : 'localhost'
+}
+
 /**
- * Extract YouTube video ID from various YouTube URL formats
+ * Get embed info for supported media platforms
  */
-function getYouTubeVideoId(url: string): string | null {
-  const patterns = [
-    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
-    /youtube\.com\/watch\?.*v=([a-zA-Z0-9_-]{11})/,
-  ]
-  for (const pattern of patterns) {
-    const match = url.match(pattern)
-    if (match) return match[1]
+function getEmbedInfo(url: string): EmbedInfo | null {
+  const youtubeMatch = url.match(
+    /(?:youtube\.com\/watch\?(?:.*&)?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/
+  )
+  if (youtubeMatch) {
+    return { url: `https://www.youtube.com/embed/${youtubeMatch[1]}`, type: 'iframe' }
   }
+
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/)
+  if (vimeoMatch) {
+    return { url: `https://player.vimeo.com/video/${vimeoMatch[1]}`, type: 'iframe' }
+  }
+
+  const dailymotionMatch = url.match(/dailymotion\.com\/video\/([a-zA-Z0-9]+)/)
+  if (dailymotionMatch) {
+    return { url: `https://www.dailymotion.com/embed/video/${dailymotionMatch[1]}`, type: 'iframe' }
+  }
+
+  const twitchVideoMatch = url.match(/twitch\.tv\/videos\/(\d+)/)
+  if (twitchVideoMatch) {
+    return {
+      url: `https://player.twitch.tv/?video=${twitchVideoMatch[1]}&parent=${getTwitchParent()}`,
+      type: 'iframe',
+    }
+  }
+
+  const twitchChannelMatch = url.match(/twitch\.tv\/([a-zA-Z0-9_]+)(?:\/|$)/)
+  if (twitchChannelMatch && !url.includes('/videos/') && !url.includes('/clip/')) {
+    return {
+      url: `https://player.twitch.tv/?channel=${twitchChannelMatch[1]}&parent=${getTwitchParent()}`,
+      type: 'iframe',
+    }
+  }
+
+  const streamableMatch = url.match(/streamable\.com\/([a-zA-Z0-9]+)/)
+  if (streamableMatch) {
+    return { url: `https://streamable.com/e/${streamableMatch[1]}`, type: 'iframe' }
+  }
+
+  const wistiaMatch = url.match(/(?:wistia\.com|wistia\.net)\/(?:medias|embed)\/([a-zA-Z0-9]+)/)
+  if (wistiaMatch) {
+    return { url: `https://fast.wistia.net/embed/iframe/${wistiaMatch[1]}`, type: 'iframe' }
+  }
+
+  const tiktokMatch = url.match(/tiktok\.com\/@[^/]+\/video\/(\d+)/)
+  if (tiktokMatch) {
+    return {
+      url: `https://www.tiktok.com/embed/v2/${tiktokMatch[1]}`,
+      type: 'iframe',
+      aspectRatio: '9/16',
+    }
+  }
+
+  const soundcloudMatch = url.match(/soundcloud\.com\/([a-zA-Z0-9_-]+\/[a-zA-Z0-9_-]+)/)
+  if (soundcloudMatch) {
+    return {
+      url: `https://w.soundcloud.com/player/?url=${encodeURIComponent(url)}&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false`,
+      type: 'iframe',
+      aspectRatio: '3/2',
+    }
+  }
+
+  const spotifyTrackMatch = url.match(/open\.spotify\.com\/track\/([a-zA-Z0-9]+)/)
+  if (spotifyTrackMatch) {
+    return {
+      url: `https://open.spotify.com/embed/track/${spotifyTrackMatch[1]}`,
+      type: 'iframe',
+      aspectRatio: '3.7/1',
+    }
+  }
+
+  const spotifyAlbumMatch = url.match(/open\.spotify\.com\/album\/([a-zA-Z0-9]+)/)
+  if (spotifyAlbumMatch) {
+    return {
+      url: `https://open.spotify.com/embed/album/${spotifyAlbumMatch[1]}`,
+      type: 'iframe',
+      aspectRatio: '2/3',
+    }
+  }
+
+  const spotifyPlaylistMatch = url.match(/open\.spotify\.com\/playlist\/([a-zA-Z0-9]+)/)
+  if (spotifyPlaylistMatch) {
+    return {
+      url: `https://open.spotify.com/embed/playlist/${spotifyPlaylistMatch[1]}`,
+      type: 'iframe',
+      aspectRatio: '2/3',
+    }
+  }
+
+  const spotifyEpisodeMatch = url.match(/open\.spotify\.com\/episode\/([a-zA-Z0-9]+)/)
+  if (spotifyEpisodeMatch) {
+    return {
+      url: `https://open.spotify.com/embed/episode/${spotifyEpisodeMatch[1]}`,
+      type: 'iframe',
+      aspectRatio: '2.5/1',
+    }
+  }
+
+  const spotifyShowMatch = url.match(/open\.spotify\.com\/show\/([a-zA-Z0-9]+)/)
+  if (spotifyShowMatch) {
+    return {
+      url: `https://open.spotify.com/embed/show/${spotifyShowMatch[1]}`,
+      type: 'iframe',
+      aspectRatio: '3.7/1',
+    }
+  }
+
+  const appleMusicSongMatch = url.match(/music\.apple\.com\/([a-z]{2})\/song\/[^/]+\/(\d+)/)
+  if (appleMusicSongMatch) {
+    const [, country, songId] = appleMusicSongMatch
+    return {
+      url: `https://embed.music.apple.com/${country}/song/${songId}`,
+      type: 'iframe',
+      aspectRatio: '3/2',
+    }
+  }
+
+  const appleMusicAlbumMatch = url.match(/music\.apple\.com\/([a-z]{2})\/album\/(?:[^/]+\/)?(\d+)/)
+  if (appleMusicAlbumMatch) {
+    const [, country, albumId] = appleMusicAlbumMatch
+    return {
+      url: `https://embed.music.apple.com/${country}/album/${albumId}`,
+      type: 'iframe',
+      aspectRatio: '2/3',
+    }
+  }
+
+  const appleMusicPlaylistMatch = url.match(
+    /music\.apple\.com\/([a-z]{2})\/playlist\/[^/]+\/(pl\.[a-zA-Z0-9]+)/
+  )
+  if (appleMusicPlaylistMatch) {
+    const [, country, playlistId] = appleMusicPlaylistMatch
+    return {
+      url: `https://embed.music.apple.com/${country}/playlist/${playlistId}`,
+      type: 'iframe',
+      aspectRatio: '2/3',
+    }
+  }
+
+  const loomMatch = url.match(/loom\.com\/share\/([a-zA-Z0-9]+)/)
+  if (loomMatch) {
+    return { url: `https://www.loom.com/embed/${loomMatch[1]}`, type: 'iframe' }
+  }
+
+  const facebookVideoMatch =
+    url.match(/facebook\.com\/.*\/videos\/(\d+)/) || url.match(/fb\.watch\/([a-zA-Z0-9_-]+)/)
+  if (facebookVideoMatch) {
+    return {
+      url: `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(url)}&show_text=false`,
+      type: 'iframe',
+    }
+  }
+
+  const instagramReelMatch = url.match(/instagram\.com\/reel\/([a-zA-Z0-9_-]+)/)
+  if (instagramReelMatch) {
+    return {
+      url: `https://www.instagram.com/reel/${instagramReelMatch[1]}/embed`,
+      type: 'iframe',
+      aspectRatio: '9/16',
+    }
+  }
+
+  const instagramPostMatch = url.match(/instagram\.com\/p\/([a-zA-Z0-9_-]+)/)
+  if (instagramPostMatch) {
+    return {
+      url: `https://www.instagram.com/p/${instagramPostMatch[1]}/embed`,
+      type: 'iframe',
+      aspectRatio: '4/5',
+    }
+  }
+
+  const twitterMatch = url.match(/(?:twitter\.com|x\.com)\/[^/]+\/status\/(\d+)/)
+  if (twitterMatch) {
+    return {
+      url: `https://platform.twitter.com/embed/Tweet.html?id=${twitterMatch[1]}`,
+      type: 'iframe',
+      aspectRatio: '3/4',
+    }
+  }
+
+  const rumbleMatch =
+    url.match(/rumble\.com\/embed\/([a-zA-Z0-9]+)/) || url.match(/rumble\.com\/([a-zA-Z0-9]+)-/)
+  if (rumbleMatch) {
+    return { url: `https://rumble.com/embed/${rumbleMatch[1]}/`, type: 'iframe' }
+  }
+
+  const bilibiliMatch = url.match(/bilibili\.com\/video\/(BV[a-zA-Z0-9]+)/)
+  if (bilibiliMatch) {
+    return {
+      url: `https://player.bilibili.com/player.html?bvid=${bilibiliMatch[1]}&high_quality=1`,
+      type: 'iframe',
+    }
+  }
+
+  const vidyardMatch = url.match(/(?:vidyard\.com|share\.vidyard\.com)\/watch\/([a-zA-Z0-9]+)/)
+  if (vidyardMatch) {
+    return { url: `https://play.vidyard.com/${vidyardMatch[1]}`, type: 'iframe' }
+  }
+
+  const cfStreamMatch =
+    url.match(/cloudflarestream\.com\/([a-zA-Z0-9]+)/) ||
+    url.match(/videodelivery\.net\/([a-zA-Z0-9]+)/)
+  if (cfStreamMatch) {
+    return { url: `https://iframe.cloudflarestream.com/${cfStreamMatch[1]}`, type: 'iframe' }
+  }
+
+  const twitchClipMatch =
+    url.match(/clips\.twitch\.tv\/([a-zA-Z0-9_-]+)/) ||
+    url.match(/twitch\.tv\/[^/]+\/clip\/([a-zA-Z0-9_-]+)/)
+  if (twitchClipMatch) {
+    return {
+      url: `https://clips.twitch.tv/embed?clip=${twitchClipMatch[1]}&parent=${getTwitchParent()}`,
+      type: 'iframe',
+    }
+  }
+
+  const mixcloudMatch = url.match(/mixcloud\.com\/([^/]+\/[^/]+)/)
+  if (mixcloudMatch) {
+    return {
+      url: `https://www.mixcloud.com/widget/iframe/?feed=%2F${encodeURIComponent(mixcloudMatch[1])}%2F&hide_cover=1`,
+      type: 'iframe',
+      aspectRatio: '2/1',
+    }
+  }
+
+  const googleDriveMatch = url.match(/drive\.google\.com\/file\/d\/([a-zA-Z0-9_-]+)/)
+  if (googleDriveMatch) {
+    return { url: `https://drive.google.com/file/d/${googleDriveMatch[1]}/preview`, type: 'iframe' }
+  }
+
+  if (url.includes('dropbox.com') && /\.(mp4|mov|webm)/.test(url)) {
+    const directUrl = url
+      .replace('www.dropbox.com', 'dl.dropboxusercontent.com')
+      .replace('?dl=0', '')
+    return { url: directUrl, type: 'video' }
+  }
+
+  const tenorMatch = url.match(/tenor\.com\/view\/[^/]+-(\d+)/)
+  if (tenorMatch) {
+    return { url: `https://tenor.com/embed/${tenorMatch[1]}`, type: 'iframe', aspectRatio: '1/1' }
+  }
+
+  const giphyMatch = url.match(/giphy\.com\/(?:gifs|embed)\/(?:.*-)?([a-zA-Z0-9]+)/)
+  if (giphyMatch) {
+    return { url: `https://giphy.com/embed/${giphyMatch[1]}`, type: 'iframe', aspectRatio: '1/1' }
+  }
+
+  if (/\.(mp4|webm|ogg|mov)(\?|$)/i.test(url)) {
+    return { url, type: 'video' }
+  }
+
+  if (/\.(mp3|wav|m4a|aac)(\?|$)/i.test(url)) {
+    return { url, type: 'audio' }
+  }
+
   return null
 }
 
@@ -108,29 +367,57 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
           )
         },
         a: ({ href, children }: any) => {
-          const videoId = href ? getYouTubeVideoId(href) : null
-          if (videoId) {
+          const embedInfo = href ? getEmbedInfo(href) : null
+          if (embedInfo) {
             return (
-              <span className='inline'>
+              <span className='my-2 block w-full'>
                 <a
                   href={href}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+                  className='mb-1 block break-all text-[var(--brand-secondary)] underline-offset-2 hover:underline'
                 >
                   {children}
                 </a>
-                <span className='mt-1.5 block overflow-hidden rounded-md'>
-                  <iframe
-                    src={`https://www.youtube.com/embed/${videoId}`}
-                    title='YouTube video'
-                    allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share'
-                    allowFullScreen
-                    loading='lazy'
-                    referrerPolicy='strict-origin-when-cross-origin'
-                    sandbox='allow-scripts allow-same-origin allow-presentation allow-popups'
-                    className='aspect-video w-full'
-                  />
+                <span className='block w-full overflow-hidden rounded-md'>
+                  {embedInfo.type === 'iframe' && (
+                    <span
+                      className='block overflow-hidden'
+                      style={{
+                        width: '100%',
+                        aspectRatio: embedInfo.aspectRatio || '16/9',
+                      }}
+                    >
+                      <iframe
+                        src={embedInfo.url}
+                        title='Media'
+                        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                        allowFullScreen
+                        loading='lazy'
+                        className='origin-top-left'
+                        style={{
+                          width: EMBED_INVERSE_SCALE,
+                          height: EMBED_INVERSE_SCALE,
+                          transform: `scale(${EMBED_SCALE})`,
+                        }}
+                      />
+                    </span>
+                  )}
+                  {embedInfo.type === 'video' && (
+                    <video
+                      src={embedInfo.url}
+                      controls
+                      preload='metadata'
+                      className='aspect-video w-full'
+                    >
+                      <track kind='captions' src='' default />
+                    </video>
+                  )}
+                  {embedInfo.type === 'audio' && (
+                    <audio src={embedInfo.url} controls preload='metadata' className='w-full'>
+                      <track kind='captions' src='' default />
+                    </audio>
+                  )}
                 </span>
               </span>
             )
@@ -140,7 +427,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
               href={href}
               target='_blank'
               rel='noopener noreferrer'
-              className='text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+              className='break-all text-[var(--brand-secondary)] underline-offset-2 hover:underline'
             >
               {children}
             </a>
@@ -159,6 +446,26 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
             {children}
           </blockquote>
         ),
+        table: ({ children }: any) => (
+          <div className='my-2 max-w-full overflow-x-auto'>
+            <table className='w-full border-collapse text-xs'>{children}</table>
+          </div>
+        ),
+        thead: ({ children }: any) => (
+          <thead className='border-[var(--border)] border-b'>{children}</thead>
+        ),
+        tbody: ({ children }: any) => <tbody>{children}</tbody>,
+        tr: ({ children }: any) => (
+          <tr className='border-[var(--border)] border-b last:border-b-0'>{children}</tr>
+        ),
+        th: ({ children }: any) => (
+          <th className='px-2 py-1 text-left font-semibold text-[var(--text-primary)]'>
+            {children}
+          </th>
+        ),
+        td: ({ children }: any) => (
+          <td className='px-2 py-1 text-[var(--text-secondary)]'>{children}</td>
+        ),
       }}
     >
       {content}
@@ -171,7 +478,7 @@ export const NoteBlock = memo(function NoteBlock({
   data,
   selected,
 }: NodeProps<NoteBlockNodeData>) {
-  const { type, config, name } = data
+  const { type, name } = data
 
   const { activeWorkflowId, isEnabled, handleClick, hasRing, ringStyles } = useBlockVisual({
     blockId: id,
@@ -248,8 +555,8 @@ export const NoteBlock = memo(function NoteBlock({
           </div>
         </div>
 
-        <div className='relative p-[8px]'>
-          <div className='relative break-words'>
+        <div className='relative overflow-hidden p-[8px]'>
+          <div className='relative max-w-full break-all'>
             {isEmpty ? (
               <p className='text-[#868686] text-sm'>Add note...</p>
             ) : (

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import {
   Button,
@@ -17,11 +17,7 @@ import {
 } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
-import {
-  getLeftmostBlockId,
-  PreviewEditor,
-  WorkflowPreview,
-} from '@/app/workspace/[workspaceId]/w/components/preview'
+import { Preview, PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useDeploymentVersionState, useRevertToVersion } from '@/hooks/queries/workflows'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 import { Versions } from './components'
@@ -59,8 +55,6 @@ export function GeneralDeploy({
   const [showLoadDialog, setShowLoadDialog] = useState(false)
   const [showPromoteDialog, setShowPromoteDialog] = useState(false)
   const [showExpandedPreview, setShowExpandedPreview] = useState(false)
-  const [expandedSelectedBlockId, setExpandedSelectedBlockId] = useState<string | null>(null)
-  const hasAutoSelectedRef = useRef(false)
   const [versionToLoad, setVersionToLoad] = useState<number | null>(null)
   const [versionToPromote, setVersionToPromote] = useState<number | null>(null)
 
@@ -135,19 +129,6 @@ export function GeneralDeploy({
   const hasDeployedData = deployedState && Object.keys(deployedState.blocks || {}).length > 0
   const showLoadingSkeleton = isLoadingDeployedState && !hasDeployedData
 
-  // Auto-select the leftmost block once when expanded preview opens
-  useEffect(() => {
-    if (showExpandedPreview && workflowToShow && !hasAutoSelectedRef.current) {
-      hasAutoSelectedRef.current = true
-      const leftmostId = getLeftmostBlockId(workflowToShow)
-      setExpandedSelectedBlockId(leftmostId)
-    }
-    // Reset when modal closes
-    if (!showExpandedPreview) {
-      hasAutoSelectedRef.current = false
-    }
-  }, [showExpandedPreview, workflowToShow])
-
   if (showLoadingSkeleton) {
     return (
       <div className='space-y-[12px]'>
@@ -205,7 +186,7 @@ export function GeneralDeploy({
             {workflowToShow ? (
               <>
                 <div className='[&_*]:!cursor-default h-full w-full cursor-default'>
-                  <WorkflowPreview
+                  <PreviewWorkflow
                     workflowState={workflowToShow}
                     height='100%'
                     width='100%'
@@ -306,46 +287,15 @@ export function GeneralDeploy({
       </Modal>
 
       {workflowToShow && (
-        <Modal
-          open={showExpandedPreview}
-          onOpenChange={(open) => {
-            if (!open) {
-              setExpandedSelectedBlockId(null)
-            }
-            setShowExpandedPreview(open)
-          }}
-        >
+        <Modal open={showExpandedPreview} onOpenChange={setShowExpandedPreview}>
           <ModalContent size='full' className='flex h-[90vh] flex-col'>
             <ModalHeader>
               {previewMode === 'selected' && selectedVersionInfo
                 ? selectedVersionInfo.name || `v${selectedVersion}`
                 : 'Live Workflow'}
             </ModalHeader>
-            <ModalBody className='!p-0 min-h-0 flex-1'>
-              <div className='flex h-full w-full overflow-hidden'>
-                <div className='h-full flex-1'>
-                  <WorkflowPreview
-                    workflowState={workflowToShow}
-                    isPannable={true}
-                    defaultPosition={{ x: 0, y: 0 }}
-                    defaultZoom={0.6}
-                    onNodeClick={(blockId) => {
-                      setExpandedSelectedBlockId(blockId)
-                    }}
-                    onPaneClick={() => setExpandedSelectedBlockId(null)}
-                    selectedBlockId={expandedSelectedBlockId}
-                  />
-                </div>
-                {expandedSelectedBlockId && workflowToShow.blocks?.[expandedSelectedBlockId] && (
-                  <PreviewEditor
-                    block={workflowToShow.blocks[expandedSelectedBlockId]}
-                    workflowVariables={workflowToShow.variables}
-                    loops={workflowToShow.loops}
-                    parallels={workflowToShow.parallels}
-                    onClose={() => setExpandedSelectedBlockId(null)}
-                  />
-                )}
-              </div>
+            <ModalBody className='!p-0 min-h-0 flex-1 overflow-hidden'>
+              <Preview workflowState={workflowToShow} autoSelectLeftmost />
             </ModalBody>
           </ModalContent>
         </Modal>

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

@@ -435,7 +435,7 @@ export function McpDeploy({
     return (
       <div className='flex h-full flex-col items-center justify-center gap-3'>
         <p className='text-[13px] text-[var(--text-muted)]'>
-          Create an MCP Server in Settings → Deployed MCPs first.
+          Create an MCP Server in Settings → MCP Servers first.
         </p>
         <Button
           variant='tertiary'

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

@@ -19,7 +19,7 @@ import { Skeleton } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { captureAndUploadOGImage, OG_IMAGE_HEIGHT, OG_IMAGE_WIDTH } from '@/lib/og'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/preview'
+import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { useCreatorProfiles } from '@/hooks/queries/creator-profile'
 import {
   useCreateTemplate,
@@ -439,13 +439,14 @@ const OGCaptureContainer = forwardRef<HTMLDivElement>((_, ref) => {
       }}
       aria-hidden='true'
     >
-      <WorkflowPreview
+      <PreviewWorkflow
         workflowState={workflowState}
         height='100%'
         width='100%'
         isPannable={false}
         defaultZoom={0.8}
         fitPadding={0.2}
+        lightweight
       />
     </div>
   )
@@ -477,7 +478,7 @@ function TemplatePreviewContent({ existingTemplate }: TemplatePreviewContentProp
   }
 
   return (
-    <WorkflowPreview
+    <PreviewWorkflow
       key={`template-preview-${existingTemplate.id}`}
       workflowState={workflowState}
       height='100%'

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

@@ -284,22 +284,37 @@ const renderLabel = (
           </>
         )}
         {showCanonicalToggle && (
-          <button
-            type='button'
-            className='flex h-[12px] w-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
-            onClick={canonicalToggle?.onToggle}
-            disabled={canonicalToggleDisabledResolved}
-            aria-label={canonicalToggle?.mode === 'advanced' ? 'Use selector' : 'Enter manual ID'}
-          >
-            <ArrowLeftRight
-              className={cn(
-                '!h-[12px] !w-[12px]',
-                canonicalToggle?.mode === 'advanced'
-                  ? 'text-[var(--text-primary)]'
-                  : 'text-[var(--text-secondary)]'
-              )}
-            />
-          </button>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <button
+                type='button'
+                className='flex h-[12px] w-[12px] flex-shrink-0 items-center justify-center bg-transparent p-0 disabled:cursor-not-allowed disabled:opacity-50'
+                onClick={canonicalToggle?.onToggle}
+                disabled={canonicalToggleDisabledResolved}
+                aria-label={
+                  canonicalToggle?.mode === 'advanced'
+                    ? 'Switch to selector'
+                    : 'Switch to manual ID'
+                }
+              >
+                <ArrowLeftRight
+                  className={cn(
+                    '!h-[12px] !w-[12px]',
+                    canonicalToggle?.mode === 'advanced'
+                      ? 'text-[var(--text-primary)]'
+                      : 'text-[var(--text-secondary)]'
+                  )}
+                />
+              </button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              <p>
+                {canonicalToggle?.mode === 'advanced'
+                  ? 'Switch to selector'
+                  : 'Switch to manual ID'}
+              </p>
+            </Tooltip.Content>
+          </Tooltip.Root>
         )}
       </div>
     </div>
@@ -323,6 +338,11 @@ const arePropsEqual = (prevProps: SubBlockProps, nextProps: SubBlockProps): bool
   const configEqual =
     prevProps.config.id === nextProps.config.id && prevProps.config.type === nextProps.config.type
 
+  const canonicalToggleEqual =
+    !!prevProps.canonicalToggle === !!nextProps.canonicalToggle &&
+    prevProps.canonicalToggle?.mode === nextProps.canonicalToggle?.mode &&
+    prevProps.canonicalToggle?.disabled === nextProps.canonicalToggle?.disabled
+
   return (
     prevProps.blockId === nextProps.blockId &&
     configEqual &&
@@ -331,8 +351,7 @@ const arePropsEqual = (prevProps: SubBlockProps, nextProps: SubBlockProps): bool
     prevProps.disabled === nextProps.disabled &&
     prevProps.fieldDiffStatus === nextProps.fieldDiffStatus &&
     prevProps.allowExpandInPreview === nextProps.allowExpandInPreview &&
-    prevProps.canonicalToggle?.mode === nextProps.canonicalToggle?.mode &&
-    prevProps.canonicalToggle?.disabled === nextProps.canonicalToggle?.disabled
+    canonicalToggleEqual
   )
 }
 

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

@@ -38,7 +38,7 @@ 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 { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview'
 import { getBlock } from '@/blocks/registry'
 import type { SubBlockType } from '@/blocks/types'
 import { useWorkflowState } from '@/hooks/queries/workflows'
@@ -458,7 +458,7 @@ export function Editor() {
                       ) : childWorkflowState ? (
                         <>
                           <div className='[&_*:active]:!cursor-grabbing [&_*]:!cursor-grab [&_.react-flow__handle]:!hidden h-full w-full'>
-                            <WorkflowPreview
+                            <PreviewWorkflow
                               workflowState={childWorkflowState}
                               height={160}
                               width='100%'
@@ -466,6 +466,7 @@ export function Editor() {
                               defaultZoom={0.6}
                               fitPadding={0.15}
                               cursorStyle='grab'
+                              lightweight
                             />
                           </div>
                           <Tooltip.Root>

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

@@ -6,6 +6,7 @@ import type { EdgeDiffStatus } from '@/lib/workflows/diff/types'
 import { useExecutionStore } from '@/stores/execution'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 
+/** Extended edge props with optional handle identifiers */
 interface WorkflowEdgeProps extends EdgeProps {
   sourceHandle?: string | null
   targetHandle?: string | null
@@ -90,15 +91,17 @@ const WorkflowEdgeComponent = ({
     if (edgeDiffStatus === 'deleted') {
       color = 'var(--text-error)'
       opacity = 0.7
-    } else if (isErrorEdge) {
-      color = 'var(--text-error)'
     } else if (edgeDiffStatus === 'new') {
       color = 'var(--brand-tertiary-2)'
     } else if (edgeRunStatus === 'success') {
       // Use green for preview mode, default for canvas execution
+      // This also applies to error edges that were taken (error path executed)
       color = previewExecutionStatus ? 'var(--brand-tertiary-2)' : 'var(--border-success)'
     } else if (edgeRunStatus === 'error') {
       color = 'var(--text-error)'
+    } else if (isErrorEdge) {
+      // Error edges that weren't taken stay red
+      color = 'var(--text-error)'
     }
 
     if (isSelected) {
@@ -151,4 +154,14 @@ const WorkflowEdgeComponent = ({
   )
 }
 
+/**
+ * Workflow edge component with execution status and diff visualization.
+ *
+ * @remarks
+ * Edge coloring priority:
+ * 1. Diff status (deleted/new) - for version comparison
+ * 2. Execution status (success/error) - for run visualization
+ * 3. Error edge default (red) - for untaken error paths
+ * 4. Default edge color - normal workflow connections
+ */
 export const WorkflowEdge = memo(WorkflowEdgeComponent)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-canvas-context-menu.ts

@@ -13,7 +13,11 @@ interface UseCanvasContextMenuProps {
 
 /**
  * Hook for managing workflow canvas context menus.
- * Handles right-click events, menu state, click-outside detection, and block info extraction.
+ *
+ * Handles right-click events on nodes, pane, and selections with proper multi-select behavior.
+ *
+ * @param props - Hook configuration
+ * @returns Context menu state and handlers
  */
 export function useCanvasContextMenu({ blocks, getNodes, setNodes }: UseCanvasContextMenuProps) {
   const [activeMenu, setActiveMenu] = useState<MenuType>(null)
@@ -46,19 +50,29 @@ export function useCanvasContextMenu({ blocks, getNodes, setNodes }: UseCanvasCo
       event.stopPropagation()
 
       const isMultiSelect = event.shiftKey || event.metaKey || event.ctrlKey
-      setNodes((nodes) =>
-        nodes.map((n) => ({
-          ...n,
-          selected: isMultiSelect ? (n.id === node.id ? true : n.selected) : n.id === node.id,
-        }))
-      )
+      const currentSelectedNodes = getNodes().filter((n) => n.selected)
+      const isClickedNodeSelected = currentSelectedNodes.some((n) => n.id === node.id)
 
-      const selectedNodes = getNodes().filter((n) => n.selected)
-      const nodesToUse = isMultiSelect
-        ? selectedNodes.some((n) => n.id === node.id)
-          ? selectedNodes
-          : [...selectedNodes, node]
-        : [node]
+      let nodesToUse: Node[]
+      if (isClickedNodeSelected) {
+        nodesToUse = currentSelectedNodes
+      } else if (isMultiSelect) {
+        nodesToUse = [...currentSelectedNodes, node]
+        setNodes((nodes) =>
+          nodes.map((n) => ({
+            ...n,
+            selected: n.id === node.id ? true : n.selected,
+          }))
+        )
+      } else {
+        nodesToUse = [node]
+        setNodes((nodes) =>
+          nodes.map((n) => ({
+            ...n,
+            selected: n.id === node.id,
+          }))
+        )
+      }
 
       setPosition({ x: event.clientX, y: event.clientY })
       setSelectedBlocks(nodesToBlockInfos(nodesToUse))

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

@@ -1641,51 +1641,36 @@ const WorkflowContent = React.memo(() => {
   }, [screenToFlowPosition, handleToolbarDrop])
 
   /**
-   * Focus canvas on changed blocks when diff appears
-   * Focuses on new/edited blocks rather than fitting the entire workflow
+   * Focus canvas on changed blocks when diff appears.
    */
+  const pendingZoomBlockIdsRef = useRef<Set<string> | null>(null)
   const prevDiffReadyRef = useRef(false)
+
+  // Phase 1: When diff becomes ready, record which blocks we want to zoom to
+  // Phase 2 effect is located after displayNodes is defined (search for "Phase 2")
   useEffect(() => {
-    // Only focus when diff transitions from not ready to ready
     if (isDiffReady && !prevDiffReadyRef.current && diffAnalysis) {
+      // Diff just became ready - record blocks to zoom to
       const changedBlockIds = [
         ...(diffAnalysis.new_blocks || []),
         ...(diffAnalysis.edited_blocks || []),
       ]
 
       if (changedBlockIds.length > 0) {
-        const allNodes = getNodes()
-        const changedNodes = allNodes.filter((node) => changedBlockIds.includes(node.id))
-
-        if (changedNodes.length > 0) {
-          logger.info('Diff ready - focusing on changed blocks', {
-            changedBlockIds,
-            foundNodes: changedNodes.length,
-          })
-          requestAnimationFrame(() => {
-            fitViewToBounds({
-              nodes: changedNodes,
-              duration: 600,
-              padding: 0.1,
-              minZoom: 0.5,
-              maxZoom: 1.0,
-            })
-          })
-        } else {
-          logger.info('Diff ready - no changed nodes found, fitting all')
-          requestAnimationFrame(() => {
-            fitViewToBounds({ padding: 0.1, duration: 600 })
-          })
-        }
+        pendingZoomBlockIdsRef.current = new Set(changedBlockIds)
       } else {
-        logger.info('Diff ready - no changed blocks, fitting all')
+        // No specific blocks to focus on, fit all after a frame
+        pendingZoomBlockIdsRef.current = null
         requestAnimationFrame(() => {
           fitViewToBounds({ padding: 0.1, duration: 600 })
         })
       }
+    } else if (!isDiffReady && prevDiffReadyRef.current) {
+      // Diff was cleared (accepted/rejected) - cancel any pending zoom
+      pendingZoomBlockIdsRef.current = null
     }
     prevDiffReadyRef.current = isDiffReady
-  }, [isDiffReady, diffAnalysis, fitViewToBounds, getNodes])
+  }, [isDiffReady, diffAnalysis, fitViewToBounds])
 
   /** Displays trigger warning notifications. */
   useEffect(() => {
@@ -2093,6 +2078,48 @@ const WorkflowContent = React.memo(() => {
     })
   }, [derivedNodes, blocks, pendingSelection, clearPendingSelection])
 
+  // Phase 2: When displayNodes updates, check if pending zoom blocks are ready
+  // (Phase 1 is located earlier in the file where pendingZoomBlockIdsRef is defined)
+  useEffect(() => {
+    const pendingBlockIds = pendingZoomBlockIdsRef.current
+    if (!pendingBlockIds || pendingBlockIds.size === 0) {
+      return
+    }
+
+    // Find the nodes we're waiting for
+    const pendingNodes = displayNodes.filter((node) => pendingBlockIds.has(node.id))
+
+    // Check if all expected nodes are present with valid dimensions
+    const allNodesReady =
+      pendingNodes.length === pendingBlockIds.size &&
+      pendingNodes.every(
+        (node) =>
+          typeof node.width === 'number' &&
+          typeof node.height === 'number' &&
+          node.width > 0 &&
+          node.height > 0
+      )
+
+    if (allNodesReady) {
+      logger.info('Diff ready - focusing on changed blocks', {
+        changedBlockIds: Array.from(pendingBlockIds),
+        foundNodes: pendingNodes.length,
+      })
+      // Clear pending state before zooming to prevent re-triggers
+      pendingZoomBlockIdsRef.current = null
+      // Use requestAnimationFrame to ensure React has finished rendering
+      requestAnimationFrame(() => {
+        fitViewToBounds({
+          nodes: pendingNodes,
+          duration: 600,
+          padding: 0.1,
+          minZoom: 0.5,
+          maxZoom: 1.0,
+        })
+      })
+    }
+  }, [displayNodes, fitViewToBounds])
+
   /** Handles ActionBar remove-from-subflow events. */
   useEffect(() => {
     const handleRemoveFromSubflow = (event: Event) => {

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

@@ -0,0 +1 @@
+export { PreviewContextMenu } from './preview-context-menu'

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

@@ -0,0 +1,97 @@
+'use client'
+
+import type { RefObject } from 'react'
+import { createPortal } from 'react-dom'
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDivider,
+  PopoverItem,
+} from '@/components/emcn'
+
+interface PreviewContextMenuProps {
+  isOpen: boolean
+  position: { x: number; y: number }
+  menuRef: RefObject<HTMLDivElement | null>
+  onClose: () => void
+  onCopy: () => void
+  onSearch?: () => void
+  wrapText?: boolean
+  onToggleWrap?: () => void
+  /** When true, only shows Copy option (for subblock values) */
+  copyOnly?: boolean
+}
+
+/**
+ * Context menu for preview editor sidebar.
+ * Provides copy, search, and display options.
+ * Uses createPortal to render outside any transformed containers (like modals).
+ */
+export function PreviewContextMenu({
+  isOpen,
+  position,
+  menuRef,
+  onClose,
+  onCopy,
+  onSearch,
+  wrapText,
+  onToggleWrap,
+  copyOnly = false,
+}: PreviewContextMenuProps) {
+  if (typeof document === 'undefined') return null
+
+  return createPortal(
+    <Popover
+      open={isOpen}
+      onOpenChange={(open) => !open && onClose()}
+      variant='secondary'
+      size='sm'
+      colorScheme='inverted'
+    >
+      <PopoverAnchor
+        style={{
+          position: 'fixed',
+          left: `${position.x}px`,
+          top: `${position.y}px`,
+          width: '1px',
+          height: '1px',
+        }}
+      />
+      <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
+        <PopoverItem
+          onClick={() => {
+            onCopy()
+            onClose()
+          }}
+        >
+          Copy
+        </PopoverItem>
+
+        {!copyOnly && onSearch && (
+          <>
+            <PopoverDivider />
+            <PopoverItem
+              onClick={() => {
+                onSearch()
+                onClose()
+              }}
+            >
+              Search
+            </PopoverItem>
+          </>
+        )}
+
+        {!copyOnly && onToggleWrap && (
+          <>
+            <PopoverDivider />
+            <PopoverItem showCheck={wrapText} onClick={onToggleWrap}>
+              Wrap Text
+            </PopoverItem>
+          </>
+        )}
+      </PopoverContent>
+    </Popover>,
+    document.body
+  )
+}

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

@@ -0,0 +1 @@
+export { PreviewEditor } from './preview-editor'

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

@@ -6,12 +6,24 @@ import {
   ArrowUp,
   ChevronDown as ChevronDownIcon,
   ChevronUp,
+  ExternalLink,
+  Maximize2,
   RepeatIcon,
   SplitIcon,
   X,
 } from 'lucide-react'
+import { useParams } from 'next/navigation'
 import { ReactFlowProvider } from 'reactflow'
-import { Badge, Button, ChevronDown, Code, Combobox, Input, Label } from '@/components/emcn'
+import {
+  Badge,
+  Button,
+  ChevronDown,
+  Code,
+  Combobox,
+  Input,
+  Label,
+  Tooltip,
+} from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { formatDuration } from '@/lib/core/utils/formatting'
 import { extractReferencePrefixes } from '@/lib/workflows/sanitization/references'
@@ -22,15 +34,42 @@ import {
   isSubBlockFeatureEnabled,
   isSubBlockVisibleForMode,
 } from '@/lib/workflows/subblocks/visibility'
-import { SnapshotContextMenu } from '@/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/components'
 import { SubBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components'
+import { PreviewContextMenu } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-context-menu'
+import { PreviewWorkflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow'
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { getBlock } from '@/blocks'
 import type { BlockConfig, BlockIcon, SubBlockConfig } from '@/blocks/types'
 import { normalizeName } from '@/executor/constants'
 import { navigatePath } from '@/executor/variables/resolvers/reference'
+import { useWorkflowState } from '@/hooks/queries/workflows'
 import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
-import type { BlockState, Loop, Parallel } from '@/stores/workflows/workflow/types'
+import type { BlockState, Loop, Parallel, WorkflowState } from '@/stores/workflows/workflow/types'
+
+/**
+ * CSS override to show full opacity and prevent interaction in readonly preview mode.
+ * Extracted to avoid duplicating the style block in multiple places.
+ */
+const READONLY_PREVIEW_STYLES = `
+  .readonly-preview,
+  .readonly-preview * {
+    cursor: default !important;
+  }
+  .readonly-preview [disabled],
+  .readonly-preview [data-disabled],
+  .readonly-preview input,
+  .readonly-preview textarea,
+  .readonly-preview [role="combobox"],
+  .readonly-preview [role="slider"],
+  .readonly-preview [role="switch"],
+  .readonly-preview [role="checkbox"] {
+    opacity: 1 !important;
+    pointer-events: none;
+  }
+  .readonly-preview .opacity-50 {
+    opacity: 1 !important;
+  }
+`
 
 /**
  * Format a value for display as JSON string
@@ -123,44 +162,31 @@ function formatInlineValue(value: unknown): string {
   return String(value)
 }
 
-interface ExecutionDataSectionProps {
+interface CollapsibleSectionProps {
   title: string
-  data: unknown
+  defaultExpanded?: boolean
+  children: React.ReactNode
+  isEmpty?: boolean
+  emptyMessage?: string
+  /** Whether this section represents an error state (styles title red) */
   isError?: boolean
-  wrapText?: boolean
-  searchQuery?: string
-  currentMatchIndex?: number
-  onMatchCountChange?: (count: number) => void
-  contentRef?: React.RefObject<HTMLDivElement | null>
-  onContextMenu?: (e: React.MouseEvent) => void
 }
 
 /**
- * Collapsible section for execution data (input/output)
- * Uses Code.Viewer for proper syntax highlighting matching the logs UI
+ * Collapsible section wrapper for organizing preview editor content
  */
-function ExecutionDataSection({
+function CollapsibleSection({
   title,
-  data,
+  defaultExpanded = false,
+  children,
+  isEmpty = false,
+  emptyMessage = 'No data',
   isError = false,
-  wrapText = true,
-  searchQuery,
-  currentMatchIndex = 0,
-  onMatchCountChange,
-  contentRef,
-  onContextMenu,
-}: ExecutionDataSectionProps) {
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  const jsonString = useMemo(() => {
-    if (!data) return ''
-    return formatValueAsJson(data)
-  }, [data])
-
-  const isEmpty = jsonString === '—' || jsonString === ''
+}: CollapsibleSectionProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded)
 
   return (
-    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
+    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => setIsExpanded(!isExpanded)}
@@ -199,20 +225,10 @@ function ExecutionDataSection({
         <>
           {isEmpty ? (
             <div className='rounded-[6px] bg-[var(--surface-3)] px-[10px] py-[8px]'>
-              <span className='text-[12px] text-[var(--text-tertiary)]'>No data</span>
+              <span className='text-[12px] text-[var(--text-tertiary)]'>{emptyMessage}</span>
             </div>
           ) : (
-            <div onContextMenu={onContextMenu} ref={contentRef}>
-              <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}
-                searchQuery={searchQuery}
-                currentMatchIndex={currentMatchIndex}
-                onMatchCountChange={onMatchCountChange}
-              />
-            </div>
+            children
           )}
         </>
       )}
@@ -261,9 +277,12 @@ function ConnectionsSection({
   const [expandedVariables, setExpandedVariables] = useState(true)
   const [expandedEnvVars, setExpandedEnvVars] = useState(true)
 
+  /** Stable string of connection IDs to prevent effect from running on every render */
+  const connectionIds = useMemo(() => connections.map((c) => c.blockId).join(','), [connections])
+
   useEffect(() => {
-    setExpandedBlocks(new Set(connections.map((c) => c.blockId)))
-  }, [connections])
+    setExpandedBlocks(new Set(connectionIds.split(',').filter(Boolean)))
+  }, [connectionIds])
 
   const hasContent = connections.length > 0 || workflowVars.length > 0 || envVars.length > 0
 
@@ -549,27 +568,22 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
   const isLoop = block.type === 'loop'
   const config = isLoop ? SUBFLOW_CONFIG.loop : SUBFLOW_CONFIG.parallel
 
-  // Determine current type
   const currentType = isLoop
     ? loop?.loopType || (block.data?.loopType as string) || 'for'
     : parallel?.parallelType || (block.data?.parallelType as string) || 'count'
 
-  // Build type options for combobox - matches SubflowEditor
   const typeOptions = Object.entries(config.typeLabels).map(([value, label]) => ({
     value,
     label,
   }))
 
-  // Determine mode
   const isCountMode = currentType === 'for' || currentType === 'count'
   const isConditionMode = currentType === 'while' || currentType === 'doWhile'
 
-  // Get iterations value
   const iterations = isLoop
     ? (loop?.iterations ?? (block.data?.count as number) ?? 5)
     : (parallel?.count ?? (block.data?.count as number) ?? 1)
 
-  // Get collection/condition value
   const getEditorValue = (): string => {
     if (isConditionMode && isLoop) {
       if (currentType === 'while') {
@@ -589,7 +603,6 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
 
   const editorValue = getEditorValue()
 
-  // Get label for configuration field - matches SubflowEditor exactly
   const getConfigLabel = (): string => {
     if (isCountMode) {
       return `${isLoop ? 'Loop' : 'Parallel'} Iterations`
@@ -601,7 +614,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
   }
 
   return (
-    <div className='flex-1 overflow-y-auto overflow-x-hidden pt-[5px] pb-[8px]'>
+    <div className='flex-1 overflow-y-auto overflow-x-hidden pt-[8px] pb-[8px]'>
       {/* Type Selection - matches SubflowEditor */}
       <div>
         <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
@@ -703,6 +716,8 @@ interface PreviewEditorProps {
   isExecutionMode?: boolean
   /** Optional close handler - if not provided, no close button is shown */
   onClose?: () => void
+  /** Callback to drill down into a nested workflow block */
+  onDrillDown?: (blockId: string, childWorkflowState: WorkflowState) => void
 }
 
 /** Minimum height for the connections section (header only) */
@@ -725,8 +740,8 @@ function PreviewEditorContent({
   parallels,
   isExecutionMode = false,
   onClose,
+  onDrillDown,
 }: PreviewEditorProps) {
-  // Convert Record<string, Variable> to Array<Variable> for iteration
   const normalizedWorkflowVariables = useMemo(() => {
     if (!workflowVariables) return []
     return Object.values(workflowVariables)
@@ -735,10 +750,39 @@ function PreviewEditorContent({
   const blockConfig = getBlock(block.type) as BlockConfig | undefined
   const subBlockValues = block.subBlocks || {}
 
+  const params = useParams()
+  const workspaceId = params.workspaceId as string
+
+  const isWorkflowBlock = block.type === 'workflow' || block.type === 'workflow_input'
+
+  /** Extracts child workflow ID from subblock values for workflow blocks */
+  const childWorkflowId = useMemo(() => {
+    if (!isWorkflowBlock) return null
+    const workflowIdValue = subBlockValues?.workflowId
+    if (workflowIdValue && typeof workflowIdValue === 'object' && 'value' in workflowIdValue) {
+      return (workflowIdValue as { value: unknown }).value as string | null
+    }
+    return workflowIdValue as string | null
+  }, [isWorkflowBlock, subBlockValues?.workflowId])
+
+  const { data: childWorkflowState, isLoading: isLoadingChildWorkflow } = useWorkflowState(
+    childWorkflowId ?? undefined
+  )
+
+  /** Drills down into the child workflow or opens it in a new tab */
+  const handleExpandChildWorkflow = useCallback(() => {
+    if (!childWorkflowId || !childWorkflowState) return
+
+    if (isExecutionMode && onDrillDown) {
+      onDrillDown(block.id, childWorkflowState)
+    } else if (workspaceId) {
+      window.open(`/workspace/${workspaceId}/w/${childWorkflowId}`, '_blank', 'noopener,noreferrer')
+    }
+  }, [childWorkflowId, childWorkflowState, isExecutionMode, onDrillDown, block.id, workspaceId])
+
   const contentRef = useRef<HTMLDivElement>(null)
   const subBlocksRef = useRef<HTMLDivElement>(null)
 
-  // Connections resize state
   const [connectionsHeight, setConnectionsHeight] = useState(DEFAULT_CONNECTIONS_HEIGHT)
   const [isResizing, setIsResizing] = useState(false)
   const startYRef = useRef<number>(0)
@@ -846,10 +890,8 @@ function PreviewEditorContent({
     if (!isResizing) return
 
     const handleMouseMove = (e: MouseEvent) => {
-      const deltaY = startYRef.current - e.clientY // Inverted because we're resizing from bottom up
+      const deltaY = startYRef.current - e.clientY
       let newHeight = startHeightRef.current + deltaY
-
-      // Clamp height between fixed min and max for stable behavior
       newHeight = Math.max(MIN_CONNECTIONS_HEIGHT, Math.min(MAX_CONNECTIONS_HEIGHT, newHeight))
       setConnectionsHeight(newHeight)
     }
@@ -871,7 +913,6 @@ function PreviewEditorContent({
     }
   }, [isResizing])
 
-  // Determine if connections are at minimum height (collapsed state)
   const isConnectionsAtMinHeight = connectionsHeight <= MIN_CONNECTIONS_HEIGHT + 5
 
   const blockNameToId = useMemo(() => {
@@ -891,7 +932,7 @@ function PreviewEditorContent({
       if (!allBlockExecutions || !workflowBlocks) return undefined
       if (!reference.startsWith('<') || !reference.endsWith('>')) return undefined
 
-      const inner = reference.slice(1, -1) // Remove < and >
+      const inner = reference.slice(1, -1)
       const parts = inner.split('.')
       if (parts.length < 1) return undefined
 
@@ -1007,12 +1048,10 @@ function PreviewEditorContent({
     [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
   const parallelConfig = block.type === 'parallel' ? parallels?.[block.id] : undefined
 
-  // Handle subflow blocks
   if (isSubflow) {
     const isLoop = block.type === 'loop'
     const SubflowIcon = isLoop ? RepeatIcon : SplitIcon
@@ -1043,27 +1082,7 @@ function PreviewEditorContent({
         <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
           <div className='flex-1 overflow-y-auto overflow-x-hidden'>
             <div className='readonly-preview px-[8px]'>
-              {/* CSS override to show full opacity and prevent interaction instead of dimmed disabled state */}
-              <style>{`
-                .readonly-preview,
-                .readonly-preview * {
-                  cursor: default !important;
-                }
-                .readonly-preview [disabled],
-                .readonly-preview [data-disabled],
-                .readonly-preview input,
-                .readonly-preview textarea,
-                .readonly-preview [role="combobox"],
-                .readonly-preview [role="slider"],
-                .readonly-preview [role="switch"],
-                .readonly-preview [role="checkbox"] {
-                  opacity: 1 !important;
-                  pointer-events: none;
-                }
-                .readonly-preview .opacity-50 {
-                  opacity: 1 !important;
-                }
-              `}</style>
+              <style>{READONLY_PREVIEW_STYLES}</style>
               <SubflowConfigDisplay block={block} loop={loopConfig} parallel={parallelConfig} />
             </div>
           </div>
@@ -1095,8 +1114,6 @@ function PreviewEditorContent({
 
   const visibleSubBlocks = blockConfig.subBlocks.filter((subBlock) => {
     if (subBlock.hidden || subBlock.hideFromPreview) return false
-    // Only filter out trigger-mode subblocks for non-trigger blocks
-    // Trigger-only blocks (category 'triggers') should display their trigger subblocks
     if (subBlock.mode === 'trigger' && blockConfig.category !== 'triggers') return false
     if (!isSubBlockFeatureEnabled(subBlock)) return false
     if (
@@ -1145,7 +1162,7 @@ function PreviewEditorContent({
 
       {/* Content area */}
       <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
-        {/* Subblocks Section */}
+        {/* Main content sections */}
         <div ref={subBlocksRef} className='subblocks-section flex flex-1 flex-col overflow-hidden'>
           <div className='flex-1 overflow-y-auto overflow-x-hidden'>
             {/* Not Executed Banner - shown when in execution mode but block wasn't executed */}
@@ -1159,91 +1176,154 @@ function PreviewEditorContent({
               </div>
             )}
 
-            {/* Execution Input/Output (if provided) */}
-            {executionData &&
-            (executionData.input !== undefined || executionData.output !== undefined) ? (
-              <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
-                {/* Execution Status & Duration Header */}
-                {(executionData.status || executionData.durationMs !== undefined) && (
-                  <div className='flex items-center justify-between'>
-                    {executionData.status && (
-                      <Badge variant={statusVariant} size='sm' dot>
-                        <span className='capitalize'>{executionData.status}</span>
-                      </Badge>
-                    )}
-                    {executionData.durationMs !== undefined && (
-                      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
-                        {formatDuration(executionData.durationMs, { precision: 2 })}
-                      </span>
-                    )}
-                  </div>
+            {/* Execution Status & Duration Header */}
+            {executionData && (executionData.status || executionData.durationMs !== undefined) && (
+              <div className='flex min-w-0 items-center justify-between overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+                {executionData.status && (
+                  <Badge variant={statusVariant} size='sm' dot>
+                    <span className='capitalize'>{executionData.status}</span>
+                  </Badge>
                 )}
-
-                {/* Divider between Status/Duration and Input/Output */}
-                {(executionData.status || executionData.durationMs !== undefined) &&
-                  (executionData.input !== undefined || executionData.output !== undefined) && (
-                    <div className='border-[var(--border)] border-t border-dashed' />
-                  )}
-
-                {/* Input Section */}
-                {executionData.input !== undefined && (
-                  <ExecutionDataSection
-                    title='Input'
-                    data={executionData.input}
-                    wrapText={wrapText}
-                    searchQuery={isSearchActive ? searchQuery : undefined}
-                    currentMatchIndex={currentMatchIndex}
-                    onMatchCountChange={handleMatchCountChange}
-                    contentRef={contentRef}
-                    onContextMenu={handleExecutionContextMenu}
-                  />
-                )}
-
-                {/* Divider between Input and Output */}
-                {executionData.input !== undefined && executionData.output !== undefined && (
-                  <div className='border-[var(--border)] border-t border-dashed' />
-                )}
-
-                {/* Output Section */}
-                {executionData.output !== undefined && (
-                  <ExecutionDataSection
-                    title={executionData.status === 'error' ? 'Error' : 'Output'}
-                    data={executionData.output}
-                    isError={executionData.status === 'error'}
-                    wrapText={wrapText}
-                    searchQuery={isSearchActive ? searchQuery : undefined}
-                    currentMatchIndex={currentMatchIndex}
-                    onMatchCountChange={handleMatchCountChange}
-                    contentRef={contentRef}
-                    onContextMenu={handleExecutionContextMenu}
-                  />
+                {executionData.durationMs !== undefined && (
+                  <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    {formatDuration(executionData.durationMs, { precision: 2 })}
+                  </span>
                 )}
               </div>
-            ) : null}
+            )}
+
+            {/* Input Section - Collapsible */}
+            {executionData?.input !== undefined && (
+              <CollapsibleSection
+                title='Input'
+                defaultExpanded={false}
+                isEmpty={
+                  formatValueAsJson(executionData.input) === '—' ||
+                  formatValueAsJson(executionData.input) === ''
+                }
+                emptyMessage='No input data'
+              >
+                <div onContextMenu={handleExecutionContextMenu} ref={contentRef}>
+                  <Code.Viewer
+                    code={formatValueAsJson(executionData.input)}
+                    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}
+                    searchQuery={isSearchActive ? searchQuery : undefined}
+                    currentMatchIndex={currentMatchIndex}
+                    onMatchCountChange={handleMatchCountChange}
+                  />
+                </div>
+              </CollapsibleSection>
+            )}
+
+            {/* Output Section - Collapsible, expanded by default */}
+            {executionData?.output !== undefined && (
+              <CollapsibleSection
+                title={executionData.status === 'error' ? 'Error' : 'Output'}
+                defaultExpanded={true}
+                isEmpty={
+                  formatValueAsJson(executionData.output) === '—' ||
+                  formatValueAsJson(executionData.output) === ''
+                }
+                emptyMessage='No output data'
+                isError={executionData.status === 'error'}
+              >
+                <div onContextMenu={handleExecutionContextMenu}>
+                  <Code.Viewer
+                    code={formatValueAsJson(executionData.output)}
+                    language='json'
+                    className={cn(
+                      '!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]',
+                      executionData.status === 'error' && 'text-[var(--text-error)]'
+                    )}
+                    wrapText={wrapText}
+                    searchQuery={isSearchActive ? searchQuery : undefined}
+                    currentMatchIndex={currentMatchIndex}
+                    onMatchCountChange={handleMatchCountChange}
+                  />
+                </div>
+              </CollapsibleSection>
+            )}
+
+            {/* Workflow Preview - only for workflow blocks with a selected child workflow */}
+            {isWorkflowBlock && childWorkflowId && (
+              <div className='px-[8px] pt-[12px]'>
+                <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)]'>
+                        <div
+                          className='h-[18px] w-[18px] animate-spin rounded-full'
+                          style={{
+                            background:
+                              'conic-gradient(from 0deg, hsl(var(--muted-foreground)) 0deg 120deg, transparent 120deg 180deg, hsl(var(--muted-foreground)) 180deg 300deg, transparent 300deg 360deg)',
+                            mask: 'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
+                            WebkitMask:
+                              'radial-gradient(farthest-side, transparent calc(100% - 1.5px), black calc(100% - 1.5px))',
+                          }}
+                        />
+                      </div>
+                    ) : childWorkflowState ? (
+                      <>
+                        <div className='[&_*:active]:!cursor-grabbing [&_*]:!cursor-grab [&_.react-flow__handle]:!hidden h-full w-full'>
+                          <PreviewWorkflow
+                            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={handleExpandChildWorkflow}
+                              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)]'
+                            >
+                              {isExecutionMode && onDrillDown ? (
+                                <Maximize2 className='h-[12px] w-[12px]' />
+                              ) : (
+                                <ExternalLink className='h-[12px] w-[12px]' />
+                              )}
+                            </Button>
+                          </Tooltip.Trigger>
+                          <Tooltip.Content side='top'>
+                            {isExecutionMode && onDrillDown ? 'Expand workflow' : 'Open in new tab'}
+                          </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>
+              </div>
+            )}
 
             {/* Subblock Values - Using SubBlock components in preview mode */}
-            <div className='readonly-preview px-[8px] py-[8px]'>
-              {/* CSS override to show full opacity and prevent interaction instead of dimmed disabled state */}
-              <style>{`
-            .readonly-preview,
-            .readonly-preview * {
-              cursor: default !important;
-            }
-            .readonly-preview [disabled],
-            .readonly-preview [data-disabled],
-            .readonly-preview input,
-            .readonly-preview textarea,
-            .readonly-preview [role="combobox"],
-            .readonly-preview [role="slider"],
-            .readonly-preview [role="switch"],
-            .readonly-preview [role="checkbox"] {
-              opacity: 1 !important;
-              pointer-events: none;
-            }
-            .readonly-preview .opacity-50 {
-              opacity: 1 !important;
-            }
-          `}</style>
+            <div className='readonly-preview px-[8px] pt-[12px] pb-[8px]'>
+              <style>{READONLY_PREVIEW_STYLES}</style>
               {visibleSubBlocks.length > 0 ? (
                 <div className='flex flex-col'>
                   {visibleSubBlocks.map((subBlockConfig, index) => (
@@ -1349,7 +1429,7 @@ function PreviewEditorContent({
       )}
 
       {/* Context Menu */}
-      <SnapshotContextMenu
+      <PreviewContextMenu
         isOpen={isContextMenuOpen}
         position={contextMenuPosition}
         menuRef={contextMenuRef}

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useMemo } from 'react'
+import { type CSSProperties, memo, useMemo } from 'react'
 import { Handle, type NodeProps, Position } from 'reactflow'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 import {
@@ -23,6 +23,27 @@ interface SubBlockValueEntry {
   value: unknown
 }
 
+/**
+ * Handle style constants for preview blocks.
+ * Extracted to avoid recreating style objects on each render.
+ */
+const HANDLE_STYLES = {
+  horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-[2px]',
+  vertical: '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-[2px]',
+  right:
+    '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
+  error:
+    '!z-[10] !border-none !bg-[var(--text-error)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
+} as const
+
+/** Reusable style object for error handles positioned at bottom-right */
+const ERROR_HANDLE_STYLE: CSSProperties = {
+  right: '-7px',
+  top: 'auto',
+  bottom: `${HANDLE_POSITIONS.ERROR_BOTTOM_OFFSET}px`,
+  transform: 'translateY(50%)',
+}
+
 interface WorkflowPreviewBlockData {
   type: string
   name: string
@@ -35,6 +56,8 @@ interface WorkflowPreviewBlockData {
   executionStatus?: ExecutionStatus
   /** Subblock values from the workflow state */
   subBlockValues?: Record<string, SubBlockValueEntry | unknown>
+  /** Skips expensive subblock computations for thumbnails/template previews */
+  lightweight?: boolean
 }
 
 /**
@@ -157,21 +180,17 @@ function resolveToolsDisplay(
       if (!tool || typeof tool !== 'object') return null
       const t = tool as Record<string, unknown>
 
-      // Priority 1: Use tool.title if already populated
       if (t.title && typeof t.title === 'string') return t.title
 
-      // Priority 2: Extract from inline schema (legacy format)
       const schema = t.schema as Record<string, unknown> | undefined
       if (schema?.function && typeof schema.function === 'object') {
         const fn = schema.function as Record<string, unknown>
         if (fn.name && typeof fn.name === 'string') return fn.name
       }
 
-      // Priority 3: Extract from OpenAI function format
       const fn = t.function as Record<string, unknown> | undefined
       if (fn?.name && typeof fn.name === 'string') return fn.name
 
-      // Priority 4: Resolve built-in tool blocks from registry
       if (
         typeof t.type === 'string' &&
         t.type !== 'custom-tool' &&
@@ -204,21 +223,16 @@ function resolveToolsDisplay(
  * - Shows '-' for other selector types that need hydration
  */
 function SubBlockRow({ title, value, subBlock, rawValue }: SubBlockRowProps) {
-  // Mask password fields
   const isPasswordField = subBlock?.password === true
   const maskedValue = isPasswordField && value && value !== '-' ? '•••' : null
 
-  // Resolve various display names (synchronous access, matching WorkflowBlock priority)
   const dropdownLabel = resolveDropdownLabel(subBlock, rawValue)
   const variablesDisplay = resolveVariablesDisplay(subBlock, rawValue)
   const toolsDisplay = resolveToolsDisplay(subBlock, rawValue)
   const workflowName = resolveWorkflowName(subBlock, rawValue)
 
-  // Check if this is a selector type that needs hydration (show '-' for raw IDs)
   const isSelectorType = subBlock?.type && SELECTOR_TYPES_HYDRATION_REQUIRED.includes(subBlock.type)
 
-  // Compute final display value matching WorkflowBlock logic
-  // Priority order matches WorkflowBlock: masked > hydrated names > selector fallback > raw value
   const hydratedName = dropdownLabel || variablesDisplay || toolsDisplay || workflowName
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
@@ -258,6 +272,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
     isPreviewSelected = false,
     executionStatus,
     subBlockValues,
+    lightweight = false,
   } = data
 
   const blockConfig = getBlock(type)
@@ -268,44 +283,68 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
   )
 
   const rawValues = useMemo(() => {
-    if (!subBlockValues) return {}
+    if (lightweight || !subBlockValues) return {}
     return Object.entries(subBlockValues).reduce<Record<string, unknown>>((acc, [key, entry]) => {
       acc[key] = extractValue(entry)
       return acc
     }, {})
-  }, [subBlockValues])
+  }, [subBlockValues, lightweight])
 
   const visibleSubBlocks = useMemo(() => {
     if (!blockConfig?.subBlocks) return []
 
-    const isStarterOrTrigger =
-      blockConfig.category === 'triggers' || type === 'starter' || isTrigger
+    const isPureTriggerBlock = blockConfig.triggers?.enabled && blockConfig.category === 'triggers'
+    const effectiveTrigger = isTrigger || type === 'starter'
 
     return blockConfig.subBlocks.filter((subBlock) => {
       if (subBlock.hidden) return false
       if (subBlock.hideFromPreview) return false
       if (!isSubBlockFeatureEnabled(subBlock)) return false
 
-      // Handle trigger mode visibility
-      if (subBlock.mode === 'trigger' && !isStarterOrTrigger) return false
+      if (effectiveTrigger) {
+        const isValidTriggerSubblock = isPureTriggerBlock
+          ? subBlock.mode === 'trigger' || !subBlock.mode
+          : subBlock.mode === 'trigger'
+        if (!isValidTriggerSubblock) return false
+      } else {
+        if (subBlock.mode === 'trigger') return false
+      }
+
+      /** Skip value-dependent visibility checks in lightweight mode */
+      if (lightweight) return !subBlock.condition
 
-      // Check advanced mode visibility
       if (!isSubBlockVisibleForMode(subBlock, false, canonicalIndex, rawValues, undefined)) {
         return false
       }
-
-      // Check condition visibility
       if (!subBlock.condition) return true
       return evaluateSubBlockCondition(subBlock.condition, rawValues)
     })
-  }, [blockConfig?.subBlocks, blockConfig?.category, type, isTrigger, canonicalIndex, rawValues])
+  }, [
+    lightweight,
+    blockConfig?.subBlocks,
+    blockConfig?.triggers?.enabled,
+    blockConfig?.category,
+    type,
+    isTrigger,
+    canonicalIndex,
+    rawValues,
+  ])
 
   /**
-   * Compute condition rows for condition blocks
+   * Compute condition rows for condition blocks.
+   * In lightweight mode, returns default structure without parsing values.
    */
   const conditionRows = useMemo(() => {
     if (type !== 'condition') return []
 
+    /** Default structure for lightweight mode or when no values */
+    const defaultRows = [
+      { id: 'if', title: 'if', value: '' },
+      { id: 'else', title: 'else', value: '' },
+    ]
+
+    if (lightweight) return defaultRows
+
     const conditionsValue = rawValues.conditions
     const raw = typeof conditionsValue === 'string' ? conditionsValue : undefined
 
@@ -325,21 +364,24 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         }
       }
     } catch {
-      // Failed to parse, use fallback
+      /* empty */
     }
 
-    return [
-      { id: 'if', title: 'if', value: '' },
-      { id: 'else', title: 'else', value: '' },
-    ]
-  }, [type, rawValues])
+    return defaultRows
+  }, [type, rawValues, lightweight])
 
   /**
-   * Compute router rows for router_v2 blocks
+   * Compute router rows for router_v2 blocks.
+   * In lightweight mode, returns default structure without parsing values.
    */
   const routerRows = useMemo(() => {
     if (type !== 'router_v2') return []
 
+    /** Default structure for lightweight mode or when no values */
+    const defaultRows = [{ id: 'route1', value: '' }]
+
+    if (lightweight) return defaultRows
+
     const routesValue = rawValues.routes
     const raw = typeof routesValue === 'string' ? routesValue : undefined
 
@@ -357,11 +399,11 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         }
       }
     } catch {
-      // Failed to parse, use fallback
+      /* empty */
     }
 
-    return [{ id: 'route1', value: '' }]
-  }, [type, rawValues])
+    return defaultRows
+  }, [type, rawValues, lightweight])
 
   if (!blockConfig) {
     return null
@@ -379,9 +421,6 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         ? routerRows.length > 0 || shouldShowDefaultHandles
         : hasSubBlocks || shouldShowDefaultHandles
 
-  const horizontalHandleClass = '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-[2px]'
-  const verticalHandleClass = '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-[2px]'
-
   const hasError = executionStatus === 'error'
   const hasSuccess = executionStatus === 'success'
 
@@ -406,7 +445,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
           type='target'
           position={horizontalHandles ? Position.Left : Position.Top}
           id='target'
-          className={horizontalHandles ? horizontalHandleClass : verticalHandleClass}
+          className={horizontalHandles ? HANDLE_STYLES.horizontal : HANDLE_STYLES.vertical}
           style={
             horizontalHandles
               ? { left: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
@@ -439,36 +478,37 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
       {hasContentBelowHeader && (
         <div className='flex flex-col gap-[8px] p-[8px]'>
           {type === 'condition' ? (
-            // Condition block: render condition rows
             conditionRows.map((cond) => (
-              <SubBlockRow key={cond.id} title={cond.title} value={getDisplayValue(cond.value)} />
+              <SubBlockRow
+                key={cond.id}
+                title={cond.title}
+                value={lightweight ? undefined : getDisplayValue(cond.value)}
+              />
             ))
           ) : type === 'router_v2' ? (
-            // Router block: render context + route rows
             <>
               <SubBlockRow
                 key='context'
                 title='Context'
-                value={getDisplayValue(rawValues.context)}
+                value={lightweight ? undefined : getDisplayValue(rawValues.context)}
               />
               {routerRows.map((route, index) => (
                 <SubBlockRow
                   key={route.id}
                   title={`Route ${index + 1}`}
-                  value={getDisplayValue(route.value)}
+                  value={lightweight ? undefined : getDisplayValue(route.value)}
                 />
               ))}
             </>
           ) : (
-            // Standard blocks: render visible subblocks
             visibleSubBlocks.map((subBlock) => {
-              const rawValue = rawValues[subBlock.id]
+              const rawValue = lightweight ? undefined : rawValues[subBlock.id]
               return (
                 <SubBlockRow
                   key={subBlock.id}
                   title={subBlock.title ?? subBlock.id}
-                  value={getDisplayValue(rawValue)}
-                  subBlock={subBlock}
+                  value={lightweight ? undefined : getDisplayValue(rawValue)}
+                  subBlock={lightweight ? undefined : subBlock}
                   rawValue={rawValue}
                 />
               )
@@ -479,27 +519,101 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         </div>
       )}
 
-      {/* Source handle */}
-      <Handle
-        type='source'
-        position={horizontalHandles ? Position.Right : Position.Bottom}
-        id='source'
-        className={horizontalHandles ? horizontalHandleClass : verticalHandleClass}
-        style={
-          horizontalHandles
-            ? { right: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
-            : { bottom: '-7px', left: '50%', transform: 'translateX(-50%)' }
-        }
-      />
+      {/* Condition block handles */}
+      {type === 'condition' && (
+        <>
+          {conditionRows.map((cond, condIndex) => {
+            const topOffset =
+              HANDLE_POSITIONS.CONDITION_START_Y + condIndex * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+            return (
+              <Handle
+                key={`handle-${cond.id}`}
+                type='source'
+                position={Position.Right}
+                id={`condition-${cond.id}`}
+                className={HANDLE_STYLES.right}
+                style={{ top: `${topOffset}px`, right: '-7px', transform: 'translateY(-50%)' }}
+              />
+            )
+          })}
+          <Handle
+            type='source'
+            position={Position.Right}
+            id='error'
+            className={HANDLE_STYLES.error}
+            style={ERROR_HANDLE_STYLE}
+          />
+        </>
+      )}
+
+      {/* Router block handles */}
+      {type === 'router_v2' && (
+        <>
+          {routerRows.map((route, routeIndex) => {
+            const topOffset =
+              HANDLE_POSITIONS.CONDITION_START_Y +
+              (routeIndex + 1) * HANDLE_POSITIONS.CONDITION_ROW_HEIGHT
+            return (
+              <Handle
+                key={`handle-${route.id}`}
+                type='source'
+                position={Position.Right}
+                id={`router-${route.id}`}
+                className={HANDLE_STYLES.right}
+                style={{ top: `${topOffset}px`, right: '-7px', transform: 'translateY(-50%)' }}
+              />
+            )
+          })}
+          <Handle
+            type='source'
+            position={Position.Right}
+            id='error'
+            className={HANDLE_STYLES.error}
+            style={ERROR_HANDLE_STYLE}
+          />
+        </>
+      )}
+
+      {/* Source and error handles for non-condition/router blocks */}
+      {type !== 'condition' && type !== 'router_v2' && type !== 'response' && (
+        <>
+          <Handle
+            type='source'
+            position={horizontalHandles ? Position.Right : Position.Bottom}
+            id='source'
+            className={horizontalHandles ? HANDLE_STYLES.right : HANDLE_STYLES.vertical}
+            style={
+              horizontalHandles
+                ? { right: '-7px', top: `${HANDLE_POSITIONS.DEFAULT_Y_OFFSET}px` }
+                : { bottom: '-7px', left: '50%', transform: 'translateX(-50%)' }
+            }
+          />
+          {shouldShowDefaultHandles && (
+            <Handle
+              type='source'
+              position={Position.Right}
+              id='error'
+              className={HANDLE_STYLES.error}
+              style={ERROR_HANDLE_STYLE}
+            />
+          )}
+        </>
+      )}
     </div>
   )
 }
 
+/**
+ * Custom comparison function for React.memo optimization.
+ * Uses fast-path primitive comparison before shallow comparing subBlockValues.
+ * @param prevProps - Previous render props
+ * @param nextProps - Next render props
+ * @returns True if render should be skipped (props are equal)
+ */
 function shouldSkipPreviewBlockRender(
   prevProps: NodeProps<WorkflowPreviewBlockData>,
   nextProps: NodeProps<WorkflowPreviewBlockData>
 ): boolean {
-  // Check primitive props first (fast path)
   if (
     prevProps.id !== nextProps.id ||
     prevProps.data.type !== nextProps.data.type ||
@@ -508,38 +622,41 @@ function shouldSkipPreviewBlockRender(
     prevProps.data.horizontalHandles !== nextProps.data.horizontalHandles ||
     prevProps.data.enabled !== nextProps.data.enabled ||
     prevProps.data.isPreviewSelected !== nextProps.data.isPreviewSelected ||
-    prevProps.data.executionStatus !== nextProps.data.executionStatus
+    prevProps.data.executionStatus !== nextProps.data.executionStatus ||
+    prevProps.data.lightweight !== nextProps.data.lightweight
   ) {
     return false
   }
 
-  // Compare subBlockValues by reference first
+  /** Skip subBlockValues comparison in lightweight mode */
+  if (nextProps.data.lightweight) return true
+
   const prevValues = prevProps.data.subBlockValues
   const nextValues = nextProps.data.subBlockValues
 
-  if (prevValues === nextValues) {
-    return true
-  }
+  if (prevValues === nextValues) return true
+  if (!prevValues || !nextValues) return false
 
-  if (!prevValues || !nextValues) {
-    return false
-  }
-
-  // Shallow compare keys and values
   const prevKeys = Object.keys(prevValues)
   const nextKeys = Object.keys(nextValues)
 
-  if (prevKeys.length !== nextKeys.length) {
-    return false
-  }
+  if (prevKeys.length !== nextKeys.length) return false
 
   for (const key of prevKeys) {
-    if (prevValues[key] !== nextValues[key]) {
-      return false
-    }
+    if (prevValues[key] !== nextValues[key]) return false
   }
 
   return true
 }
 
-export const WorkflowPreviewBlock = memo(WorkflowPreviewBlockInner, shouldSkipPreviewBlockRender)
+/**
+ * Preview block component for workflow visualization in readonly contexts.
+ * Optimized for rendering without hooks or store subscriptions.
+ *
+ * @remarks
+ * - Renders block header, subblock values, and connection handles
+ * - Supports condition, router, and standard block types
+ * - Shows error handles for non-trigger blocks
+ * - Displays execution status via colored ring overlays
+ */
+export const PreviewBlock = memo(WorkflowPreviewBlockInner, shouldSkipPreviewBlockRender)

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

@@ -0,0 +1 @@
+export { PreviewBlock } from './block'

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

@@ -0,0 +1 @@
+export { PreviewSubflow } from './subflow'

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

@@ -5,6 +5,9 @@ import { RepeatIcon, SplitIcon } from 'lucide-react'
 import { Handle, type NodeProps, Position } from 'reactflow'
 import { HANDLE_POSITIONS } from '@/lib/workflows/blocks/block-dimensions'
 
+/** Execution status for subflows in preview mode */
+type ExecutionStatus = 'success' | 'error' | 'not-executed'
+
 interface WorkflowPreviewSubflowData {
   name: string
   width?: number
@@ -12,6 +15,10 @@ interface WorkflowPreviewSubflowData {
   kind: 'loop' | 'parallel'
   /** Whether this subflow is selected in preview mode */
   isPreviewSelected?: boolean
+  /** Execution status for highlighting the subflow container */
+  executionStatus?: ExecutionStatus
+  /** Skips expensive computations for thumbnails/template previews (unused in subflow, for consistency) */
+  lightweight?: boolean
 }
 
 /**
@@ -20,7 +27,7 @@ interface WorkflowPreviewSubflowData {
  * or interactive features.
  */
 function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowData>) {
-  const { name, width = 500, height = 300, kind, isPreviewSelected = false } = data
+  const { name, width = 500, height = 300, kind, isPreviewSelected = false, executionStatus } = data
 
   const isLoop = kind === 'loop'
   const BlockIcon = isLoop ? RepeatIcon : SplitIcon
@@ -35,6 +42,9 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
   const rightHandleClass =
     '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none'
 
+  const hasError = executionStatus === 'error'
+  const hasSuccess = executionStatus === 'success'
+
   return (
     <div
       className='relative select-none rounded-[8px] border border-[var(--border-1)]'
@@ -43,10 +53,18 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
         height,
       }}
     >
-      {/* Selection ring overlay */}
+      {/* Selection ring overlay (takes priority over execution rings) */}
       {isPreviewSelected && (
         <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-secondary)]' />
       )}
+      {/* Success ring overlay (only shown if not selected) */}
+      {!isPreviewSelected && hasSuccess && (
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-tertiary-2)]' />
+      )}
+      {/* Error ring overlay (only shown if not selected) */}
+      {!isPreviewSelected && hasError && (
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--text-error)]' />
+      )}
 
       {/* Target handle on left (input to the subflow) */}
       <Handle
@@ -110,4 +128,4 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
   )
 }
 
-export const WorkflowPreviewSubflow = memo(WorkflowPreviewSubflowInner)
+export const PreviewSubflow = memo(WorkflowPreviewSubflowInner)

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

@@ -0,0 +1 @@
+export { getLeftmostBlockId, PreviewWorkflow } from './preview-workflow'

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

@@ -0,0 +1,613 @@
+'use client'
+
+import { useEffect, useMemo, useRef } from 'react'
+import ReactFlow, {
+  ConnectionLineType,
+  type Edge,
+  type EdgeTypes,
+  type Node,
+  type NodeTypes,
+  ReactFlowProvider,
+  useReactFlow,
+} from 'reactflow'
+import 'reactflow/dist/style.css'
+
+import { createLogger } from '@sim/logger'
+import { cn } from '@/lib/core/utils/cn'
+import { BLOCK_DIMENSIONS, CONTAINER_DIMENSIONS } from '@/lib/workflows/blocks/block-dimensions'
+import { WorkflowEdge } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge'
+import { estimateBlockDimensions } from '@/app/workspace/[workspaceId]/w/[workflowId]/utils'
+import { PreviewBlock } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block'
+import { PreviewSubflow } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow'
+import type { BlockState, WorkflowState } from '@/stores/workflows/workflow/types'
+
+const logger = createLogger('PreviewWorkflow')
+
+/**
+ * Gets block dimensions for preview purposes.
+ * For containers, uses stored dimensions or defaults.
+ * For regular blocks, uses stored height or estimates based on type.
+ */
+function getPreviewBlockDimensions(block: BlockState): { width: number; height: number } {
+  if (block.type === 'loop' || block.type === 'parallel') {
+    return {
+      width: block.data?.width
+        ? Math.max(block.data.width, CONTAINER_DIMENSIONS.MIN_WIDTH)
+        : CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
+      height: block.data?.height
+        ? Math.max(block.data.height, CONTAINER_DIMENSIONS.MIN_HEIGHT)
+        : CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
+    }
+  }
+
+  if (block.height) {
+    return {
+      width: BLOCK_DIMENSIONS.FIXED_WIDTH,
+      height: Math.max(block.height, BLOCK_DIMENSIONS.MIN_HEIGHT),
+    }
+  }
+
+  return estimateBlockDimensions(block.type)
+}
+
+/**
+ * Calculates container dimensions based on child block positions and sizes.
+ * Mirrors the logic from useNodeUtilities.calculateLoopDimensions.
+ */
+function calculateContainerDimensions(
+  containerId: string,
+  blocks: Record<string, BlockState>
+): { width: number; height: number } {
+  const childBlocks = Object.values(blocks).filter((block) => block?.data?.parentId === containerId)
+
+  if (childBlocks.length === 0) {
+    return {
+      width: CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
+      height: CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
+    }
+  }
+
+  let maxRight = 0
+  let maxBottom = 0
+
+  for (const child of childBlocks) {
+    if (!child?.position) continue
+
+    const { width: childWidth, height: childHeight } = getPreviewBlockDimensions(child)
+
+    maxRight = Math.max(maxRight, child.position.x + childWidth)
+    maxBottom = Math.max(maxBottom, child.position.y + childHeight)
+  }
+
+  const width = Math.max(
+    CONTAINER_DIMENSIONS.DEFAULT_WIDTH,
+    maxRight + CONTAINER_DIMENSIONS.RIGHT_PADDING
+  )
+  const height = Math.max(
+    CONTAINER_DIMENSIONS.DEFAULT_HEIGHT,
+    maxBottom + CONTAINER_DIMENSIONS.BOTTOM_PADDING
+  )
+
+  return { width, height }
+}
+
+/**
+ * Finds the leftmost block ID from a workflow state.
+ * Excludes subflow containers (loop/parallel) from consideration.
+ * @param workflowState - The workflow state to search
+ * @returns The ID of the leftmost block, or null if no blocks exist
+ */
+export function getLeftmostBlockId(workflowState: WorkflowState | null | undefined): string | null {
+  if (!workflowState?.blocks) return null
+
+  let leftmostId: string | null = null
+  let minX = Number.POSITIVE_INFINITY
+
+  for (const [blockId, block] of Object.entries(workflowState.blocks)) {
+    if (!block || block.type === 'loop' || block.type === 'parallel') continue
+    const x = block.position?.x ?? Number.POSITIVE_INFINITY
+    if (x < minX) {
+      minX = x
+      leftmostId = blockId
+    }
+  }
+
+  return leftmostId
+}
+
+/** Execution status for edges/nodes in the preview */
+type ExecutionStatus = 'success' | 'error' | 'not-executed'
+
+/** Calculates absolute position for blocks, handling nested subflows */
+function calculateAbsolutePosition(
+  block: BlockState,
+  blocks: Record<string, BlockState>
+): { x: number; y: number } {
+  if (!block.data?.parentId) {
+    return block.position
+  }
+
+  const parentBlock = blocks[block.data.parentId]
+  if (!parentBlock) {
+    logger.warn(`Parent block not found for child block`)
+    return block.position
+  }
+
+  const parentAbsolutePosition = calculateAbsolutePosition(parentBlock, blocks)
+  return {
+    x: parentAbsolutePosition.x + block.position.x,
+    y: parentAbsolutePosition.y + block.position.y,
+  }
+}
+
+interface PreviewWorkflowProps {
+  workflowState: WorkflowState
+  className?: string
+  height?: string | number
+  width?: string | number
+  isPannable?: boolean
+  defaultPosition?: { x: number; y: number }
+  defaultZoom?: number
+  fitPadding?: number
+  onNodeClick?: (blockId: string, mousePosition: { x: number; y: number }) => void
+  /** Callback when a node is right-clicked */
+  onNodeContextMenu?: (blockId: string, mousePosition: { x: number; y: number }) => void
+  /** Callback when the canvas (empty area) is clicked */
+  onPaneClick?: () => void
+  /** Cursor style to show when hovering the canvas */
+  cursorStyle?: 'default' | 'pointer' | 'grab'
+  /** Map of executed block IDs to their status for highlighting the execution path */
+  executedBlocks?: Record<string, { status: string }>
+  /** Currently selected block ID for highlighting */
+  selectedBlockId?: string | null
+  /** Skips expensive subblock computations for thumbnails/template previews */
+  lightweight?: boolean
+}
+
+/**
+ * Preview node types using minimal components without hooks or store subscriptions.
+ * This prevents interaction issues while allowing canvas panning and node clicking.
+ */
+const previewNodeTypes: NodeTypes = {
+  workflowBlock: PreviewBlock,
+  noteBlock: PreviewBlock,
+  subflowNode: PreviewSubflow,
+}
+
+const edgeTypes: EdgeTypes = {
+  default: WorkflowEdge,
+  workflowEdge: WorkflowEdge,
+}
+
+interface FitViewOnChangeProps {
+  nodeIds: string
+  fitPadding: number
+  containerRef: React.RefObject<HTMLDivElement | null>
+}
+
+/**
+ * Helper component that calls fitView when the set of nodes changes or when the container resizes.
+ * Only triggers on actual node additions/removals, not on selection changes.
+ * Must be rendered inside ReactFlowProvider.
+ */
+function FitViewOnChange({ nodeIds, fitPadding, containerRef }: FitViewOnChangeProps) {
+  const { fitView } = useReactFlow()
+  const lastNodeIdsRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    if (!nodeIds.length) return
+    const shouldFit = lastNodeIdsRef.current !== nodeIds
+    if (!shouldFit) return
+    lastNodeIdsRef.current = nodeIds
+
+    const timeoutId = setTimeout(() => {
+      fitView({ padding: fitPadding, duration: 200 })
+    }, 50)
+    return () => clearTimeout(timeoutId)
+  }, [nodeIds, fitPadding, fitView])
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) return
+
+    let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+    const resizeObserver = new ResizeObserver(() => {
+      if (timeoutId) clearTimeout(timeoutId)
+      timeoutId = setTimeout(() => {
+        fitView({ padding: fitPadding, duration: 150 })
+      }, 100)
+    })
+
+    resizeObserver.observe(container)
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId)
+      resizeObserver.disconnect()
+    }
+  }, [containerRef, fitPadding, fitView])
+
+  return null
+}
+
+/**
+ * Readonly workflow component for visualizing workflow state.
+ * Renders blocks, subflows, and edges with execution status highlighting.
+ *
+ * @remarks
+ * - Supports panning and node click interactions
+ * - Shows execution path via green edges for successful paths
+ * - Error edges display red by default, green when error path was taken
+ * - Fits view automatically when nodes change or container resizes
+ */
+export function PreviewWorkflow({
+  workflowState,
+  className,
+  height = '100%',
+  width = '100%',
+  isPannable = true,
+  defaultPosition,
+  defaultZoom = 0.8,
+  fitPadding = 0.25,
+  onNodeClick,
+  onNodeContextMenu,
+  onPaneClick,
+  cursorStyle = 'grab',
+  executedBlocks,
+  selectedBlockId,
+  lightweight = false,
+}: PreviewWorkflowProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const nodeTypes = previewNodeTypes
+  const isValidWorkflowState = workflowState?.blocks && workflowState.edges
+
+  const blocksStructure = useMemo(() => {
+    if (!isValidWorkflowState) return { count: 0, ids: '' }
+    return {
+      count: Object.keys(workflowState.blocks || {}).length,
+      ids: Object.keys(workflowState.blocks || {}).join(','),
+    }
+  }, [workflowState.blocks, isValidWorkflowState])
+
+  const loopsStructure = useMemo(() => {
+    if (!isValidWorkflowState) return { count: 0, ids: '' }
+    return {
+      count: Object.keys(workflowState.loops || {}).length,
+      ids: Object.keys(workflowState.loops || {}).join(','),
+    }
+  }, [workflowState.loops, isValidWorkflowState])
+
+  const parallelsStructure = useMemo(() => {
+    if (!isValidWorkflowState) return { count: 0, ids: '' }
+    return {
+      count: Object.keys(workflowState.parallels || {}).length,
+      ids: Object.keys(workflowState.parallels || {}).join(','),
+    }
+  }, [workflowState.parallels, isValidWorkflowState])
+
+  /** Map of subflow ID to child block IDs */
+  const subflowChildrenMap = useMemo(() => {
+    if (!isValidWorkflowState) return new Map<string, string[]>()
+
+    const map = new Map<string, string[]>()
+    for (const [blockId, block] of Object.entries(workflowState.blocks || {})) {
+      const parentId = block?.data?.parentId
+      if (parentId) {
+        const children = map.get(parentId) || []
+        children.push(blockId)
+        map.set(parentId, children)
+      }
+    }
+    return map
+  }, [workflowState.blocks, isValidWorkflowState])
+
+  /** Derives subflow execution status from child blocks */
+  const getSubflowExecutionStatus = useMemo(() => {
+    return (subflowId: string): ExecutionStatus | undefined => {
+      if (!executedBlocks) return undefined
+
+      const childIds = subflowChildrenMap.get(subflowId)
+      if (!childIds?.length) return undefined
+
+      const childStatuses = childIds.map((id) => executedBlocks[id]).filter(Boolean)
+      if (childStatuses.length === 0) return undefined
+
+      if (childStatuses.some((s) => s.status === 'error')) return 'error'
+      if (childStatuses.some((s) => s.status === 'success')) return 'success'
+      return 'not-executed'
+    }
+  }, [executedBlocks, subflowChildrenMap])
+
+  /** Gets execution status for any block, deriving subflow status from children */
+  const getBlockExecutionStatus = useMemo(() => {
+    return (blockId: string): { status: string; executed: boolean } | undefined => {
+      if (!executedBlocks) return undefined
+
+      const directStatus = executedBlocks[blockId]
+      if (directStatus) {
+        return { status: directStatus.status, executed: true }
+      }
+
+      const block = workflowState.blocks?.[blockId]
+      if (block && (block.type === 'loop' || block.type === 'parallel')) {
+        const subflowStatus = getSubflowExecutionStatus(blockId)
+        if (subflowStatus) {
+          return { status: subflowStatus, executed: true }
+        }
+
+        const incomingEdge = workflowState.edges?.find((e) => e.target === blockId)
+        if (incomingEdge && executedBlocks[incomingEdge.source]?.status === 'success') {
+          return { status: 'not-executed', executed: true }
+        }
+      }
+
+      return undefined
+    }
+  }, [executedBlocks, workflowState.blocks, workflowState.edges, getSubflowExecutionStatus])
+
+  const edgesStructure = useMemo(() => {
+    if (!isValidWorkflowState) return { count: 0, ids: '' }
+    return {
+      count: workflowState.edges?.length || 0,
+      ids: workflowState.edges?.map((e) => e.id).join(',') || '',
+    }
+  }, [workflowState.edges, isValidWorkflowState])
+
+  const nodes: Node[] = useMemo(() => {
+    if (!isValidWorkflowState) return []
+
+    const nodeArray: Node[] = []
+
+    Object.entries(workflowState.blocks || {}).forEach(([blockId, block]) => {
+      if (!block || !block.type) {
+        logger.warn(`Skipping invalid block: ${blockId}`)
+        return
+      }
+
+      const absolutePosition = calculateAbsolutePosition(block, workflowState.blocks)
+
+      if (block.type === 'loop' || block.type === 'parallel') {
+        const isSelected = selectedBlockId === blockId
+        const dimensions = calculateContainerDimensions(blockId, workflowState.blocks)
+        const subflowExecutionStatus = getSubflowExecutionStatus(blockId)
+
+        nodeArray.push({
+          id: blockId,
+          type: 'subflowNode',
+          position: absolutePosition,
+          draggable: false,
+          data: {
+            name: block.name,
+            width: dimensions.width,
+            height: dimensions.height,
+            kind: block.type as 'loop' | 'parallel',
+            isPreviewSelected: isSelected,
+            executionStatus: subflowExecutionStatus,
+            lightweight,
+          },
+        })
+        return
+      }
+
+      const isSelected = selectedBlockId === blockId
+
+      let executionStatus: ExecutionStatus | undefined
+      if (executedBlocks) {
+        const blockExecution = executedBlocks[blockId]
+        if (blockExecution) {
+          if (blockExecution.status === 'error') {
+            executionStatus = 'error'
+          } else if (blockExecution.status === 'success') {
+            executionStatus = 'success'
+          } else {
+            executionStatus = 'not-executed'
+          }
+        } else {
+          executionStatus = 'not-executed'
+        }
+      }
+
+      nodeArray.push({
+        id: blockId,
+        type: 'workflowBlock',
+        position: absolutePosition,
+        draggable: false,
+        zIndex: block.data?.parentId ? 10 : undefined,
+        data: {
+          type: block.type,
+          name: block.name,
+          isTrigger: block.triggerMode === true,
+          horizontalHandles: block.horizontalHandles ?? false,
+          enabled: block.enabled ?? true,
+          isPreviewSelected: isSelected,
+          executionStatus,
+          subBlockValues: block.subBlocks,
+          lightweight,
+        },
+      })
+    })
+
+    return nodeArray
+  }, [
+    blocksStructure,
+    loopsStructure,
+    parallelsStructure,
+    workflowState.blocks,
+    isValidWorkflowState,
+    executedBlocks,
+    selectedBlockId,
+    getSubflowExecutionStatus,
+    lightweight,
+  ])
+
+  const edges: Edge[] = useMemo(() => {
+    if (!isValidWorkflowState) return []
+
+    /**
+     * Determines edge execution status for visualization.
+     * Error edges turn green when taken (source errored, target executed).
+     * Normal edges turn green when both source succeeded and target executed.
+     */
+    const getEdgeExecutionStatus = (edge: {
+      source: string
+      target: string
+      sourceHandle?: string | null
+    }): ExecutionStatus | undefined => {
+      if (!executedBlocks) return undefined
+
+      const sourceStatus = getBlockExecutionStatus(edge.source)
+      const targetStatus = getBlockExecutionStatus(edge.target)
+      const isErrorEdge = edge.sourceHandle === 'error'
+
+      if (isErrorEdge) {
+        return sourceStatus?.status === 'error' && targetStatus?.executed
+          ? 'success'
+          : 'not-executed'
+      }
+
+      const isSubflowStartEdge =
+        edge.sourceHandle === 'loop-start-source' || edge.sourceHandle === 'parallel-start-source'
+
+      if (isSubflowStartEdge) {
+        const incomingEdge = workflowState.edges?.find((e) => e.target === edge.source)
+        const incomingSucceeded = incomingEdge
+          ? executedBlocks[incomingEdge.source]?.status === 'success'
+          : false
+        return incomingSucceeded ? 'success' : 'not-executed'
+      }
+
+      const targetBlock = workflowState.blocks?.[edge.target]
+      const targetIsSubflow =
+        targetBlock && (targetBlock.type === 'loop' || targetBlock.type === 'parallel')
+
+      if (sourceStatus?.status === 'success' && (targetStatus?.executed || targetIsSubflow)) {
+        return 'success'
+      }
+
+      return 'not-executed'
+    }
+
+    return (workflowState.edges || []).map((edge) => {
+      const status = getEdgeExecutionStatus(edge)
+      const isErrorEdge = edge.sourceHandle === 'error'
+      return {
+        id: edge.id,
+        source: edge.source,
+        target: edge.target,
+        sourceHandle: edge.sourceHandle,
+        targetHandle: edge.targetHandle,
+        data: {
+          ...(status ? { executionStatus: status } : {}),
+          sourceHandle: edge.sourceHandle,
+        },
+        zIndex: status === 'success' ? 10 : isErrorEdge ? 5 : 0,
+      }
+    })
+  }, [
+    edgesStructure,
+    workflowState.edges,
+    workflowState.blocks,
+    isValidWorkflowState,
+    executedBlocks,
+    getBlockExecutionStatus,
+  ])
+
+  if (!isValidWorkflowState) {
+    return (
+      <div
+        style={{ height, width }}
+        className='flex items-center justify-center rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900'
+      >
+        <div className='text-center text-gray-500 dark:text-gray-400'>
+          <div className='mb-2 font-medium text-lg'>⚠️ Logged State Not Found</div>
+          <div className='text-sm'>
+            This log was migrated from the old system and doesn't contain workflow state data.
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <ReactFlowProvider>
+      <div
+        ref={containerRef}
+        style={{ height, width, backgroundColor: 'var(--bg)' }}
+        className={cn('preview-mode', onNodeClick && 'interactive-nodes', className)}
+      >
+        <style>{`
+          /* Canvas cursor - grab on the flow container and pane */
+          .preview-mode .react-flow { cursor: ${cursorStyle}; }
+          .preview-mode .react-flow__pane { cursor: ${cursorStyle} !important; }
+          .preview-mode .react-flow__selectionpane { cursor: ${cursorStyle} !important; }
+          .preview-mode .react-flow__renderer { cursor: ${cursorStyle}; }
+
+          /* Active/grabbing cursor when dragging */
+          ${
+            cursorStyle === 'grab'
+              ? `
+          .preview-mode .react-flow:active { cursor: grabbing; }
+          .preview-mode .react-flow__pane:active { cursor: grabbing !important; }
+          .preview-mode .react-flow__selectionpane:active { cursor: grabbing !important; }
+          .preview-mode .react-flow__renderer:active { cursor: grabbing; }
+          .preview-mode .react-flow__node:active { cursor: grabbing !important; }
+          .preview-mode .react-flow__node:active * { cursor: grabbing !important; }
+          `
+              : ''
+          }
+
+          /* Node cursor - pointer on nodes when onNodeClick is provided */
+          .preview-mode.interactive-nodes .react-flow__node { cursor: pointer !important; }
+          .preview-mode.interactive-nodes .react-flow__node > div { cursor: pointer !important; }
+          .preview-mode.interactive-nodes .react-flow__node * { cursor: pointer !important; }
+        `}</style>
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          edgeTypes={edgeTypes}
+          connectionLineType={ConnectionLineType.SmoothStep}
+          fitView
+          fitViewOptions={{ padding: fitPadding }}
+          panOnScroll={isPannable}
+          panOnDrag={isPannable}
+          zoomOnScroll={false}
+          draggable={false}
+          defaultViewport={{
+            x: defaultPosition?.x ?? 0,
+            y: defaultPosition?.y ?? 0,
+            zoom: defaultZoom ?? 1,
+          }}
+          minZoom={0.1}
+          maxZoom={2}
+          proOptions={{ hideAttribution: true }}
+          elementsSelectable={false}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          onNodeClick={
+            onNodeClick
+              ? (event, node) => {
+                  logger.debug('Node clicked:', { nodeId: node.id, event })
+                  onNodeClick(node.id, { x: event.clientX, y: event.clientY })
+                }
+              : undefined
+          }
+          onNodeContextMenu={
+            onNodeContextMenu
+              ? (event, node) => {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  onNodeContextMenu(node.id, { x: event.clientX, y: event.clientY })
+                }
+              : undefined
+          }
+          onPaneClick={onPaneClick}
+        />
+        <FitViewOnChange
+          nodeIds={blocksStructure.ids}
+          fitPadding={fitPadding}
+          containerRef={containerRef}
+        />
+      </div>
+    </ReactFlowProvider>
+  )
+}

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

@@ -1,2 +1,6 @@
+export { PreviewContextMenu } from './components/preview-context-menu'
 export { PreviewEditor } from './components/preview-editor'
-export { getLeftmostBlockId, WorkflowPreview } from './preview'
+export { getLeftmostBlockId, PreviewWorkflow } from './components/preview-workflow'
+export { PreviewBlock } from './components/preview-workflow/components/block'
+export { PreviewSubflow } from './components/preview-workflow/components/subflow'
+export { buildBlockExecutions, Preview } from './preview'