Fix billing cost attribution and extract hexToRgba utility

- Fix copilot billing counters to only increment for copilot/mcp_copilot sources
  Previously, workspace-chat and mothership_block sources were incorrectly
  attributed to copilot-specific counters (totalCopilotCost, etc.)

- Extract hexToRgba utility from features.tsx and templates.tsx to shared
  lib/core/utils/color.ts to eliminate duplication

.cursor/rules/landing-seo-geo.mdc

@@ -0,0 +1,26 @@
+---
+description: SEO and GEO guidelines for the landing page
+globs: ["apps/sim/app/(home)/**/*.tsx"]
+---
+
+# Landing Page — SEO / GEO
+
+## SEO
+
+- One `<h1>` per page, in Hero only — never add another.
+- Strict heading hierarchy: H1 (Hero) → H2 (section titles) → H3 (feature names).
+- Every section: `<section id="…" aria-labelledby="…-heading">`.
+- Decorative/animated elements: `aria-hidden="true"`.
+- All internal routes use Next.js `<Link>` (crawlable). External links get `rel="noopener noreferrer"`.
+- Navbar is a Server Component (no `'use client'`) for immediate crawlability. Logo `<Image>` has `priority` (LCP element).
+- Navbar `<nav>` carries `SiteNavigationElement` schema.org markup.
+- Feature lists must stay in sync with `WebApplication.featureList` in `structured-data.tsx`.
+
+## GEO (Generative Engine Optimisation)
+
+- **Answer-first pattern**: each section's H2 + subtitle should directly answer a user question (e.g. "What is Sim?", "How fast can I deploy?").
+- **Atomic answer blocks**: each feature / template card should be independently extractable by an AI summariser.
+- **Entity consistency**: always write "Sim" by name — never "the platform" or "our tool".
+- **Keyword density**: first 150 visible chars of Hero must name "Sim", "AI agents", "agentic workflows".
+- **sr-only summaries**: Hero and Templates each have a `<p className="sr-only">` (~50 words) as an atomic product/catalog summary for AI citation.
+- **Specific numbers**: prefer concrete figures ("1,000+ integrations", "15+ AI providers") over vague claims.

.gitignore

@@ -26,6 +26,9 @@ bun-debug.log*
 **/standalone/
 sim-standalone.tar.gz
 
+# redis
+dump.rdb
+
 # misc
 .DS_Store
 *.pem

README.md

@@ -4,7 +4,7 @@
   </a>
 </p>
 
-<p align="center">Build and deploy AI agent workflows in minutes.</p>
+<p align="center">The open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.</p>
 
 <p align="center">
   <a href="https://sim.ai" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/sim.ai-6F3DFA" alt="Sim.ai"></a>

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

@@ -367,15 +367,17 @@ export async function generateMetadata(props: {
   return {
     title: data.title,
     description:
-      data.description || 'Sim visual workflow builder for AI applications documentation',
+      data.description ||
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce.',
     keywords: [
-      'AI workflow builder',
-      'visual workflow editor',
-      'AI automation',
-      'workflow automation',
       'AI agents',
-      'no-code AI',
-      'drag and drop workflows',
+      'agentic workforce',
+      'AI agent platform',
+      'agentic workflows',
+      'LLM orchestration',
+      'AI automation',
+      'knowledge base',
+      'AI integrations',
       data.title?.toLowerCase().split(' '),
     ]
       .flat()
@@ -385,7 +387,8 @@ export async function generateMetadata(props: {
     openGraph: {
       title: data.title,
       description:
-        data.description || 'Sim visual workflow builder for AI applications documentation',
+        data.description ||
+        'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce.',
       url: fullUrl,
       siteName: 'Sim Documentation',
       type: 'article',
@@ -406,7 +409,8 @@ export async function generateMetadata(props: {
       card: 'summary_large_image',
       title: data.title,
       description:
-        data.description || 'Sim visual workflow builder for AI applications documentation',
+        data.description ||
+        'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce.',
       images: [ogImageUrl],
       creator: '@simdotai',
       site: '@simdotai',

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

@@ -66,7 +66,7 @@ export default async function Layout({ children, params }: LayoutProps) {
     '@type': 'WebSite',
     name: 'Sim Documentation',
     description:
-      'Comprehensive documentation for Sim - the visual workflow builder for AI Agent Workflows.',
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
     url: 'https://docs.sim.ai',
     publisher: {
       '@type': 'Organization',

apps/docs/app/layout.tsx

@@ -7,26 +7,27 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 export const metadata = {
   metadataBase: new URL('https://docs.sim.ai'),
   title: {
-    default: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    default: 'Sim Documentation — Build AI Agents & Run Your Agentic Workforce',
     template: '%s',
   },
   description:
-    'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.',
+    'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
   keywords: [
-    'AI workflow builder',
-    'visual workflow editor',
-    'AI automation',
-    'workflow automation',
     'AI agents',
-    'no-code AI',
-    'drag and drop workflows',
+    'agentic workforce',
+    'AI agent platform',
+    'open-source AI agents',
+    'agentic workflows',
+    'LLM orchestration',
     'AI integrations',
-    'workflow canvas',
-    'AI Agent Workflow Builder',
-    'workflow orchestration',
-    'agent builder',
-    'AI workflow automation',
-    'visual programming',
+    'knowledge base',
+    'AI automation',
+    'workflow builder',
+    'AI workflow orchestration',
+    'enterprise AI',
+    'AI agent deployment',
+    'intelligent automation',
+    'AI tools',
   ],
   authors: [{ name: 'Sim Team', url: 'https://sim.ai' }],
   creator: 'Sim',
@@ -53,9 +54,9 @@ export const metadata = {
     alternateLocale: ['es_ES', 'fr_FR', 'de_DE', 'ja_JP', 'zh_CN'],
     url: 'https://docs.sim.ai',
     siteName: 'Sim Documentation',
-    title: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    title: 'Sim Documentation — Build AI Agents & Run Your Agentic Workforce',
     description:
-      'Comprehensive documentation for Sim - the visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
     images: [
       {
         url: 'https://docs.sim.ai/api/og?title=Sim%20Documentation',
@@ -67,9 +68,9 @@ export const metadata = {
   },
   twitter: {
     card: 'summary_large_image',
-    title: 'Sim Documentation - Visual Workflow Builder for AI Applications',
+    title: 'Sim Documentation — Build AI Agents & Run Your Agentic Workforce',
     description:
-      'Comprehensive documentation for Sim - the visual workflow builder for AI applications.',
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
     creator: '@simdotai',
     site: '@simdotai',
     images: ['https://docs.sim.ai/api/og?title=Sim%20Documentation'],

apps/docs/app/llms.txt/route.ts

@@ -37,9 +37,9 @@ export async function GET() {
 
     const manifest = `# Sim Documentation
 
-> Visual Workflow Builder for AI Applications
+> The open-source platform to build AI agents and run your agentic workforce.
 
-Sim is a visual workflow builder for AI applications that lets you build AI agent workflows visually. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.
+Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders.
 
 ## Documentation Overview
 

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

@@ -10,9 +10,9 @@ export function TOCFooter() {
         <div className='text-balance font-semibold text-base leading-tight'>
           Start building today
         </div>
-        <div className='text-muted-foreground'>Trusted by over 70,000 builders.</div>
+        <div className='text-muted-foreground'>Trusted by over 100,000 builders.</div>
         <div className='text-muted-foreground'>
-          Build Agentic workflows visually on a drag-and-drop canvas or with natural language.
+          The open-source platform to build AI agents and run your agentic workforce.
         </div>
         <Link
           href='https://sim.ai/signup'

apps/docs/components/structured-data.tsx

@@ -74,7 +74,7 @@ export function StructuredData({
     name: 'Sim Documentation',
     url: baseUrl,
     description:
-      'Comprehensive documentation for Sim visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines.',
+      'Documentation for Sim — the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
     publisher: {
       '@type': 'Organization',
       name: 'Sim',
@@ -98,7 +98,7 @@ export function StructuredData({
     applicationCategory: 'DeveloperApplication',
     operatingSystem: 'Any',
     description:
-      'Visual workflow builder for AI applications. Create powerful AI agents, automation workflows, and data processing pipelines by connecting blocks on a canvas—no coding required.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs.',
     url: baseUrl,
     author: {
       '@type': 'Organization',
@@ -109,12 +109,13 @@ export function StructuredData({
       category: 'Developer Tools',
     },
     featureList: [
-      'Visual workflow builder with drag-and-drop interface',
-      'AI agent creation and automation',
-      '80+ built-in integrations',
-      'Real-time team collaboration',
-      'Multiple deployment options',
-      'Custom integrations via MCP protocol',
+      'AI agent creation',
+      'Agentic workflow orchestration',
+      '1,000+ integrations',
+      'LLM orchestration (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
+      'Knowledge base creation',
+      'Table creation',
+      'Document creation',
     ],
   }
 

apps/sim/app/(home)/components/collaboration/collaboration.tsx

@@ -0,0 +1,332 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { Badge, ChevronDown } from '@/components/emcn'
+
+interface DotGridProps {
+  className?: string
+  cols: number
+  rows: number
+  gap?: number
+}
+
+function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) {
+  return (
+    <div
+      aria-hidden='true'
+      className={className}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gap,
+        placeItems: 'center',
+      }}
+    >
+      {Array.from({ length: cols * rows }, (_, i) => (
+        <div key={i} className='h-[2px] w-[2px] rounded-full bg-[#2A2A2A]' />
+      ))}
+    </div>
+  )
+}
+
+const CURSOR_KEYFRAMES = `
+  @keyframes cursorVikhyath {
+    0% { transform: translate(0, 0); }
+    12% { transform: translate(120px, 10px); }
+    24% { transform: translate(80px, 80px); }
+    36% { transform: translate(-10px, 60px); }
+    48% { transform: translate(-15px, -20px); }
+    60% { transform: translate(100px, -40px); }
+    72% { transform: translate(180px, 30px); }
+    84% { transform: translate(50px, 50px); }
+    100% { transform: translate(0, 0); }
+  }
+  @keyframes cursorAlexa {
+    0% { transform: translate(0, 0); }
+    14% { transform: translate(45px, -35px); }
+    28% { transform: translate(-75px, 20px); }
+    42% { transform: translate(25px, -50px); }
+    57% { transform: translate(-65px, 15px); }
+    71% { transform: translate(35px, -30px); }
+    85% { transform: translate(-30px, -10px); }
+    100% { transform: translate(0, 0); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    @keyframes cursorVikhyath { 0%, 100% { transform: none; } }
+    @keyframes cursorAlexa { 0%, 100% { transform: none; } }
+  }
+`
+
+const CURSOR_ARROW_PATH =
+  'M17.135 2.198L12.978 14.821C12.478 16.339 10.275 16.16 10.028 14.581L9.106 8.703C9.01 8.092 8.554 7.599 7.952 7.457L1.591 5.953C0 5.577 0.039 3.299 1.642 2.978L15.39 0.229C16.534 0 17.499 1.09 17.135 2.198Z'
+
+const CURSOR_ARROW_MIRRORED_PATH =
+  'M0.365 2.198L4.522 14.821C5.022 16.339 7.225 16.16 7.472 14.58L8.394 8.702C8.49 8.091 8.946 7.599 9.548 7.456L15.909 5.953C17.5 5.577 17.461 3.299 15.857 2.978L2.11 0.228C0.966 0 0.001 1.09 0.365 2.198Z'
+
+function CursorArrow({ fill }: { fill: string }) {
+  return (
+    <svg width='23.15' height='21.1' viewBox='0 0 17.5 16.4' fill='none'>
+      <path d={fill === '#2ABBF8' ? CURSOR_ARROW_PATH : CURSOR_ARROW_MIRRORED_PATH} fill={fill} />
+    </svg>
+  )
+}
+
+function VikhyathCursor() {
+  return (
+    <div
+      aria-hidden='true'
+      className='pointer-events-none absolute'
+      style={{
+        top: '27.47%',
+        left: '25%',
+        animation: 'cursorVikhyath 16s ease-in-out infinite',
+        willChange: 'transform',
+      }}
+    >
+      <div className='relative h-[37.14px] w-[79.18px]'>
+        <div className='absolute top-0 left-[56.02px]'>
+          <CursorArrow fill='#2ABBF8' />
+        </div>
+        <div className='-left-[4px] absolute top-[18px] flex items-center rounded bg-[#2ABBF8] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+          Vikhyath
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function AlexaCursor() {
+  return (
+    <div
+      aria-hidden='true'
+      className='pointer-events-none absolute'
+      style={{
+        top: '66.80%',
+        left: '49%',
+        animation: 'cursorAlexa 13s ease-in-out infinite',
+        willChange: 'transform',
+      }}
+    >
+      <div className='relative h-[35.09px] w-[62.16px]'>
+        <div className='absolute top-0 left-0'>
+          <CursorArrow fill='#FFCC02' />
+        </div>
+        <div className='absolute top-[16px] left-[23px] flex items-center rounded bg-[#FFCC02] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+          Alexa
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface YouCursorProps {
+  x: number
+  y: number
+  visible: boolean
+}
+
+function YouCursor({ x, y, visible }: YouCursorProps) {
+  if (!visible) return null
+
+  return (
+    <div
+      aria-hidden='true'
+      className='pointer-events-none fixed z-50'
+      style={{
+        left: x,
+        top: y,
+        transform: 'translate(-2px, -2px)',
+      }}
+    >
+      <svg width='23.15' height='21.1' viewBox='0 0 17.5 16.4' fill='none'>
+        <path d={CURSOR_ARROW_MIRRORED_PATH} fill='#33C482' />
+      </svg>
+      <div className='absolute top-[16px] left-[23px] flex items-center rounded bg-[#33C482] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+        You
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Collaboration section — team workflows and real-time collaboration.
+ *
+ * SEO:
+ * - `<section id="collaboration" aria-labelledby="collaboration-heading">`.
+ * - `<h2 id="collaboration-heading">` for the section title.
+ * - Product visuals use `<figure>` with `<figcaption>` and descriptive `alt` text.
+ *
+ * GEO:
+ * - Name specific capabilities (version control, shared workspaces, RBAC, audit logs).
+ * - Lead with a summary so AI can answer "Does Sim support team collaboration?".
+ * - Reference "Sim" by name per capability ("Sim's real-time collaboration").
+ */
+
+const CURSOR_LERP_FACTOR = 0.3
+
+export default function Collaboration() {
+  const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 })
+  const [isHovering, setIsHovering] = useState(false)
+  const sectionRef = useRef<HTMLElement>(null)
+  const targetPos = useRef({ x: 0, y: 0 })
+  const animationRef = useRef<number>(0)
+
+  useEffect(() => {
+    const animate = () => {
+      setCursorPos((prev) => ({
+        x: prev.x + (targetPos.current.x - prev.x) * CURSOR_LERP_FACTOR,
+        y: prev.y + (targetPos.current.y - prev.y) * CURSOR_LERP_FACTOR,
+      }))
+      animationRef.current = requestAnimationFrame(animate)
+    }
+
+    if (isHovering) {
+      animationRef.current = requestAnimationFrame(animate)
+    }
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [isHovering])
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    targetPos.current = { x: e.clientX, y: e.clientY }
+  }, [])
+
+  const handleMouseEnter = useCallback((e: React.MouseEvent) => {
+    targetPos.current = { x: e.clientX, y: e.clientY }
+    setCursorPos({ x: e.clientX, y: e.clientY })
+    setIsHovering(true)
+  }, [])
+
+  const handleMouseLeave = useCallback(() => {
+    setIsHovering(false)
+  }, [])
+
+  return (
+    <section
+      ref={sectionRef}
+      id='collaboration'
+      aria-labelledby='collaboration-heading'
+      className='bg-[#1C1C1C]'
+      style={{ cursor: isHovering ? 'none' : 'auto' }}
+      onMouseMove={handleMouseMove}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <YouCursor x={cursorPos.x} y={cursorPos.y} visible={isHovering} />
+      <style dangerouslySetInnerHTML={{ __html: CURSOR_KEYFRAMES }} />
+
+      <DotGrid
+        className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        cols={120}
+        rows={1}
+        gap={6}
+      />
+
+      <div className='relative overflow-hidden'>
+        <Link
+          href='/studio/multiplayer'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='absolute bottom-10 left-4 z-20 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:left-8 md:left-[80px]'
+        >
+          <div className='relative h-7 w-11 shrink-0'>
+            <Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
+          </div>
+          <div className='flex flex-col gap-[2px]'>
+            <span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
+              Blog
+            </span>
+            <span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
+              How we built realtime collaboration
+            </span>
+          </div>
+        </Link>
+
+        <div className='grid grid-cols-[auto_1fr]'>
+          <div className='flex flex-col items-start gap-3 px-4 pt-[100px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px]'>
+            <Badge
+              variant='blue'
+              size='md'
+              dot
+              className='bg-[#33C482]/10 font-season text-[#33C482] uppercase tracking-[0.02em]'
+            >
+              Teams
+            </Badge>
+
+            <h2
+              id='collaboration-heading'
+              className='font-[430] font-season text-[32px] text-white leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+            >
+              Realtime
+              <br />
+              collaboration
+            </h2>
+
+            <p className='font-[430] font-season text-[#F6F6F0]/50 text-[14px] leading-[125%] tracking-[0.02em] sm:text-[16px]'>
+              Grab your team. Build agents together <br /> in real-time inside your workspace.
+            </p>
+
+            <Link
+              href='/signup'
+              className='group/cta mt-[12px] inline-flex h-[32px] cursor-none items-center gap-[6px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[10px] font-[430] font-season text-[14px] text-black transition-[filter] hover:brightness-110'
+            >
+              Build together
+              <span className='relative h-[10px] w-[10px] shrink-0'>
+                <ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
+                <svg
+                  className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
+                  viewBox='0 0 10 10'
+                  fill='none'
+                  xmlns='http://www.w3.org/2000/svg'
+                >
+                  <path
+                    d='M1 5H8M5.5 2L8.5 5L5.5 8'
+                    stroke='currentColor'
+                    strokeWidth='1.33'
+                    strokeLinecap='square'
+                    strokeLinejoin='miter'
+                    fill='none'
+                  />
+                </svg>
+              </span>
+            </Link>
+          </div>
+
+          <figure className='pointer-events-none relative h-[600px] w-full'>
+            <div className='-left-[18%] absolute inset-y-0 min-w-full'>
+              <Image
+                src='/landing/collaboration-visual.svg'
+                alt='Collaboration visual showing team workflows with real-time editing, shared cursors, and version control interface'
+                width={876}
+                height={480}
+                className='h-full w-auto min-w-[100vw] object-left'
+                priority
+              />
+            </div>
+            <div className='hidden lg:block'>
+              <VikhyathCursor />
+              <AlexaCursor />
+            </div>
+            <figcaption className='sr-only'>
+              Sim collaboration interface with real-time cursors, shared workspace, and team
+              presence indicators
+            </figcaption>
+          </figure>
+        </div>
+      </div>
+
+      <DotGrid
+        className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        cols={120}
+        rows={1}
+        gap={6}
+      />
+    </section>
+  )
+}

apps/sim/app/(home)/components/enterprise/enterprise.tsx

@@ -0,0 +1,17 @@
+/**
+ * Enterprise section — compliance, scale, and security messaging.
+ *
+ * SEO:
+ * - `<section id="enterprise" aria-labelledby="enterprise-heading">`.
+ * - `<h2 id="enterprise-heading">` for the section title.
+ * - Compliance certs (SOC2, HIPAA) as visible `<strong>` text.
+ * - Enterprise CTA links to contact form via `<a>` with `rel="noopener noreferrer"`.
+ *
+ * GEO:
+ * - Entity-rich: "Sim is SOC2 and HIPAA compliant" — not "We are compliant."
+ * - `<ul>` checklist of features (SSO, RBAC, audit logs, SLA, on-premise deployment)
+ *   as an atomic answer block for "What enterprise features does Sim offer?".
+ */
+export default function Enterprise() {
+  return null
+}

apps/sim/app/(home)/components/features/features.tsx

@@ -0,0 +1,223 @@
+'use client'
+
+import { useState } from 'react'
+import Image from 'next/image'
+import { Badge } from '@/components/emcn'
+import { hexToRgba } from '@/lib/core/utils/color'
+
+const FEATURE_TABS = [
+  {
+    label: 'Integrations',
+    color: '#FA4EDF',
+    segments: [
+      [0.3, 8],
+      [0.25, 10],
+      [0.45, 12],
+      [0.5, 8],
+      [0.65, 10],
+      [0.8, 12],
+      [0.75, 8],
+      [0.95, 10],
+      [1, 12],
+      [0.85, 10],
+    ],
+  },
+  {
+    label: 'Copilot',
+    color: '#2ABBF8',
+    segments: [
+      [0.25, 12],
+      [0.4, 10],
+      [0.35, 8],
+      [0.55, 12],
+      [0.7, 10],
+      [0.85, 8],
+      [1, 14],
+      [0.9, 12],
+      [1, 14],
+    ],
+  },
+  {
+    label: 'Models',
+    color: '#00F701',
+    badgeColor: '#22C55E',
+    segments: [
+      [0.2, 6],
+      [0.35, 10],
+      [0.3, 8],
+      [0.5, 10],
+      [0.6, 8],
+      [0.75, 12],
+      [0.85, 10],
+      [1, 8],
+      [0.9, 12],
+      [1, 10],
+      [0.95, 6],
+    ],
+  },
+  {
+    label: 'Deploy',
+    color: '#FFCC02',
+    badgeColor: '#EAB308',
+    segments: [
+      [0.3, 12],
+      [0.25, 8],
+      [0.4, 10],
+      [0.55, 10],
+      [0.7, 8],
+      [0.6, 10],
+      [0.85, 12],
+      [1, 10],
+      [0.9, 10],
+      [1, 10],
+    ],
+  },
+  {
+    label: 'Logs',
+    color: '#FF6B35',
+    segments: [
+      [0.25, 10],
+      [0.35, 8],
+      [0.3, 10],
+      [0.5, 10],
+      [0.65, 8],
+      [0.8, 12],
+      [0.9, 10],
+      [1, 10],
+      [0.85, 12],
+      [1, 10],
+    ],
+  },
+  {
+    label: 'Knowledge Base',
+    color: '#8B5CF6',
+    segments: [
+      [0.3, 10],
+      [0.25, 8],
+      [0.4, 10],
+      [0.5, 10],
+      [0.65, 10],
+      [0.8, 10],
+      [0.9, 12],
+      [1, 10],
+      [0.95, 10],
+      [1, 10],
+    ],
+  },
+]
+
+function DotGrid({
+  cols,
+  rows,
+  width,
+  borderLeft,
+}: {
+  cols: number
+  rows: number
+  width?: number
+  borderLeft?: boolean
+}) {
+  return (
+    <div
+      aria-hidden='true'
+      className={`shrink-0 bg-[#FDFDFD] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
+      style={{
+        width: width ? `${width}px` : undefined,
+        display: 'grid',
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gap: 4,
+        placeItems: 'center',
+      }}
+    >
+      {Array.from({ length: cols * rows }, (_, i) => (
+        <div key={i} className='h-[2px] w-[2px] rounded-full bg-[#DEDEDE]' />
+      ))}
+    </div>
+  )
+}
+
+export default function Features() {
+  const [activeTab, setActiveTab] = useState(0)
+
+  return (
+    <section
+      id='features'
+      aria-labelledby='features-heading'
+      className='relative overflow-hidden bg-[#F6F6F6] pb-[144px]'
+    >
+      <div aria-hidden='true' className='absolute top-0 left-0 w-full'>
+        <Image
+          src='/landing/features-transition.svg'
+          alt=''
+          width={1440}
+          height={366}
+          className='h-auto w-full'
+          priority
+        />
+      </div>
+
+      <div className='relative z-10 pt-[100px]'>
+        <div className='flex flex-col items-start gap-[20px] px-[80px]'>
+          <Badge
+            variant='blue'
+            size='md'
+            dot
+            className='font-season uppercase tracking-[0.02em] transition-colors duration-200'
+            style={{
+              color: FEATURE_TABS[activeTab].badgeColor ?? FEATURE_TABS[activeTab].color,
+              backgroundColor: hexToRgba(
+                FEATURE_TABS[activeTab].badgeColor ?? FEATURE_TABS[activeTab].color,
+                0.1
+              ),
+            }}
+          >
+            Features
+          </Badge>
+          <h2
+            id='features-heading'
+            className='font-[430] font-season text-[#1C1C1C] text-[40px] leading-[100%] tracking-[-0.02em]'
+          >
+            Power your AI workforce
+          </h2>
+        </div>
+
+        <div className='mt-[73px] flex h-[68px] overflow-hidden border border-[#E9E9E9]'>
+          <DotGrid cols={10} rows={8} width={80} />
+
+          <div role='tablist' aria-label='Feature categories' className='flex flex-1'>
+            {FEATURE_TABS.map((tab, index) => (
+              <button
+                key={tab.label}
+                type='button'
+                role='tab'
+                aria-selected={index === activeTab}
+                onClick={() => setActiveTab(index)}
+                className='relative flex h-full flex-1 items-center justify-center border-[#E9E9E9] border-l font-medium font-season text-[#212121] text-[14px] uppercase'
+                style={{ backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6' }}
+              >
+                {tab.label}
+                {index === activeTab && (
+                  <div className='absolute right-0 bottom-0 left-0 flex h-[6px]'>
+                    {tab.segments.map(([opacity, width], i) => (
+                      <div
+                        key={i}
+                        className='h-full shrink-0'
+                        style={{
+                          width: `${width}%`,
+                          backgroundColor: tab.color,
+                          opacity,
+                        }}
+                      />
+                    ))}
+                  </div>
+                )}
+              </button>
+            ))}
+          </div>
+
+          <DotGrid cols={10} rows={8} width={80} borderLeft />
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Landing page footer — navigation, legal links, and entity reinforcement.
+ *
+ * SEO:
+ * - `<footer role="contentinfo">` with `<nav aria-label="Footer navigation">`.
+ * - Link groups under semantic headings (`<h3>`). All links are `<Link>` or `<a>` with `href`.
+ * - External links include `rel="noopener noreferrer"`.
+ * - Legal links (Privacy, Terms) must be crawlable (trust signals).
+ *
+ * GEO:
+ * - Include "Sim — Build AI agents and run your agentic workforce" as visible text (entity reinforcement).
+ * - Social links (X, GitHub, LinkedIn, Discord) must match `sameAs` in structured-data.tsx.
+ * - Link to all major pages: Docs, Pricing, Enterprise, Careers, Changelog (internal link graph).
+ * - Display compliance badges (SOC2, HIPAA) and status page link as visible trust signals.
+ */
+export default function Footer() {
+  return null
+}

apps/sim/app/(home)/components/hero/components/animated-blocks.tsx

@@ -0,0 +1,584 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { motion, type Variants } from 'framer-motion'
+
+/** Stagger between each block appearing (seconds). */
+const ENTER_STAGGER = 0.06
+
+/** Duration of each block's fade-in (seconds). */
+const ENTER_DURATION = 0.3
+
+/** Stagger between each block disappearing (seconds). */
+const EXIT_STAGGER = 0.12
+
+/** Duration of each block's fade-out (seconds). */
+const EXIT_DURATION = 0.5
+
+/** Shared corner radius for all decorative rects. */
+const RX = '2.59574'
+
+/** Hold time after the initial enter animation before cycling starts (ms). */
+const INITIAL_HOLD_MS = 2500
+
+/** Pause between an exit completing and the next enter starting (ms). */
+const TRANSITION_PAUSE_MS = 400
+
+/** Hold time between successive transitions (ms). */
+const HOLD_BETWEEN_MS = 2500
+
+/** Animation state for a block group. */
+export type BlockAnimState = 'entering' | 'visible' | 'exiting' | 'hidden'
+
+/** Positions around the hero where block groups can appear. */
+export type BlockPosition = 'topRight' | 'left' | 'rightEdge' | 'rightSide' | 'topLeft'
+
+/** Attributes for a single animated SVG rect. */
+interface BlockRect {
+  opacity: number
+  width: string
+  height: string
+  fill: string
+  x?: string
+  y?: string
+  transform?: string
+}
+
+const containerVariants: Variants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: ENTER_STAGGER } },
+  exit: { transition: { staggerChildren: EXIT_STAGGER } },
+}
+
+const blockVariants: Variants = {
+  hidden: { opacity: 0, transition: { duration: 0 } },
+  visible: (targetOpacity: number) => ({
+    opacity: targetOpacity,
+    transition: { duration: ENTER_DURATION },
+  }),
+  exit: {
+    opacity: 0,
+    transition: { duration: EXIT_DURATION },
+  },
+}
+
+/** Maps a BlockAnimState to the framer-motion animate value. */
+function toAnimateValue(state: BlockAnimState): string {
+  if (state === 'entering' || state === 'visible') return 'visible'
+  if (state === 'exiting') return 'exit'
+  return 'hidden'
+}
+
+/** Shared SVG wrapper that staggers child rects in and out. */
+function AnimatedBlocksSvg({
+  width,
+  height,
+  viewBox,
+  rects,
+  animState = 'entering',
+}: {
+  width: number
+  height: number
+  viewBox: string
+  rects: readonly BlockRect[]
+  animState?: BlockAnimState
+}) {
+  return (
+    <motion.svg
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className='h-auto w-full'
+      initial='hidden'
+      animate={toAnimateValue(animState)}
+      variants={containerVariants}
+    >
+      {rects.map((r, i) => (
+        <motion.rect
+          key={i}
+          variants={blockVariants}
+          custom={r.opacity}
+          x={r.x}
+          y={r.y}
+          width={r.width}
+          height={r.height}
+          rx={RX}
+          fill={r.fill}
+          transform={r.transform}
+        />
+      ))}
+    </motion.svg>
+  )
+}
+
+/**
+ * Rect data for the top-right position.
+ * Two-row horizontal strip, ordered left-to-right.
+ */
+const TOP_RIGHT_RECTS: readonly BlockRect[] = [
+  { opacity: 1, x: '0', y: '0', width: '16.8626', height: '33.7252', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '0', y: '0', width: '85.3433', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 1, x: '0', y: '0', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '34.2403', y: '0', width: '34.2403', height: '33.7252', fill: '#2ABBF8' },
+  { opacity: 1, x: '34.2403', y: '0', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 1, x: '51.6188', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 1, x: '68.4812', y: '0', width: '54.6502', height: '16.8626', fill: '#00F701' },
+  { opacity: 0.6, x: '106.268', y: '0', width: '34.2403', height: '33.7252', fill: '#00F701' },
+  { opacity: 0.6, x: '106.268', y: '0', width: '51.103', height: '16.8626', fill: '#00F701' },
+  { opacity: 1, x: '123.6484', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#00F701' },
+  { opacity: 0.6, x: '157.371', y: '0', width: '34.2403', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 1, x: '157.371', y: '0', width: '16.8626', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 0.6, x: '208.993', y: '0', width: '68.4805', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '209.137', y: '0', width: '16.8626', height: '33.7252', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '243.233', y: '0', width: '34.2403', height: '33.7252', fill: '#FA4EDF' },
+  { opacity: 1, x: '243.233', y: '0', width: '16.8626', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '260.096', y: '0', width: '34.04', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 1, x: '260.611', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#FA4EDF' },
+]
+
+/**
+ * Rect data for the top-left position.
+ * Same two-row structure as top-right with rotated colour palette:
+ * blue→green, green→yellow, yellow→pink, pink→blue.
+ */
+const TOP_LEFT_RECTS: readonly BlockRect[] = [
+  { opacity: 1, x: '0', y: '0', width: '16.8626', height: '33.7252', fill: '#00F701' },
+  { opacity: 0.6, x: '0', y: '0', width: '85.3433', height: '16.8626', fill: '#00F701' },
+  { opacity: 1, x: '0', y: '0', width: '16.8626', height: '16.8626', fill: '#00F701' },
+  { opacity: 0.6, x: '34.2403', y: '0', width: '34.2403', height: '33.7252', fill: '#00F701' },
+  { opacity: 1, x: '34.2403', y: '0', width: '16.8626', height: '16.8626', fill: '#00F701' },
+  { opacity: 1, x: '51.6188', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#00F701' },
+  { opacity: 1, x: '68.4812', y: '0', width: '54.6502', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 0.6, x: '106.268', y: '0', width: '34.2403', height: '33.7252', fill: '#FFCC02' },
+  { opacity: 0.6, x: '106.268', y: '0', width: '51.103', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 1, x: '123.6484', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#FFCC02' },
+  { opacity: 0.6, x: '157.371', y: '0', width: '34.2403', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 1, x: '157.371', y: '0', width: '16.8626', height: '16.8626', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '208.993', y: '0', width: '68.4805', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '209.137', y: '0', width: '16.8626', height: '33.7252', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '243.233', y: '0', width: '34.2403', height: '33.7252', fill: '#2ABBF8' },
+  { opacity: 1, x: '243.233', y: '0', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '260.096', y: '0', width: '34.04', height: '16.8626', fill: '#2ABBF8' },
+  { opacity: 1, x: '260.611', y: '16.8626', width: '16.8626', height: '16.8626', fill: '#2ABBF8' },
+]
+
+/**
+ * Rect data for the left position.
+ * Two-column vertical strip, ordered top-to-bottom.
+ */
+const LEFT_RECTS: readonly BlockRect[] = [
+  {
+    opacity: 0.6,
+    width: '34.240',
+    height: '33.725',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0 0)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '68.480',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.727 0)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.727 17.378)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.986',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0 51.616)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '140.507',
+    fill: '#00F701',
+    transform: 'matrix(-1 0 0 1 33.986 85.335)',
+  },
+  {
+    opacity: 0.4,
+    x: '17.119',
+    y: '136.962',
+    width: '34.240',
+    height: '16.8626',
+    fill: '#FFCC02',
+    transform: 'rotate(-90 17.119 136.962)',
+  },
+  {
+    opacity: 1,
+    x: '17.119',
+    y: '136.962',
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#FFCC02',
+    transform: 'rotate(-90 17.119 136.962)',
+  },
+  {
+    opacity: 0.5,
+    width: '34.240',
+    height: '33.725',
+    fill: '#00F701',
+    transform: 'matrix(0 1 1 0 0.257 153.825)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'matrix(0 1 1 0 0.257 153.825)',
+  },
+]
+
+/**
+ * Rect data for the right-side position (right edge of screenshot).
+ * Same two-column structure as left with rotated colours:
+ * pink→blue, green→pink, yellow→green.
+ */
+const RIGHT_SIDE_RECTS: readonly BlockRect[] = [
+  {
+    opacity: 0.6,
+    width: '34.240',
+    height: '33.725',
+    fill: '#2ABBF8',
+    transform: 'matrix(0 1 1 0 0 0)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '68.480',
+    fill: '#2ABBF8',
+    transform: 'matrix(-1 0 0 1 33.727 0)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#2ABBF8',
+    transform: 'matrix(-1 0 0 1 33.727 17.378)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.986',
+    fill: '#2ABBF8',
+    transform: 'matrix(0 1 1 0 0 51.616)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '140.507',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.986 85.335)',
+  },
+  {
+    opacity: 0.4,
+    x: '17.119',
+    y: '136.962',
+    width: '34.240',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'rotate(-90 17.119 136.962)',
+  },
+  {
+    opacity: 1,
+    x: '17.119',
+    y: '136.962',
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'rotate(-90 17.119 136.962)',
+  },
+  {
+    opacity: 0.5,
+    width: '34.240',
+    height: '33.725',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0.257 153.825)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0.257 153.825)',
+  },
+]
+
+/**
+ * Rect data for the right-edge position (far right of screen).
+ * Two-column vertical strip, ordered top-to-bottom.
+ */
+const RIGHT_RECTS: readonly BlockRect[] = [
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.726',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0 0)',
+  },
+  {
+    opacity: 0.6,
+    width: '34.241',
+    height: '16.8626',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 16.891 0)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '68.482',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.739 16.888)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.726',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0 33.776)',
+  },
+  {
+    opacity: 1,
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#FA4EDF',
+    transform: 'matrix(-1 0 0 1 33.739 34.272)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '33.726',
+    fill: '#FA4EDF',
+    transform: 'matrix(0 1 1 0 0.012 68.510)',
+  },
+  {
+    opacity: 0.6,
+    width: '16.8626',
+    height: '102.384',
+    fill: '#2ABBF8',
+    transform: 'matrix(-1 0 0 1 33.787 102.384)',
+  },
+  {
+    opacity: 0.4,
+    x: '17.131',
+    y: '153.859',
+    width: '34.241',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'rotate(-90 17.131 153.859)',
+  },
+  {
+    opacity: 1,
+    x: '17.131',
+    y: '153.859',
+    width: '16.8626',
+    height: '16.8626',
+    fill: '#00F701',
+    transform: 'rotate(-90 17.131 153.859)',
+  },
+]
+
+/** Number of rects per position, used to compute animation durations. */
+const RECT_COUNTS: Record<BlockPosition, number> = {
+  topRight: TOP_RIGHT_RECTS.length,
+  topLeft: TOP_LEFT_RECTS.length,
+  left: LEFT_RECTS.length,
+  rightSide: RIGHT_SIDE_RECTS.length,
+  rightEdge: RIGHT_RECTS.length,
+}
+
+/** Total enter animation time for a position (seconds). */
+function enterTime(pos: BlockPosition): number {
+  return (RECT_COUNTS[pos] - 1) * ENTER_STAGGER + ENTER_DURATION
+}
+
+/** Total exit animation time for a position (seconds). */
+function exitTime(pos: BlockPosition): number {
+  return (RECT_COUNTS[pos] - 1) * EXIT_STAGGER + EXIT_DURATION
+}
+
+/** A single step in the repeating animation cycle. */
+type CycleStep =
+  | { action: 'exit'; position: BlockPosition }
+  | { action: 'enter'; position: BlockPosition }
+  | { action: 'hold'; ms: number }
+
+/**
+ * The repeating cycle sequence. After all steps, the layout returns to its
+ * initial state (topRight + left + rightEdge) so the loop is seamless.
+ *
+ * Order: exit top → exit right-edge → enter right-side-of-preview →
+ * exit left → enter top-left → exit right-side → enter left →
+ * exit top-left → enter top-right → enter right-edge → back to initial.
+ */
+const CYCLE_STEPS: readonly CycleStep[] = [
+  { action: 'exit', position: 'topRight' },
+  { action: 'exit', position: 'rightEdge' },
+  { action: 'enter', position: 'rightSide' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+  { action: 'exit', position: 'left' },
+  { action: 'enter', position: 'topLeft' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+  { action: 'exit', position: 'rightSide' },
+  { action: 'enter', position: 'left' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+  { action: 'exit', position: 'topLeft' },
+  { action: 'enter', position: 'topRight' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+  { action: 'enter', position: 'rightEdge' },
+  { action: 'hold', ms: HOLD_BETWEEN_MS },
+]
+
+/**
+ * Drives the block-cycling animation loop. Returns the current animation
+ * state for every position so each component can be driven declaratively.
+ *
+ * Lifecycle:
+ * 1. All three initial groups (topRight, left, rightEdge) enter together.
+ * 2. After a hold period the cycle begins, processing each step in order.
+ * 3. Repeats indefinitely, returning to the initial layout every cycle.
+ */
+export function useBlockCycle(): Record<BlockPosition, BlockAnimState> {
+  const [states, setStates] = useState<Record<BlockPosition, BlockAnimState>>({
+    topRight: 'entering',
+    left: 'entering',
+    rightEdge: 'entering',
+    rightSide: 'hidden',
+    topLeft: 'hidden',
+  })
+
+  useEffect(() => {
+    const cancelled = { current: false }
+    const delay = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms))
+
+    const run = async () => {
+      const longestEnter = Math.max(
+        enterTime('topRight'),
+        enterTime('left'),
+        enterTime('rightEdge')
+      )
+      await delay(longestEnter * 1000)
+      if (cancelled.current) return
+
+      setStates({
+        topRight: 'visible',
+        left: 'visible',
+        rightEdge: 'visible',
+        rightSide: 'hidden',
+        topLeft: 'hidden',
+      })
+
+      await delay(INITIAL_HOLD_MS)
+      if (cancelled.current) return
+
+      while (!cancelled.current) {
+        for (const step of CYCLE_STEPS) {
+          if (cancelled.current) return
+
+          if (step.action === 'exit') {
+            setStates((prev) => ({ ...prev, [step.position]: 'exiting' }))
+            await delay(exitTime(step.position) * 1000)
+            if (cancelled.current) return
+            setStates((prev) => ({ ...prev, [step.position]: 'hidden' }))
+            await delay(TRANSITION_PAUSE_MS)
+          } else if (step.action === 'enter') {
+            setStates((prev) => ({ ...prev, [step.position]: 'entering' }))
+            await delay(enterTime(step.position) * 1000)
+            if (cancelled.current) return
+            setStates((prev) => ({ ...prev, [step.position]: 'visible' }))
+            await delay(TRANSITION_PAUSE_MS)
+          } else {
+            await delay(step.ms)
+          }
+
+          if (cancelled.current) return
+        }
+      }
+    }
+
+    run()
+    return () => {
+      cancelled.current = true
+    }
+  }, [])
+
+  return states
+}
+
+interface AnimatedBlockProps {
+  animState?: BlockAnimState
+}
+
+/** Two-row horizontal strip at the top-right of the hero. */
+export function BlocksTopRightAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={295}
+      height={34}
+      viewBox='0 0 295 34'
+      rects={TOP_RIGHT_RECTS}
+      animState={animState}
+    />
+  )
+}
+
+/** Two-row horizontal strip at the top-left of the hero. */
+export function BlocksTopLeftAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={295}
+      height={34}
+      viewBox='0 0 295 34'
+      rects={TOP_LEFT_RECTS}
+      animState={animState}
+    />
+  )
+}
+
+/** Two-column vertical strip on the left edge of the screenshot. */
+export function BlocksLeftAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={34}
+      height={226}
+      viewBox='0 0 34 226.021'
+      rects={LEFT_RECTS}
+      animState={animState}
+    />
+  )
+}
+
+/** Two-column vertical strip on the right edge of the screenshot. */
+export function BlocksRightSideAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={34}
+      height={226}
+      viewBox='0 0 34 226.021'
+      rects={RIGHT_SIDE_RECTS}
+      animState={animState}
+    />
+  )
+}
+
+/** Two-column vertical strip at the far-right edge of the screen. */
+export function BlocksRightAnimated({ animState = 'entering' }: AnimatedBlockProps) {
+  return (
+    <AnimatedBlocksSvg
+      width={34}
+      height={205}
+      viewBox='0 0 34 204.769'
+      rects={RIGHT_RECTS}
+      animState={animState}
+    />
+  )
+}

apps/sim/app/(home)/components/hero/hero.tsx

@@ -0,0 +1,132 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+import Image from 'next/image'
+import Link from 'next/link'
+import {
+  BlocksLeftAnimated,
+  BlocksRightAnimated,
+  BlocksRightSideAnimated,
+  BlocksTopLeftAnimated,
+  BlocksTopRightAnimated,
+  useBlockCycle,
+} from '@/app/(home)/components/hero/components/animated-blocks'
+
+const LandingPreview = dynamic(
+  () =>
+    import('@/app/(home)/components/landing-preview/landing-preview').then(
+      (mod) => mod.LandingPreview
+    ),
+  {
+    ssr: false,
+    loading: () => <div className='aspect-[1116/549] w-full rounded bg-[#1b1b1b]' />,
+  }
+)
+
+/** Shared base classes for CTA link buttons — matches Deploy/Run button styling in the preview panel. */
+const CTA_BASE =
+  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+
+export default function Hero() {
+  const blockStates = useBlockCycle()
+
+  return (
+    <section
+      id='hero'
+      aria-labelledby='hero-heading'
+      className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[71px]'
+    >
+      <p className='sr-only'>
+        Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
+        1,000+ integrations and LLMs — including OpenAI, Claude, Gemini, Mistral, and xAI — to
+        deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables,
+        and docs. Trusted by over 100,000 builders at startups and Fortune 500 companies. SOC2 and
+        HIPAA compliant.
+      </p>
+
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-[-0.7vw] left-[-2.8vw] z-0 aspect-[344/328] w-[23.9vw]'
+      >
+        <Image src='/landing/card-left.svg' alt='' fill className='object-contain' />
+      </div>
+
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-[-2.8vw] right-[0vw] z-0 aspect-[471/470] w-[32.7vw]'
+      >
+        <Image src='/landing/card-right.svg' alt='' fill className='object-contain' />
+      </div>
+
+      <div className='relative z-10 flex flex-col items-center gap-[12px]'>
+        <h1
+          id='hero-heading'
+          className='font-[430] font-season text-[64px] text-white leading-[100%] tracking-[-0.02em]'
+        >
+          Build Agents
+        </h1>
+        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[16px] leading-[125%] tracking-[0.02em]'>
+          Build and deploy agentic workflows
+        </p>
+
+        <div className='mt-[12px] flex items-center gap-[8px]'>
+          <Link
+            href='/login'
+            className={`${CTA_BASE} border-[#3d3d3d] text-[#ECECEC] transition-colors hover:bg-[#2A2A2A]`}
+            aria-label='Log in'
+          >
+            Log in
+          </Link>
+          <Link
+            href='/signup'
+            className={`${CTA_BASE} gap-[8px] border-[#33C482] bg-[#33C482] text-black transition-[filter] hover:brightness-110`}
+            aria-label='Get started with Sim'
+          >
+            Get started
+          </Link>
+        </div>
+      </div>
+
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-0 right-[13.1vw] z-20 w-[calc(140px_+_10.76vw)] max-w-[295px]'
+      >
+        <BlocksTopRightAnimated animState={blockStates.topRight} />
+      </div>
+
+      <div
+        aria-hidden='true'
+        className='pointer-events-none absolute top-0 left-[16vw] z-20 w-[calc(140px_+_10.76vw)] max-w-[295px]'
+      >
+        <BlocksTopLeftAnimated animState={blockStates.topLeft} />
+      </div>
+
+      <div className='relative z-10 mx-auto mt-[2.4vw] w-[78.9vw] px-[1.4vw]'>
+        <div
+          aria-hidden='true'
+          className='-translate-y-1/2 pointer-events-none absolute top-[50%] right-[calc(100%-1.41vw)] z-20 w-[calc(16px_+_1.25vw)] max-w-[34px]'
+        >
+          <BlocksLeftAnimated animState={blockStates.left} />
+        </div>
+
+        <div
+          aria-hidden='true'
+          className='-translate-y-1/2 pointer-events-none absolute top-[50%] left-[calc(100%-1.41vw)] z-20 w-[calc(16px_+_1.25vw)] max-w-[34px] scale-x-[-1]'
+        >
+          <BlocksRightSideAnimated animState={blockStates.rightSide} />
+        </div>
+
+        <div className='relative z-10 overflow-hidden rounded border border-[#2A2A2A]'>
+          <LandingPreview />
+        </div>
+      </div>
+
+      <div
+        aria-hidden='true'
+        className='-translate-y-1/2 pointer-events-none absolute top-[50%] right-0 z-20 w-[calc(16px_+_1.25vw)] max-w-[34px]'
+      >
+        <BlocksRightAnimated animState={blockStates.rightEdge} />
+      </div>
+    </section>
+  )
+}

apps/sim/app/(home)/components/index.ts

@@ -0,0 +1,23 @@
+import Collaboration from '@/app/(home)/components/collaboration/collaboration'
+import Enterprise from '@/app/(home)/components/enterprise/enterprise'
+import Features from '@/app/(home)/components/features/features'
+import Footer from '@/app/(home)/components/footer/footer'
+import Hero from '@/app/(home)/components/hero/hero'
+import Navbar from '@/app/(home)/components/navbar/navbar'
+import Pricing from '@/app/(home)/components/pricing/pricing'
+import StructuredData from '@/app/(home)/components/structured-data'
+import Templates from '@/app/(home)/components/templates/templates'
+import Testimonials from '@/app/(home)/components/testimonials/testimonials'
+
+export {
+  Collaboration,
+  Enterprise,
+  Features,
+  Footer,
+  Hero,
+  Navbar,
+  Pricing,
+  StructuredData,
+  Templates,
+  Testimonials,
+}

apps/sim/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx

@@ -0,0 +1,153 @@
+'use client'
+
+import { memo, useCallback, useRef, useState } from 'react'
+import { ArrowUp } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { createPortal } from 'react-dom'
+import { BubbleChatPreview, ChevronDown, MoreHorizontal, Play } from '@/components/emcn'
+import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
+
+/**
+ * Lightweight static panel replicating the real workspace panel styling.
+ * The copilot tab is active with a functional user input.
+ * When submitted, stores the prompt and redirects to /signup (same as landing hero).
+ *
+ * Structure mirrors the real Panel component:
+ *   aside > div.border-l.pt-[14px] > Header(px-8) > Tabs(px-8,pt-14) > Content(pt-12)
+ *     inside Content > Copilot > header-bar(mx-[-1px]) > UserInput(p-8)
+ */
+export const LandingPreviewPanel = memo(function LandingPreviewPanel() {
+  const router = useRouter()
+  const [inputValue, setInputValue] = useState('')
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const [cursorPos, setCursorPos] = useState<{ x: number; y: number } | null>(null)
+
+  const isEmpty = inputValue.trim().length === 0
+
+  const handleSubmit = useCallback(() => {
+    if (isEmpty) return
+    LandingPromptStorage.store(inputValue)
+    router.push('/signup')
+  }, [isEmpty, inputValue, router])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        handleSubmit()
+      }
+    },
+    [handleSubmit]
+  )
+
+  return (
+    <div className='flex h-full w-[280px] flex-shrink-0 flex-col bg-[#1e1e1e]'>
+      <div className='flex h-full flex-col border-[#2c2c2c] border-l pt-[14px]'>
+        {/* Header — More + Chat | Deploy + Run */}
+        <div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
+          <div className='pointer-events-none flex gap-[6px]'>
+            <div className='flex h-[30px] w-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
+              <MoreHorizontal className='h-[14px] w-[14px] text-[#e6e6e6]' />
+            </div>
+            <div className='flex h-[30px] w-[30px] items-center justify-center rounded-[5px] border border-[#3d3d3d] bg-[#363636]'>
+              <BubbleChatPreview className='h-[14px] w-[14px] text-[#e6e6e6]' />
+            </div>
+          </div>
+          <Link
+            href='/signup'
+            className='flex gap-[6px]'
+            onMouseMove={(e) => setCursorPos({ x: e.clientX, y: e.clientY })}
+            onMouseLeave={() => setCursorPos(null)}
+          >
+            <div className='flex h-[30px] items-center rounded-[5px] bg-[#32bd7e] px-[10px] transition-[filter] hover:brightness-110'>
+              <span className='font-medium text-[#1b1b1b] text-[12px]'>Deploy</span>
+            </div>
+            <div className='flex h-[30px] items-center gap-[8px] rounded-[5px] bg-[#32bd7e] px-[10px] transition-[filter] hover:brightness-110'>
+              <Play className='h-[11.5px] w-[11.5px] text-[#1b1b1b]' />
+              <span className='font-medium text-[#1b1b1b] text-[12px]'>Run</span>
+            </div>
+          </Link>
+          {cursorPos &&
+            createPortal(
+              <div
+                className='pointer-events-none fixed z-[9999]'
+                style={{ left: cursorPos.x + 14, top: cursorPos.y + 14 }}
+              >
+                {/* Decorative color bars — mirrors hero top-right block sequence */}
+                <div className='flex h-[4px]'>
+                  <div className='h-full w-[8px] bg-[#2ABBF8]' />
+                  <div className='h-full w-[14px] bg-[#2ABBF8] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#00F701]' />
+                  <div className='h-full w-[16px] bg-[#00F701] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#FFCC02]' />
+                  <div className='h-full w-[10px] bg-[#FFCC02] opacity-60' />
+                  <div className='h-full w-[8px] bg-[#FA4EDF]' />
+                  <div className='h-full w-[14px] bg-[#FA4EDF] opacity-60' />
+                </div>
+                <div className='flex items-center gap-[5px] bg-white px-[6px] py-[4px] font-medium text-[#1C1C1C] text-[11px]'>
+                  Get started
+                  <ChevronDown className='-rotate-90 h-[7px] w-[7px] text-[#1C1C1C]' />
+                </div>
+              </div>,
+              document.body
+            )}
+        </div>
+
+        {/* Tabs */}
+        <div className='flex flex-shrink-0 items-center px-[8px] pt-[14px]'>
+          <div className='pointer-events-none flex gap-[4px]'>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-[#3d3d3d] bg-[#363636] px-[8px] py-[5px]'>
+              <span className='font-medium text-[#e6e6e6] text-[12.5px]'>Copilot</span>
+            </div>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-transparent px-[8px] py-[5px]'>
+              <span className='font-medium text-[#787878] text-[12.5px]'>Toolbar</span>
+            </div>
+            <div className='flex h-[28px] items-center rounded-[6px] border border-transparent px-[8px] py-[5px]'>
+              <span className='font-medium text-[#787878] text-[12.5px]'>Editor</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Tab content — copilot */}
+        <div className='flex flex-1 flex-col overflow-hidden pt-[12px]'>
+          <div className='flex h-full flex-col'>
+            {/* Copilot header bar — matches mx-[-1px] in real copilot */}
+            <div className='pointer-events-none mx-[-1px] flex flex-shrink-0 items-center rounded-[4px] border border-[#2c2c2c] bg-[#292929] px-[12px] py-[6px]'>
+              <span className='truncate font-medium text-[#e6e6e6] text-[14px]'>New Chat</span>
+            </div>
+
+            {/* User input — matches real UserInput at p-[8px] inside copilot welcome state */}
+            <div className='px-[8px] pt-[12px] pb-[8px]'>
+              <div className='rounded-[4px] border border-[#3d3d3d] bg-[#292929] px-[6px] py-[6px]'>
+                <textarea
+                  ref={textareaRef}
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder='Build an AI agent...'
+                  rows={2}
+                  className='mb-[6px] min-h-[48px] w-full cursor-text resize-none border-0 bg-transparent px-[2px] py-1 font-base text-[#e6e6e6] text-sm leading-[1.25rem] placeholder-[#787878] caret-[#e6e6e6] outline-none'
+                />
+                <div className='flex items-center justify-end'>
+                  <button
+                    type='button'
+                    onClick={handleSubmit}
+                    disabled={isEmpty}
+                    className='flex h-[22px] w-[22px] items-center justify-center rounded-full border-0 p-0 transition-colors'
+                    style={{
+                      background: isEmpty ? '#808080' : '#e0e0e0',
+                      cursor: isEmpty ? 'not-allowed' : 'pointer',
+                    }}
+                  >
+                    <ArrowUp size={14} strokeWidth={2.25} color='#1b1b1b' />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})

apps/sim/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar.tsx

@@ -0,0 +1,142 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { Database, Layout, Search, Settings } from 'lucide-react'
+import { ChevronDown, Library } from '@/components/emcn'
+import type { PreviewWorkflow } from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data'
+
+/**
+ * Props for the LandingPreviewSidebar component
+ */
+interface LandingPreviewSidebarProps {
+  workflows: PreviewWorkflow[]
+  activeWorkflowId: string
+  onSelectWorkflow: (id: string) => void
+}
+
+/**
+ * Static footer navigation items matching the real sidebar
+ */
+const FOOTER_NAV_ITEMS = [
+  { id: 'logs', label: 'Logs', icon: Library },
+  { id: 'templates', label: 'Templates', icon: Layout },
+  { id: 'knowledge-base', label: 'Knowledge Base', icon: Database },
+  { id: 'settings', label: 'Settings', icon: Settings },
+] as const
+
+/**
+ * Lightweight static sidebar replicating the real workspace sidebar styling.
+ * Only workflow items are interactive — everything else is pointer-events-none.
+ *
+ * Colors sourced from the dark theme CSS variables:
+ * --surface-1: #1e1e1e, --surface-5: #363636, --border: #2c2c2c, --border-1: #3d3d3d
+ * --text-primary: #e6e6e6, --text-tertiary: #b3b3b3, --text-muted: #787878
+ */
+export function LandingPreviewSidebar({
+  workflows,
+  activeWorkflowId,
+  onSelectWorkflow,
+}: LandingPreviewSidebarProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const handleToggle = useCallback(() => {
+    setIsDropdownOpen((prev) => !prev)
+  }, [])
+
+  useEffect(() => {
+    if (!isDropdownOpen) return
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setIsDropdownOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [isDropdownOpen])
+
+  return (
+    <div className='flex h-full w-[220px] flex-shrink-0 flex-col border-[#2c2c2c] border-r bg-[#1e1e1e]'>
+      {/* Header */}
+      <div className='relative flex-shrink-0 px-[14px] pt-[12px]' ref={dropdownRef}>
+        <div className='flex items-center justify-between'>
+          <button
+            type='button'
+            onClick={handleToggle}
+            className='group -mx-[6px] flex cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[#363636]'
+          >
+            <span className='truncate font-base text-[#e6e6e6] text-[14px]'>My Workspace</span>
+            <ChevronDown
+              className={`h-[8px] w-[10px] flex-shrink-0 text-[#787878] transition-all duration-100 group-hover:text-[#cccccc] ${isDropdownOpen ? 'rotate-180' : ''}`}
+            />
+          </button>
+          <div className='pointer-events-none flex flex-shrink-0 items-center'>
+            <Search className='h-[14px] w-[14px] text-[#787878]' />
+          </div>
+        </div>
+
+        {/* Workspace switcher dropdown */}
+        {isDropdownOpen && (
+          <div className='absolute top-[42px] left-[8px] z-50 min-w-[160px] max-w-[160px] rounded-[6px] bg-[#242424] px-[6px] py-[6px] shadow-lg'>
+            <div
+              className='flex h-[26px] cursor-pointer items-center gap-[8px] rounded-[6px] bg-[#3d3d3d] px-[6px] font-base text-[#e6e6e6] text-[13px]'
+              role='menuitem'
+              onClick={() => setIsDropdownOpen(false)}
+            >
+              <span className='min-w-0 flex-1 truncate'>My Workspace</span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Workflow items */}
+      <div className='mt-[8px] space-y-[2px] overflow-x-hidden px-[8px]'>
+        {workflows.map((workflow) => {
+          const isActive = workflow.id === activeWorkflowId
+          return (
+            <button
+              key={workflow.id}
+              type='button'
+              onClick={() => onSelectWorkflow(workflow.id)}
+              className={`group flex h-[26px] w-full items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] transition-colors ${
+                isActive ? 'bg-[#363636]' : 'bg-transparent hover:bg-[#363636]'
+              }`}
+            >
+              <div
+                className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px]'
+                style={{ backgroundColor: workflow.color }}
+              />
+              <div className='min-w-0 flex-1'>
+                <div
+                  className={`min-w-0 truncate text-left font-medium ${
+                    isActive ? 'text-[#e6e6e6]' : 'text-[#b3b3b3] group-hover:text-[#e6e6e6]'
+                  }`}
+                >
+                  {workflow.name}
+                </div>
+              </div>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Footer navigation — static */}
+      <div className='pointer-events-none mt-auto flex flex-shrink-0 flex-col gap-[2px] border-[#2c2c2c] border-t px-[7.75px] pt-[8px] pb-[8px]'>
+        {FOOTER_NAV_ITEMS.map((item) => {
+          const Icon = item.icon
+          return (
+            <div
+              key={item.id}
+              className='flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]'
+            >
+              <Icon className='h-[14px] w-[14px] flex-shrink-0 text-[#b3b3b3]' />
+              <span className='truncate font-medium text-[#b3b3b3] text-[13px]'>{item.label}</span>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow.tsx

@@ -0,0 +1,162 @@
+'use client'
+
+import { useCallback, useMemo, useState } from 'react'
+import { motion } from 'framer-motion'
+import ReactFlow, {
+  applyEdgeChanges,
+  applyNodeChanges,
+  type Edge,
+  type EdgeProps,
+  type EdgeTypes,
+  getSmoothStepPath,
+  type Node,
+  type NodeTypes,
+  type OnEdgesChange,
+  type OnNodesChange,
+  ReactFlowProvider,
+} from 'reactflow'
+import 'reactflow/dist/style.css'
+import { PreviewBlockNode } from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node'
+import {
+  EASE_OUT,
+  type PreviewWorkflow,
+  toReactFlowElements,
+} from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data'
+
+interface FitViewOptions {
+  padding?: number
+  maxZoom?: number
+}
+
+interface LandingPreviewWorkflowProps {
+  workflow: PreviewWorkflow
+  animate?: boolean
+  fitViewOptions?: FitViewOptions
+}
+
+/**
+ * Custom edge that draws left-to-right on initial load via stroke animation.
+ * Falls back to a static path when `data.animate` is false.
+ */
+function PreviewEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  style,
+  data,
+}: EdgeProps) {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+  })
+
+  if (data?.animate) {
+    return (
+      <motion.path
+        id={id}
+        className='react-flow__edge-path'
+        d={edgePath}
+        style={{ ...style, fill: 'none' }}
+        initial={{ pathLength: 0, opacity: 0 }}
+        animate={{ pathLength: 1, opacity: 1 }}
+        transition={{
+          pathLength: { duration: 0.4, delay: data.delay ?? 0, ease: EASE_OUT },
+          opacity: { duration: 0.15, delay: data.delay ?? 0 },
+        }}
+      />
+    )
+  }
+
+  return (
+    <path
+      id={id}
+      className='react-flow__edge-path'
+      d={edgePath}
+      style={{ ...style, fill: 'none' }}
+    />
+  )
+}
+
+const NODE_TYPES: NodeTypes = { previewBlock: PreviewBlockNode }
+const EDGE_TYPES: EdgeTypes = { previewEdge: PreviewEdge }
+const PRO_OPTIONS = { hideAttribution: true }
+const DEFAULT_FIT_VIEW_OPTIONS = { padding: 0.3, maxZoom: 1 } as const
+
+/**
+ * Inner flow component. Keyed on workflow ID by the parent so it remounts
+ * cleanly on workflow switch — fitView fires on mount with zero delay.
+ */
+function PreviewFlow({ workflow, animate = false, fitViewOptions }: LandingPreviewWorkflowProps) {
+  const { nodes: initialNodes, edges: initialEdges } = useMemo(
+    () => toReactFlowElements(workflow, animate),
+    [workflow, animate]
+  )
+
+  const [nodes, setNodes] = useState<Node[]>(initialNodes)
+  const [edges, setEdges] = useState<Edge[]>(initialEdges)
+
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
+    []
+  )
+
+  const onEdgesChange: OnEdgesChange = useCallback(
+    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
+    []
+  )
+
+  const resolvedFitViewOptions = fitViewOptions ?? DEFAULT_FIT_VIEW_OPTIONS
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      nodeTypes={NODE_TYPES}
+      edgeTypes={EDGE_TYPES}
+      defaultEdgeOptions={{ type: 'previewEdge' }}
+      elementsSelectable={false}
+      nodesDraggable
+      nodesConnectable={false}
+      zoomOnScroll={false}
+      zoomOnDoubleClick={false}
+      panOnScroll={false}
+      zoomOnPinch={false}
+      panOnDrag
+      preventScrolling={false}
+      autoPanOnNodeDrag={false}
+      proOptions={PRO_OPTIONS}
+      fitView
+      fitViewOptions={resolvedFitViewOptions}
+      className='h-full w-full bg-[#1b1b1b]'
+    />
+  )
+}
+
+/**
+ * Lightweight ReactFlow canvas displaying an interactive workflow preview.
+ * The key on workflow.id forces a clean remount on switch — instant fitView,
+ * no timers, no flicker.
+ */
+export function LandingPreviewWorkflow({
+  workflow,
+  animate = false,
+  fitViewOptions,
+}: LandingPreviewWorkflowProps) {
+  return (
+    <div className='h-full w-full'>
+      <ReactFlowProvider key={workflow.id}>
+        <PreviewFlow workflow={workflow} animate={animate} fitViewOptions={fitViewOptions} />
+      </ReactFlowProvider>
+    </div>
+  )
+}

apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/preview-block-node.tsx

@@ -0,0 +1,307 @@
+'use client'
+
+import { memo } from 'react'
+import { motion } from 'framer-motion'
+import { Database } from 'lucide-react'
+import { Handle, type NodeProps, Position } from 'reactflow'
+import {
+  AgentIcon,
+  AnthropicIcon,
+  FirecrawlIcon,
+  GeminiIcon,
+  GithubIcon,
+  GmailIcon,
+  GoogleCalendarIcon,
+  GoogleSheetsIcon,
+  JiraIcon,
+  LinearIcon,
+  LinkedInIcon,
+  MistralIcon,
+  NotionIcon,
+  OpenAIIcon,
+  RedditIcon,
+  ReductoIcon,
+  ScheduleIcon,
+  SlackIcon,
+  StartIcon,
+  SupabaseIcon,
+  TelegramIcon,
+  TextractIcon,
+  WebhookIcon,
+  xAIIcon,
+  xIcon,
+  YouTubeIcon,
+} from '@/components/icons'
+import {
+  BLOCK_STAGGER,
+  EASE_OUT,
+  type PreviewTool,
+} from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data'
+
+/** Map block type strings to their icon components. */
+const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  starter: StartIcon,
+  start_trigger: StartIcon,
+  agent: AgentIcon,
+  slack: SlackIcon,
+  jira: JiraIcon,
+  x: xIcon,
+  youtube: YouTubeIcon,
+  schedule: ScheduleIcon,
+  telegram: TelegramIcon,
+  knowledge_base: Database,
+  webhook: WebhookIcon,
+  github: GithubIcon,
+  supabase: SupabaseIcon,
+  google_calendar: GoogleCalendarIcon,
+  gmail: GmailIcon,
+  google_sheets: GoogleSheetsIcon,
+  linear: LinearIcon,
+  firecrawl: FirecrawlIcon,
+  reddit: RedditIcon,
+  notion: NotionIcon,
+  reducto: ReductoIcon,
+  textract: TextractIcon,
+  linkedin: LinkedInIcon,
+}
+
+/** Model prefix → provider icon for the "Model" row in agent blocks. */
+const MODEL_PROVIDER_ICONS: Array<{
+  prefix: string
+  icon: React.ComponentType<{ className?: string }>
+  size?: string
+}> = [
+  { prefix: 'gpt-', icon: OpenAIIcon },
+  { prefix: 'o3', icon: OpenAIIcon },
+  { prefix: 'o4', icon: OpenAIIcon },
+  { prefix: 'claude-', icon: AnthropicIcon },
+  { prefix: 'gemini-', icon: GeminiIcon },
+  { prefix: 'grok-', icon: xAIIcon, size: 'h-[17px] w-[17px]' },
+  { prefix: 'mistral-', icon: MistralIcon },
+]
+
+function getModelIconEntry(modelValue: string) {
+  const lower = modelValue.toLowerCase()
+  return MODEL_PROVIDER_ICONS.find((m) => lower.startsWith(m.prefix)) ?? null
+}
+
+/**
+ * Data shape for preview block nodes
+ */
+interface PreviewBlockData {
+  name: string
+  blockType: string
+  bgColor: string
+  rows: Array<{ title: string; value: string }>
+  tools?: PreviewTool[]
+  markdown?: string
+  hideTargetHandle?: boolean
+  hideSourceHandle?: boolean
+  index?: number
+  animate?: boolean
+}
+
+/**
+ * Handle styling matching the real WorkflowBlock handles.
+ * --workflow-edge in dark mode: #454545
+ */
+const HANDLE_BASE = '!z-[10] !border-none !bg-[#454545]'
+const HANDLE_LEFT = `${HANDLE_BASE} !left-[-8px] !h-5 !w-[7px] !rounded-r-none !rounded-l-[2px]`
+const HANDLE_RIGHT = `${HANDLE_BASE} !right-[-8px] !h-5 !w-[7px] !rounded-l-none !rounded-r-[2px]`
+
+/**
+ * Static preview block node matching the real WorkflowBlock styling.
+ * Renders a block header with icon + name, sub-block rows, and tool chips.
+ *
+ * Colors sourced from dark theme CSS variables:
+ * --surface-2: #232323, --border-1: #3d3d3d
+ * --text-primary: #e6e6e6, --text-tertiary: #b3b3b3
+ */
+export const PreviewBlockNode = memo(function PreviewBlockNode({
+  data,
+}: NodeProps<PreviewBlockData>) {
+  const {
+    name,
+    blockType,
+    bgColor,
+    rows,
+    tools,
+    markdown,
+    hideTargetHandle,
+    hideSourceHandle,
+    index = 0,
+    animate = false,
+  } = data
+  const Icon = BLOCK_ICONS[blockType]
+  const delay = animate ? index * BLOCK_STAGGER : 0
+
+  if (blockType === 'note' && markdown) {
+    return (
+      <motion.div
+        className='relative'
+        initial={animate ? { opacity: 0 } : false}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.45, delay, ease: EASE_OUT }}
+      >
+        <div className='w-[280px] select-none rounded-[8px] border border-[#3d3d3d] bg-[#232323]'>
+          <div className='border-[#3d3d3d] border-b p-[8px]'>
+            <span className='font-medium text-[#e6e6e6] text-[16px]'>Note</span>
+          </div>
+          <div className='p-[10px]'>
+            <NoteMarkdown content={markdown} />
+          </div>
+        </div>
+      </motion.div>
+    )
+  }
+
+  const hasContent = rows.length > 0 || (tools && tools.length > 0)
+
+  return (
+    <motion.div
+      className='relative'
+      initial={animate ? { opacity: 0 } : false}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.45, delay, ease: EASE_OUT }}
+    >
+      <div className='relative z-[20] w-[250px] select-none rounded-[8px] border border-[#3d3d3d] bg-[#232323]'>
+        {/* Target handle (left side) */}
+        {!hideTargetHandle && (
+          <Handle
+            type='target'
+            position={Position.Left}
+            id='target'
+            className={HANDLE_LEFT}
+            style={{ top: '20px', transform: 'translateY(-50%)' }}
+            isConnectableStart={false}
+            isConnectableEnd={false}
+          />
+        )}
+
+        {/* Header */}
+        <div
+          className={`flex items-center justify-between p-[8px] ${hasContent ? 'border-[#3d3d3d] border-b' : ''}`}
+        >
+          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-[10px]'>
+            <div
+              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+              style={{ background: bgColor }}
+            >
+              {Icon && <Icon className='h-[16px] w-[16px] text-white' />}
+            </div>
+            <span className='truncate font-medium text-[#e6e6e6] text-[16px]'>{name}</span>
+          </div>
+        </div>
+
+        {/* Sub-block rows + tools */}
+        {hasContent && (
+          <div className='flex flex-col gap-[8px] p-[8px]'>
+            {rows.map((row) => {
+              const modelEntry = row.title === 'Model' ? getModelIconEntry(row.value) : null
+              const ModelIcon = modelEntry?.icon
+              return (
+                <div key={row.title} className='flex items-center gap-[8px]'>
+                  <span className='flex-shrink-0 font-normal text-[#b3b3b3] text-[14px] capitalize'>
+                    {row.title}
+                  </span>
+                  {row.value && (
+                    <span className='flex min-w-0 flex-1 items-center justify-end gap-[5px] font-normal text-[#e6e6e6] text-[14px]'>
+                      {ModelIcon && (
+                        <ModelIcon
+                          className={`inline-block flex-shrink-0 text-[#e6e6e6] ${modelEntry.size ?? 'h-[14px] w-[14px]'}`}
+                        />
+                      )}
+                      <span className='truncate'>{row.value}</span>
+                    </span>
+                  )}
+                </div>
+              )
+            })}
+
+            {/* Tool chips — inline with label */}
+            {tools && tools.length > 0 && (
+              <div className='flex items-center gap-[8px]'>
+                <span className='flex-shrink-0 font-normal text-[#b3b3b3] text-[14px]'>Tools</span>
+                <div className='flex flex-1 flex-wrap items-center justify-end gap-[5px]'>
+                  {tools.map((tool) => {
+                    const ToolIcon = BLOCK_ICONS[tool.type]
+                    return (
+                      <div
+                        key={tool.type}
+                        className='flex items-center gap-[5px] rounded-[5px] border border-[#3d3d3d] bg-[#2a2a2a] px-[6px] py-[3px]'
+                      >
+                        <div
+                          className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                          style={{ background: tool.bgColor }}
+                        >
+                          {ToolIcon && <ToolIcon className='h-[10px] w-[10px] text-white' />}
+                        </div>
+                        <span className='font-normal text-[#e6e6e6] text-[12px]'>{tool.name}</span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Source handle (right side) */}
+        {!hideSourceHandle && (
+          <Handle
+            type='source'
+            position={Position.Right}
+            id='source'
+            className={HANDLE_RIGHT}
+            style={{ top: '20px', transform: 'translateY(-50%)' }}
+            isConnectableStart={false}
+            isConnectableEnd={false}
+          />
+        )}
+      </div>
+    </motion.div>
+  )
+})
+
+/**
+ * Renders lightweight markdown-like content for note blocks.
+ * Supports ### headings, **bold**, _italic_, --- rules, and blank-line spacing.
+ */
+function NoteMarkdown({ content }: { content: string }) {
+  const lines = content.split('\n')
+
+  return (
+    <div className='flex flex-col gap-[4px]'>
+      {lines.map((line, i) => {
+        const trimmed = line.trim()
+        if (!trimmed) return <div key={i} className='h-[4px]' />
+
+        if (trimmed === '---') {
+          return <hr key={i} className='my-[4px] border-[#3d3d3d] border-t' />
+        }
+
+        if (trimmed.startsWith('### ')) {
+          return (
+            <p key={i} className='font-semibold text-[#e6e6e6] text-[16px] leading-[1.3]'>
+              {trimmed.slice(4)}
+            </p>
+          )
+        }
+
+        return (
+          <p
+            key={i}
+            className='font-medium text-[#e6e6e6] text-[13px] leading-[1.5]'
+            dangerouslySetInnerHTML={{
+              __html: trimmed
+                .replace(/\*\*_(.+?)_\*\*/g, '<strong><em>$1</em></strong>')
+                .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+                .replace(/_"(.+?)"_/g, '<em>&ldquo;$1&rdquo;</em>')
+                .replace(/_(.+?)_/g, '<em>$1</em>'),
+            }}
+          />
+        )
+      })}
+    </div>
+  )
+}

apps/sim/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data.ts

@@ -0,0 +1,226 @@
+import type { Edge, Node } from 'reactflow'
+import { Position } from 'reactflow'
+
+/**
+ * Tool entry displayed as a chip on agent blocks
+ */
+export interface PreviewTool {
+  name: string
+  type: string
+  bgColor: string
+}
+
+/**
+ * Static block definition for preview workflow nodes
+ */
+export interface PreviewBlock {
+  id: string
+  name: string
+  type: string
+  bgColor: string
+  rows: Array<{ title: string; value: string }>
+  tools?: PreviewTool[]
+  markdown?: string
+  position: { x: number; y: number }
+  hideTargetHandle?: boolean
+  hideSourceHandle?: boolean
+}
+
+/**
+ * Workflow definition containing nodes, edges, and metadata
+ */
+export interface PreviewWorkflow {
+  id: string
+  name: string
+  color: string
+  blocks: PreviewBlock[]
+  edges: Array<{ id: string; source: string; target: string }>
+}
+
+/**
+ * IT Service Management workflow — Slack Trigger -> Agent (KB tool) -> Jira
+ */
+const IT_SERVICE_WORKFLOW: PreviewWorkflow = {
+  id: 'wf-it-service',
+  name: 'IT Service Management',
+  color: '#FF6B2C',
+  blocks: [
+    {
+      id: 'slack-1',
+      name: 'Slack',
+      type: 'slack',
+      bgColor: '#611f69',
+      rows: [
+        { title: 'Channel', value: '#it-support' },
+        { title: 'Event', value: 'New Message' },
+      ],
+      position: { x: 80, y: 140 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-1',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'claude-sonnet-4.6' },
+        { title: 'System Prompt', value: 'Triage incoming IT...' },
+      ],
+      tools: [{ name: 'Knowledge Base', type: 'knowledge_base', bgColor: '#10B981' }],
+      position: { x: 420, y: 40 },
+    },
+    {
+      id: 'jira-1',
+      name: 'Jira',
+      type: 'jira',
+      bgColor: '#E0E0E0',
+      rows: [
+        { title: 'Operation', value: 'Get Issues' },
+        { title: 'Project', value: 'IT-Support' },
+      ],
+      position: { x: 420, y: 260 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'slack-1', target: 'agent-1' },
+    { id: 'e-2', source: 'slack-1', target: 'jira-1' },
+  ],
+}
+
+/**
+ * Content pipeline workflow — Schedule -> Agent (X + YouTube tools)
+ */
+const CONTENT_PIPELINE_WORKFLOW: PreviewWorkflow = {
+  id: 'wf-content-pipeline',
+  name: 'Content Pipeline',
+  color: '#33C482',
+  blocks: [
+    {
+      id: 'schedule-1',
+      name: 'Schedule',
+      type: 'schedule',
+      bgColor: '#6366F1',
+      rows: [
+        { title: 'Run Frequency', value: 'Daily' },
+        { title: 'Time', value: '09:00 AM' },
+      ],
+      position: { x: 80, y: 140 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-2',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'grok-4' },
+        { title: 'System Prompt', value: 'Repurpose trending...' },
+      ],
+      tools: [
+        { name: 'X', type: 'x', bgColor: '#000000' },
+        { name: 'YouTube', type: 'youtube', bgColor: '#FF0000' },
+      ],
+      position: { x: 420, y: 180 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [{ id: 'e-3', source: 'schedule-1', target: 'agent-2' }],
+}
+
+/**
+ * Empty "New Agent" workflow — a single note prompting the user to start building
+ */
+const NEW_AGENT_WORKFLOW: PreviewWorkflow = {
+  id: 'wf-new-agent',
+  name: 'New Agent',
+  color: '#787878',
+  blocks: [
+    {
+      id: 'note-1',
+      name: '',
+      type: 'note',
+      bgColor: 'transparent',
+      rows: [],
+      markdown: '### What will you build?\n\n_"Find Linear todos and send in Slack"_',
+      position: { x: 0, y: 0 },
+      hideTargetHandle: true,
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [],
+}
+
+export const PREVIEW_WORKFLOWS: PreviewWorkflow[] = [
+  CONTENT_PIPELINE_WORKFLOW,
+  IT_SERVICE_WORKFLOW,
+  NEW_AGENT_WORKFLOW,
+]
+
+/** Stagger delay between each block appearing (seconds). */
+export const BLOCK_STAGGER = 0.12
+
+/** Shared cubic-bezier easing — fast deceleration, gentle settle. */
+export const EASE_OUT: [number, number, number, number] = [0.16, 1, 0.3, 1]
+
+/** Shared edge style applied to all preview workflow connections */
+const EDGE_STYLE = { stroke: '#454545', strokeWidth: 1.5 } as const
+
+/**
+ * Converts a PreviewWorkflow to React Flow nodes and edges.
+ *
+ * @param workflow - The workflow definition
+ * @param animate - When true, node/edge data includes animation metadata
+ */
+export function toReactFlowElements(
+  workflow: PreviewWorkflow,
+  animate = false
+): {
+  nodes: Node[]
+  edges: Edge[]
+} {
+  const blockIndexMap = new Map(workflow.blocks.map((b, i) => [b.id, i]))
+
+  const nodes: Node[] = workflow.blocks.map((block, index) => ({
+    id: block.id,
+    type: 'previewBlock',
+    position: block.position,
+    data: {
+      name: block.name,
+      blockType: block.type,
+      bgColor: block.bgColor,
+      rows: block.rows,
+      tools: block.tools,
+      markdown: block.markdown,
+      hideTargetHandle: block.hideTargetHandle,
+      hideSourceHandle: block.hideSourceHandle,
+      index,
+      animate,
+    },
+    draggable: true,
+    selectable: false,
+    connectable: false,
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+  }))
+
+  const edges: Edge[] = workflow.edges.map((e) => {
+    const sourceIndex = blockIndexMap.get(e.source) ?? 0
+    return {
+      id: e.id,
+      source: e.source,
+      target: e.target,
+      type: 'previewEdge',
+      animated: false,
+      style: EDGE_STYLE,
+      sourceHandle: 'source',
+      targetHandle: 'target',
+      data: {
+        animate,
+        delay: animate ? sourceIndex * BLOCK_STAGGER + BLOCK_STAGGER : 0,
+      },
+    }
+  })
+
+  return { nodes, edges }
+}

apps/sim/app/(home)/components/landing-preview/landing-preview.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { motion, type Variants } from 'framer-motion'
+import { LandingPreviewPanel } from '@/app/(home)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
+import { LandingPreviewSidebar } from '@/app/(home)/components/landing-preview/components/landing-preview-sidebar/landing-preview-sidebar'
+import { LandingPreviewWorkflow } from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow'
+import {
+  EASE_OUT,
+  PREVIEW_WORKFLOWS,
+} from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data'
+
+const containerVariants: Variants = {
+  hidden: {},
+  visible: {
+    transition: { staggerChildren: 0.15 },
+  },
+}
+
+const sidebarVariants: Variants = {
+  hidden: { opacity: 0, x: -12 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      x: { duration: 0.25, ease: EASE_OUT },
+      opacity: { duration: 0.25, ease: EASE_OUT },
+    },
+  },
+}
+
+const panelVariants: Variants = {
+  hidden: { opacity: 0, x: 12 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      x: { duration: 0.25, ease: EASE_OUT },
+      opacity: { duration: 0.25, ease: EASE_OUT },
+    },
+  },
+}
+
+/**
+ * Interactive workspace preview for the hero section.
+ *
+ * Renders a lightweight replica of the Sim workspace with:
+ * - A sidebar with two selectable workflows
+ * - A ReactFlow canvas showing the active workflow's blocks and edges
+ * - A panel with a functional copilot input (stores prompt + redirects to /signup)
+ *
+ * Everything except the workflow items and the copilot input is non-interactive.
+ * On mount the sidebar slides from left and the panel from right. The canvas
+ * background stays fully opaque; individual block nodes animate in with a
+ * staggered fade. Edges draw left-to-right. Animations only fire on initial
+ * load — workflow switches render instantly.
+ */
+export function LandingPreview() {
+  const [activeWorkflowId, setActiveWorkflowId] = useState(PREVIEW_WORKFLOWS[0].id)
+  const isInitialMount = useRef(true)
+
+  useEffect(() => {
+    isInitialMount.current = false
+  }, [])
+
+  const activeWorkflow =
+    PREVIEW_WORKFLOWS.find((w) => w.id === activeWorkflowId) ?? PREVIEW_WORKFLOWS[0]
+
+  return (
+    <motion.div
+      className='dark flex aspect-[1116/549] w-full overflow-hidden rounded bg-[#1b1b1b] antialiased'
+      initial='hidden'
+      animate='visible'
+      variants={containerVariants}
+    >
+      <motion.div className='hidden lg:flex' variants={sidebarVariants}>
+        <LandingPreviewSidebar
+          workflows={PREVIEW_WORKFLOWS}
+          activeWorkflowId={activeWorkflowId}
+          onSelectWorkflow={setActiveWorkflowId}
+        />
+      </motion.div>
+      <div className='relative flex-1 overflow-hidden'>
+        <LandingPreviewWorkflow workflow={activeWorkflow} animate={isInitialMount.current} />
+      </div>
+      <motion.div className='hidden lg:flex' variants={panelVariants}>
+        <LandingPreviewPanel />
+      </motion.div>
+    </motion.div>
+  )
+}

apps/sim/app/(home)/components/navbar/components/github-stars.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { createLogger } from '@sim/logger'
+import { GithubOutlineIcon } from '@/components/icons'
+import { getFormattedGitHubStars } from '@/app/(landing)/actions/github'
+
+const logger = createLogger('github-stars')
+
+const INITIAL_STARS = '26.4k'
+
+/**
+ * Client component that displays GitHub stars count.
+ *
+ * Isolated as a client component to allow the parent Navbar to remain
+ * a Server Component for optimal SEO/GEO crawlability.
+ */
+export function GitHubStars() {
+  const [stars, setStars] = useState(INITIAL_STARS)
+
+  useEffect(() => {
+    getFormattedGitHubStars()
+      .then(setStars)
+      .catch((error) => {
+        logger.warn('Failed to fetch GitHub stars', error)
+      })
+  }, [])
+
+  return (
+    <a
+      href='https://github.com/simstudioai/sim'
+      target='_blank'
+      rel='noopener noreferrer'
+      className='flex items-center gap-[8px] px-[12px]'
+      aria-label={`GitHub repository — ${stars} stars`}
+    >
+      <GithubOutlineIcon className='h-[14px] w-[14px]' />
+      <span aria-live='polite'>{stars}</span>
+    </a>
+  )
+}

apps/sim/app/(home)/components/navbar/navbar.tsx

@@ -0,0 +1,97 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { ChevronDown } from '@/components/emcn'
+import { GitHubStars } from '@/app/(home)/components/navbar/components/github-stars'
+
+interface NavLink {
+  label: string
+  href: string
+  external?: boolean
+  icon?: 'chevron'
+}
+
+const NAV_LINKS: NavLink[] = [
+  { label: 'Docs', href: '/docs', icon: 'chevron' },
+  { label: 'Pricing', href: '/pricing' },
+  { label: 'Careers', href: '/careers' },
+  { label: 'Enterprise', href: '/enterprise' },
+]
+
+/** Logo and nav edge: horizontal padding (px) for left/right symmetry. */
+const LOGO_CELL = 'flex items-center px-[20px]'
+
+/** Links: even spacing between items. */
+const LINK_CELL = 'flex items-center px-[14px]'
+
+export default function Navbar() {
+  return (
+    <nav
+      aria-label='Primary navigation'
+      className='flex h-[52px] border-[#2A2A2A] border-b-[1px] bg-[#1C1C1C] font-[430] font-season text-[#ECECEC] text-[14px]'
+      itemScope
+      itemType='https://schema.org/SiteNavigationElement'
+    >
+      {/* Logo */}
+      <Link href='/' className={LOGO_CELL} aria-label='Sim home' itemProp='url'>
+        <span itemProp='name' className='sr-only'>
+          Sim
+        </span>
+        <Image
+          src='/logo/sim-landing.svg'
+          alt='Sim'
+          width={71}
+          height={22}
+          className='h-[22px] w-auto'
+          priority
+        />
+      </Link>
+
+      {/* Links */}
+      <ul className='mt-[0.75px] flex'>
+        {NAV_LINKS.map(({ label, href, external, icon }) => (
+          <li key={label} className='flex'>
+            {external ? (
+              <a href={href} target='_blank' rel='noopener noreferrer' className={LINK_CELL}>
+                {label}
+              </a>
+            ) : (
+              <Link
+                href={href}
+                className={icon ? `${LINK_CELL} gap-[8px]` : LINK_CELL}
+                aria-label={label}
+              >
+                {label}
+                {icon === 'chevron' && (
+                  <ChevronDown className='mt-[1.75px] h-[10px] w-[10px] flex-shrink-0 text-[#ECECEC]' />
+                )}
+              </Link>
+            )}
+          </li>
+        ))}
+        <li className='flex'>
+          <GitHubStars />
+        </li>
+      </ul>
+
+      <div className='flex-1' />
+
+      {/* CTAs */}
+      <div className='flex items-center gap-[8px] px-[20px]'>
+        <Link
+          href='/login'
+          className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+          aria-label='Log in'
+        >
+          Log in
+        </Link>
+        <Link
+          href='/signup'
+          className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[9px] text-[13.5px] text-black transition-[filter] hover:brightness-110'
+          aria-label='Get started with Sim'
+        >
+          Get started
+        </Link>
+      </div>
+    </nav>
+  )
+}

apps/sim/app/(home)/components/pricing/pricing.tsx

@@ -0,0 +1,218 @@
+import Link from 'next/link'
+import { Badge } from '@/components/emcn'
+
+interface PricingTier {
+  id: string
+  name: string
+  description: string
+  price: string
+  billingPeriod?: string
+  color: string
+  features: string[]
+  cta: { label: string; href: string }
+}
+
+const PRICING_TIERS: PricingTier[] = [
+  {
+    id: 'community',
+    name: 'Community',
+    description: 'For individuals getting started with AI agents',
+    price: 'Free',
+    color: '#2ABBF8',
+    features: [
+      '$20 usage limit',
+      '5GB file storage',
+      '5 min execution limit',
+      'Limited log retention',
+      'CLI/SDK Access',
+    ],
+    cta: { label: 'Get started', href: '/signup' },
+  },
+  {
+    id: 'professional',
+    name: 'Professional',
+    description: 'For professionals building production workflows',
+    price: '$20',
+    billingPeriod: 'per month',
+    color: '#00F701',
+    features: [
+      '150 runs per minute (sync)',
+      '1,000 runs per minute (async)',
+      '50 min sync execution limit',
+      '50GB file storage',
+      'Unlimited invites',
+      'Unlimited log retention',
+    ],
+    cta: { label: 'Get started', href: '/signup' },
+  },
+  {
+    id: 'team',
+    name: 'Team',
+    description: 'For teams collaborating on complex agents',
+    price: '$40',
+    billingPeriod: 'per month',
+    color: '#FA4EDF',
+    features: [
+      '300 runs per minute (sync)',
+      '2,500 runs per minute (async)',
+      '500GB file storage (pooled)',
+      '50 min sync execution limit',
+      'Unlimited invites',
+      'Unlimited log retention',
+      'Dedicated Slack channel',
+    ],
+    cta: { label: 'Get started', href: '/signup' },
+  },
+  {
+    id: 'enterprise',
+    name: 'Enterprise',
+    description: 'For organizations needing security and scale',
+    price: 'Custom',
+    color: '#FFCC02',
+    features: ['Custom rate limits', 'Custom file storage', 'SSO', 'SOC2', 'Dedicated support'],
+    cta: { label: 'Book a demo', href: '/contact' },
+  },
+]
+
+function CheckIcon({ color }: { color: string }) {
+  return (
+    <svg width='14' height='14' viewBox='0 0 14 14' fill='none'>
+      <path
+        d='M2.5 7L5.5 10L11.5 4'
+        stroke={color}
+        strokeWidth='1.5'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+interface PricingCardProps {
+  tier: PricingTier
+}
+
+function PricingCard({ tier }: PricingCardProps) {
+  const isEnterprise = tier.id === 'enterprise'
+  const isProfessional = tier.id === 'professional'
+
+  return (
+    <article className='flex flex-1 flex-col' aria-labelledby={`${tier.id}-heading`}>
+      <div className='flex flex-1 flex-col gap-6 rounded-t-lg border border-[#E5E5E5] border-b-0 bg-white p-5'>
+        <div className='flex flex-col'>
+          <h3
+            id={`${tier.id}-heading`}
+            className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[100%] tracking-[-0.02em]'
+          >
+            {tier.name}
+          </h3>
+          <p className='mt-2 min-h-[44px] font-[430] font-season text-[#5c5c5c] text-[14px] leading-[125%] tracking-[0.02em]'>
+            {tier.description}
+          </p>
+          <p className='mt-4 flex items-center gap-1.5 font-[430] font-season text-[#1C1C1C] text-[20px] leading-[100%] tracking-[-0.02em]'>
+            {tier.price}
+            {tier.billingPeriod && (
+              <span className='text-[#737373] text-[16px]'>{tier.billingPeriod}</span>
+            )}
+          </p>
+          <div className='mt-4'>
+            {isEnterprise ? (
+              <a
+                href={tier.cta.href}
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:bg-[#F0F0F0]'
+              >
+                {tier.cta.label}
+              </a>
+            ) : isProfessional ? (
+              <Link
+                href={tier.cta.href}
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#33C482] bg-[#33C482] px-[10px] font-[430] font-season text-[14px] text-white transition-[filter] hover:brightness-110'
+              >
+                {tier.cta.label}
+              </Link>
+            ) : (
+              <Link
+                href={tier.cta.href}
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:bg-[#F0F0F0]'
+              >
+                {tier.cta.label}
+              </Link>
+            )}
+          </div>
+        </div>
+
+        <ul className='flex flex-col gap-2'>
+          {tier.features.map((feature) => (
+            <li key={feature} className='flex items-center gap-2'>
+              <CheckIcon color='#404040' />
+              <span className='font-[400] font-season text-[#5c5c5c] text-[14px] leading-[125%] tracking-[0.02em]'>
+                {feature}
+              </span>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className='relative h-[6px]'>
+        <div
+          className='absolute inset-0 rounded-b-sm opacity-60'
+          style={{ backgroundColor: tier.color }}
+        />
+        <div
+          className='absolute top-0 right-0 bottom-0 left-[12%] rounded-b-sm opacity-60'
+          style={{ backgroundColor: tier.color }}
+        />
+        <div
+          className='absolute top-0 right-0 bottom-0 left-[25%] rounded-b-sm'
+          style={{ backgroundColor: tier.color }}
+        />
+      </div>
+    </article>
+  )
+}
+
+/**
+ * Pricing section — tiered pricing plans with feature comparison.
+ *
+ * SEO:
+ * - `<section id="pricing" aria-labelledby="pricing-heading">`.
+ * - `<h2 id="pricing-heading">` for the section title.
+ * - Each tier: `<h3>` plan name + semantic `<ul>` feature list.
+ * - Free tier CTA uses `<Link href="/signup">` (crawlable). Enterprise CTA uses `<a>`.
+ *
+ * GEO:
+ * - Each plan has consistent structure: name, price, billing period, feature list.
+ * - Lead with a summary: "Sim offers a free Community plan, $20/mo Pro, $40/mo Team, custom Enterprise."
+ * - Prices must match the `Offer` items in structured-data.tsx exactly.
+ */
+export default function Pricing() {
+  return (
+    <section id='pricing' aria-labelledby='pricing-heading' className='bg-[#F6F6F6]'>
+      <div className='px-4 pt-[100px] pb-8 sm:px-8 md:px-[80px]'>
+        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-[20px]'>
+          <Badge
+            variant='blue'
+            size='md'
+            dot
+            className='bg-[#2ABBF8]/10 font-season text-[#2ABBF8] uppercase tracking-[0.02em]'
+          >
+            Pricing
+          </Badge>
+
+          <h2
+            id='pricing-heading'
+            className='font-[430] font-season text-[#1C1C1C] text-[32px] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+          >
+            Pricing
+          </h2>
+        </div>
+
+        <div className='mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4'>
+          {PRICING_TIERS.map((tier) => (
+            <PricingCard key={tier.id} tier={tier} />
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

apps/sim/app/(home)/components/structured-data.tsx

@@ -0,0 +1,224 @@
+/**
+ * JSON-LD structured data for the landing page.
+ *
+ * Renders a `<script type="application/ld+json">` with Schema.org markup.
+ * Single source of truth for machine-readable page metadata.
+ *
+ * Schemas: Organization, WebSite, WebPage, BreadcrumbList, WebApplication, FAQPage.
+ *
+ * AI crawler behavior (2025-2026):
+ * - Google AI Overviews / Bing Copilot parse JSON-LD from their search indexes.
+ * - GPTBot indexes JSON-LD during crawling (92% of LLM crawlers parse JSON-LD first).
+ * - Perplexity / Claude prioritize visible HTML over JSON-LD during direct fetch.
+ * - All claims here must also appear as visible text on the page.
+ *
+ * Maintenance:
+ * - Offer prices must match the Pricing component exactly.
+ * - `sameAs` links must match the Footer social links.
+ * - Do not add `aggregateRating` without real, verifiable review data.
+ */
+export default function StructuredData() {
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@graph': [
+      {
+        '@type': 'Organization',
+        '@id': 'https://sim.ai/#organization',
+        name: 'Sim',
+        alternateName: 'Sim Studio',
+        description:
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
+        url: 'https://sim.ai',
+        logo: {
+          '@type': 'ImageObject',
+          '@id': 'https://sim.ai/#logo',
+          url: 'https://sim.ai/logo/b%26w/text/b%26w.svg',
+          contentUrl: 'https://sim.ai/logo/b%26w/text/b%26w.svg',
+          width: 49.78314,
+          height: 24.276,
+          caption: 'Sim Logo',
+        },
+        image: { '@id': 'https://sim.ai/#logo' },
+        sameAs: [
+          'https://x.com/simdotai',
+          'https://github.com/simstudioai/sim',
+          'https://www.linkedin.com/company/simstudioai/',
+          'https://discord.gg/Hr4UWYEcTT',
+        ],
+        contactPoint: {
+          '@type': 'ContactPoint',
+          contactType: 'customer support',
+          availableLanguage: ['en'],
+        },
+      },
+      {
+        '@type': 'WebSite',
+        '@id': 'https://sim.ai/#website',
+        url: 'https://sim.ai',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
+        description:
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Join 100,000+ builders.',
+        publisher: { '@id': 'https://sim.ai/#organization' },
+        inLanguage: 'en-US',
+      },
+      {
+        '@type': 'WebPage',
+        '@id': 'https://sim.ai/#webpage',
+        url: 'https://sim.ai',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
+        isPartOf: { '@id': 'https://sim.ai/#website' },
+        about: { '@id': 'https://sim.ai/#software' },
+        datePublished: '2024-01-01T00:00:00+00:00',
+        dateModified: new Date().toISOString(),
+        description:
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs.',
+        breadcrumb: { '@id': 'https://sim.ai/#breadcrumb' },
+        inLanguage: 'en-US',
+        potentialAction: [{ '@type': 'ReadAction', target: ['https://sim.ai'] }],
+      },
+      {
+        '@type': 'BreadcrumbList',
+        '@id': 'https://sim.ai/#breadcrumb',
+        itemListElement: [
+          { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://sim.ai' },
+        ],
+      },
+      {
+        '@type': 'WebApplication',
+        '@id': 'https://sim.ai/#software',
+        url: 'https://sim.ai',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
+        description:
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
+        applicationCategory: 'DeveloperApplication',
+        operatingSystem: 'Web',
+        browserRequirements: 'Requires a modern browser with JavaScript enabled',
+        offers: [
+          {
+            '@type': 'Offer',
+            name: 'Community Plan',
+            price: '0',
+            priceCurrency: 'USD',
+            availability: 'https://schema.org/InStock',
+          },
+          {
+            '@type': 'Offer',
+            name: 'Pro Plan',
+            price: '20',
+            priceCurrency: 'USD',
+            priceSpecification: {
+              '@type': 'UnitPriceSpecification',
+              price: '20',
+              priceCurrency: 'USD',
+              unitText: 'MONTH',
+              billingIncrement: 1,
+            },
+            availability: 'https://schema.org/InStock',
+          },
+          {
+            '@type': 'Offer',
+            name: 'Team Plan',
+            price: '40',
+            priceCurrency: 'USD',
+            priceSpecification: {
+              '@type': 'UnitPriceSpecification',
+              price: '40',
+              priceCurrency: 'USD',
+              unitText: 'MONTH',
+              billingIncrement: 1,
+            },
+            availability: 'https://schema.org/InStock',
+          },
+        ],
+        featureList: [
+          'AI agent creation',
+          'Agentic workflow orchestration',
+          '1,000+ integrations',
+          'LLM orchestration (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
+          'Knowledge base creation',
+          'Table creation',
+          'Document creation',
+          'API access',
+          'Custom functions',
+          'Scheduled workflows',
+          'Event triggers',
+        ],
+        review: [
+          {
+            '@type': 'Review',
+            author: { '@type': 'Person', name: 'Hasan Toor' },
+            reviewBody:
+              'This startup just dropped the fastest way to build AI agents. This Figma-like canvas to build agents will blow your mind.',
+            url: 'https://x.com/hasantoxr/status/1912909502036525271',
+          },
+          {
+            '@type': 'Review',
+            author: { '@type': 'Person', name: 'nizzy' },
+            reviewBody:
+              'This is the zapier of agent building. I always believed that building agents and using AI should not be limited to technical people. I think this solves just that.',
+            url: 'https://x.com/nizzyabi/status/1907864421227180368',
+          },
+          {
+            '@type': 'Review',
+            author: { '@type': 'Organization', name: 'xyflow' },
+            reviewBody: 'A very good looking agent workflow builder and open source!',
+            url: 'https://x.com/xyflowdev/status/1909501499719438670',
+          },
+        ],
+      },
+      {
+        '@type': 'FAQPage',
+        '@id': 'https://sim.ai/#faq',
+        mainEntity: [
+          {
+            '@type': 'Question',
+            name: 'What is Sim?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Sim is the open-source platform to build AI agents and run your agentic workforce. Teams connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'Which AI models does Sim support?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Sim supports all major AI models including OpenAI (GPT-5, GPT-4o), Anthropic (Claude), Google (Gemini), xAI (Grok), Mistral, Perplexity, and many more. You can also connect to open-source models via Ollama.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'How much does Sim cost?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Sim offers a free Community plan with $20 usage limit, a Pro plan at $20/month, a Team plan at $40/month, and custom Enterprise pricing. All plans include CLI/SDK access.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'Do I need coding skills to use Sim?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'No coding skills are required. Sim provides a visual interface for building AI agents and agentic workflows. Developers can also use custom functions, the API, and the CLI/SDK for advanced use cases.',
+            },
+          },
+          {
+            '@type': 'Question',
+            name: 'What enterprise features does Sim offer?',
+            acceptedAnswer: {
+              '@type': 'Answer',
+              text: 'Sim offers SOC2 and HIPAA compliance, SSO/SAML authentication, role-based access control, audit logs, dedicated support, custom SLAs, and on-premise deployment options for enterprise customers.',
+            },
+          },
+        ],
+      },
+    ],
+  }
+
+  return (
+    <script
+      type='application/ld+json'
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+    />
+  )
+}

apps/sim/app/(home)/components/templates/template-workflows.ts

@@ -0,0 +1,582 @@
+import type { PreviewWorkflow } from '@/app/(home)/components/landing-preview/components/landing-preview-workflow/workflow-data'
+
+/**
+ * OCR Invoice to DB — Start → Agent (Textract) → Supabase
+ * Pattern: Straight line (all blocks aligned at top)
+ */
+const OCR_INVOICE_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-ocr-invoice',
+  name: 'OCR Invoice to DB',
+  color: '#2ABBF8',
+  blocks: [
+    {
+      id: 'starter-1',
+      name: 'Start',
+      type: 'starter',
+      bgColor: '#34B5FF',
+      rows: [{ title: 'URL', value: 'invoice.pdf' }],
+      position: { x: 40, y: 80 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-1',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'gpt-5.2' },
+        { title: 'System Prompt', value: 'Extract invoice fields...' },
+      ],
+      tools: [{ name: 'Textract', type: 'textract', bgColor: '#055F4E' }],
+      position: { x: 400, y: 100 },
+    },
+    {
+      id: 'supabase-1',
+      name: 'Supabase',
+      type: 'supabase',
+      bgColor: '#1C1C1C',
+      rows: [
+        { title: 'Table', value: 'invoices' },
+        { title: 'Operation', value: 'Insert Row' },
+      ],
+      position: { x: 760, y: 80 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'starter-1', target: 'agent-1' },
+    { id: 'e-2', source: 'agent-1', target: 'supabase-1' },
+  ],
+}
+
+/**
+ * GitHub Release Agent — GitHub → Agent → Slack
+ * Pattern: Convex (low → high → low)
+ */
+const GITHUB_RELEASE_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-github-release',
+  name: 'GitHub Release Agent',
+  color: '#00F701',
+  blocks: [
+    {
+      id: 'github-1',
+      name: 'GitHub',
+      type: 'github',
+      bgColor: '#181C1E',
+      rows: [
+        { title: 'Event', value: 'New Release' },
+        { title: 'Repository', value: 'org/repo' },
+      ],
+      position: { x: 60, y: 140 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-2',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'claude-sonnet-4.6' },
+        { title: 'System Prompt', value: 'Summarize changelog...' },
+      ],
+      position: { x: 370, y: 50 },
+    },
+    {
+      id: 'slack-1',
+      name: 'Slack',
+      type: 'slack',
+      bgColor: '#611f69',
+      rows: [
+        { title: 'Channel', value: '#releases' },
+        { title: 'Operation', value: 'Send Message' },
+      ],
+      position: { x: 680, y: 140 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'github-1', target: 'agent-2' },
+    { id: 'e-2', source: 'agent-2', target: 'slack-1' },
+  ],
+}
+
+/**
+ * Meeting Follow-up Agent — Google Calendar → Agent → Gmail
+ * Pattern: Concave (high → low → high)
+ */
+const MEETING_FOLLOWUP_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-meeting-followup',
+  name: 'Meeting Follow-up Agent',
+  color: '#FFCC02',
+  blocks: [
+    {
+      id: 'gcal-1',
+      name: 'Google Calendar',
+      type: 'google_calendar',
+      bgColor: '#E0E0E0',
+      rows: [
+        { title: 'Event', value: 'Meeting Ended' },
+        { title: 'Calendar', value: 'Work' },
+      ],
+      position: { x: 60, y: 60 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-3',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'gemini-2.5-pro' },
+        { title: 'System Prompt', value: 'Draft follow-up email...' },
+      ],
+      position: { x: 370, y: 150 },
+    },
+    {
+      id: 'gmail-1',
+      name: 'Gmail',
+      type: 'gmail',
+      bgColor: '#E0E0E0',
+      rows: [
+        { title: 'Operation', value: 'Send Email' },
+        { title: 'To', value: 'attendees' },
+      ],
+      position: { x: 680, y: 60 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'gcal-1', target: 'agent-3' },
+    { id: 'e-2', source: 'agent-3', target: 'gmail-1' },
+  ],
+}
+
+/**
+ * CV/Resume Scanner — Start → Agent (Reducto) → Google Sheets
+ * Pattern: Convex (low → high → low)
+ */
+const CV_SCANNER_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-cv-scanner',
+  name: 'CV/Resume Scanner',
+  color: '#FA4EDF',
+  blocks: [
+    {
+      id: 'starter-2',
+      name: 'Start',
+      type: 'starter',
+      bgColor: '#34B5FF',
+      rows: [{ title: 'File URL', value: 'resume.pdf' }],
+      position: { x: 60, y: 145 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-4',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'claude-opus-4.6' },
+        { title: 'System Prompt', value: 'Parse resume fields...' },
+      ],
+      tools: [{ name: 'Reducto', type: 'reducto', bgColor: '#5c0c5c' }],
+      position: { x: 370, y: 55 },
+    },
+    {
+      id: 'gsheets-1',
+      name: 'Google Sheets',
+      type: 'google_sheets',
+      bgColor: '#E0E0E0',
+      rows: [
+        { title: 'Spreadsheet', value: 'Candidates' },
+        { title: 'Operation', value: 'Append Row' },
+      ],
+      position: { x: 680, y: 145 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'starter-2', target: 'agent-4' },
+    { id: 'e-2', source: 'agent-4', target: 'gsheets-1' },
+  ],
+}
+
+/**
+ * Email Triage Agent — Gmail → Agent (KB) → fan-out to Slack + Linear
+ * Pattern: Fan-out (input low → agent mid → outputs spread vertically)
+ */
+const EMAIL_TRIAGE_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-email-triage',
+  name: 'Email Triage Agent',
+  color: '#FF6B2C',
+  blocks: [
+    {
+      id: 'gmail-2',
+      name: 'Gmail',
+      type: 'gmail',
+      bgColor: '#E0E0E0',
+      rows: [
+        { title: 'Event', value: 'New Email' },
+        { title: 'Label', value: 'Inbox' },
+      ],
+      position: { x: 60, y: 130 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-5',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'gpt-5.2-mini' },
+        { title: 'System Prompt', value: 'Classify and route...' },
+      ],
+      tools: [{ name: 'Knowledge Base', type: 'knowledge_base', bgColor: '#00B0B0' }],
+      position: { x: 370, y: 100 },
+    },
+    {
+      id: 'slack-2',
+      name: 'Slack',
+      type: 'slack',
+      bgColor: '#611f69',
+      rows: [
+        { title: 'Channel', value: '#urgent' },
+        { title: 'Operation', value: 'Send Message' },
+      ],
+      position: { x: 680, y: 20 },
+      hideSourceHandle: true,
+    },
+    {
+      id: 'linear-1',
+      name: 'Linear',
+      type: 'linear',
+      bgColor: '#5E6AD2',
+      rows: [
+        { title: 'Project', value: 'Support' },
+        { title: 'Operation', value: 'Create Issue' },
+      ],
+      position: { x: 680, y: 200 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'gmail-2', target: 'agent-5' },
+    { id: 'e-2', source: 'agent-5', target: 'slack-2' },
+    { id: 'e-3', source: 'agent-5', target: 'linear-1' },
+  ],
+}
+
+/**
+ * Competitor Monitor — Schedule → Agent (Firecrawl) → Slack
+ * Pattern: Concave (high → low → high)
+ */
+const COMPETITOR_MONITOR_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-competitor-monitor',
+  name: 'Competitor Monitor',
+  color: '#6366F1',
+  blocks: [
+    {
+      id: 'schedule-1',
+      name: 'Schedule',
+      type: 'schedule',
+      bgColor: '#6366F1',
+      rows: [
+        { title: 'Run Frequency', value: 'Daily' },
+        { title: 'Time', value: '08:00 AM' },
+      ],
+      position: { x: 60, y: 50 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-6',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'grok-4' },
+        { title: 'System Prompt', value: 'Monitor competitor...' },
+      ],
+      tools: [{ name: 'Firecrawl', type: 'firecrawl', bgColor: '#181C1E' }],
+      position: { x: 370, y: 150 },
+    },
+    {
+      id: 'slack-3',
+      name: 'Slack',
+      type: 'slack',
+      bgColor: '#611f69',
+      rows: [
+        { title: 'Channel', value: '#competitive-intel' },
+        { title: 'Operation', value: 'Send Message' },
+      ],
+      position: { x: 680, y: 50 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'schedule-1', target: 'agent-6' },
+    { id: 'e-2', source: 'agent-6', target: 'slack-3' },
+  ],
+}
+
+/**
+ * Social Listening Agent — Schedule → Agent (Reddit + X) → Notion
+ * Pattern: Convex (low → high → low)
+ */
+const SOCIAL_LISTENING_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-social-listening',
+  name: 'Social Listening Agent',
+  color: '#F43F5E',
+  blocks: [
+    {
+      id: 'schedule-2',
+      name: 'Schedule',
+      type: 'schedule',
+      bgColor: '#6366F1',
+      rows: [{ title: 'Run Frequency', value: 'Hourly' }],
+      position: { x: 60, y: 150 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-7',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'gemini-2.5-flash' },
+        { title: 'System Prompt', value: 'Track brand mentions...' },
+      ],
+      tools: [
+        { name: 'Reddit', type: 'reddit', bgColor: '#FF5700' },
+        { name: 'X', type: 'x', bgColor: '#000000' },
+      ],
+      position: { x: 370, y: 55 },
+    },
+    {
+      id: 'notion-1',
+      name: 'Notion',
+      type: 'notion',
+      bgColor: '#181C1E',
+      rows: [
+        { title: 'Database', value: 'Brand Mentions' },
+        { title: 'Operation', value: 'Create Page' },
+      ],
+      position: { x: 680, y: 150 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'schedule-2', target: 'agent-7' },
+    { id: 'e-2', source: 'agent-7', target: 'notion-1' },
+  ],
+}
+
+/**
+ * Data Enrichment Pipeline — Start → Agent (LinkedIn) → Google Sheets
+ * Pattern: Concave (high → low → high)
+ */
+const DATA_ENRICHMENT_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-data-enrichment',
+  name: 'Data Enrichment Pipeline',
+  color: '#14B8A6',
+  blocks: [
+    {
+      id: 'starter-3',
+      name: 'Start',
+      type: 'starter',
+      bgColor: '#34B5FF',
+      rows: [{ title: 'Email', value: 'lead@company.com' }],
+      position: { x: 60, y: 55 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-8',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'mistral-large' },
+        { title: 'System Prompt', value: 'Enrich lead data...' },
+      ],
+      tools: [{ name: 'LinkedIn', type: 'linkedin', bgColor: '#0072B1' }],
+      position: { x: 370, y: 145 },
+    },
+    {
+      id: 'gsheets-2',
+      name: 'Google Sheets',
+      type: 'google_sheets',
+      bgColor: '#E0E0E0',
+      rows: [
+        { title: 'Spreadsheet', value: 'Lead Database' },
+        { title: 'Operation', value: 'Update Row' },
+      ],
+      position: { x: 680, y: 55 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'starter-3', target: 'agent-8' },
+    { id: 'e-2', source: 'agent-8', target: 'gsheets-2' },
+  ],
+}
+
+/**
+ * Customer Feedback Digest — Schedule → Agent → Slack
+ * Pattern: Convex (low → high → low)
+ */
+const FEEDBACK_DIGEST_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-feedback-digest',
+  name: 'Customer Feedback Digest',
+  color: '#F59E0B',
+  blocks: [
+    {
+      id: 'schedule-3',
+      name: 'Schedule',
+      type: 'schedule',
+      bgColor: '#6366F1',
+      rows: [
+        { title: 'Run Frequency', value: 'Daily' },
+        { title: 'Time', value: '09:00 AM' },
+      ],
+      position: { x: 60, y: 145 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-9',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'claude-sonnet-4.6' },
+        { title: 'System Prompt', value: 'Analyze customer feedback...' },
+      ],
+      tools: [{ name: 'Airtable', type: 'airtable', bgColor: '#18BFFF' }],
+      position: { x: 370, y: 50 },
+    },
+    {
+      id: 'slack-4',
+      name: 'Slack',
+      type: 'slack',
+      bgColor: '#611f69',
+      rows: [
+        { title: 'Channel', value: '#product-feedback' },
+        { title: 'Operation', value: 'Send Message' },
+      ],
+      position: { x: 680, y: 145 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'schedule-3', target: 'agent-9' },
+    { id: 'e-2', source: 'agent-9', target: 'slack-4' },
+  ],
+}
+
+/**
+ * PR Review Agent — GitHub → Agent → Slack
+ * Pattern: Concave (high → low → high)
+ */
+const PR_REVIEW_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-pr-review',
+  name: 'PR Review Agent',
+  color: '#06B6D4',
+  blocks: [
+    {
+      id: 'github-2',
+      name: 'GitHub',
+      type: 'github',
+      bgColor: '#181C1E',
+      rows: [
+        { title: 'Event', value: 'Pull Request Opened' },
+        { title: 'Repository', value: 'org/repo' },
+      ],
+      position: { x: 60, y: 60 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-10',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'gpt-5.2' },
+        { title: 'System Prompt', value: 'Review code changes...' },
+      ],
+      position: { x: 370, y: 155 },
+    },
+    {
+      id: 'slack-5',
+      name: 'Slack',
+      type: 'slack',
+      bgColor: '#611f69',
+      rows: [
+        { title: 'Channel', value: '#code-reviews' },
+        { title: 'Operation', value: 'Send Message' },
+      ],
+      position: { x: 680, y: 60 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'github-2', target: 'agent-10' },
+    { id: 'e-2', source: 'agent-10', target: 'slack-5' },
+  ],
+}
+
+/**
+ * Knowledge Base QA — Start → Agent (KB) → Response
+ * Pattern: Convex (low → high → low)
+ */
+const KNOWLEDGE_QA_WORKFLOW: PreviewWorkflow = {
+  id: 'tpl-knowledge-qa',
+  name: 'Knowledge Base QA',
+  color: '#84CC16',
+  blocks: [
+    {
+      id: 'starter-4',
+      name: 'Start',
+      type: 'starter',
+      bgColor: '#34B5FF',
+      rows: [{ title: 'Question', value: 'How do I...' }],
+      position: { x: 60, y: 140 },
+      hideTargetHandle: true,
+    },
+    {
+      id: 'agent-11',
+      name: 'Agent',
+      type: 'agent',
+      bgColor: '#701ffc',
+      rows: [
+        { title: 'Model', value: 'gemini-2.5-pro' },
+        { title: 'System Prompt', value: 'Answer using knowledge...' },
+      ],
+      tools: [{ name: 'Knowledge Base', type: 'knowledge_base', bgColor: '#00B0B0' }],
+      position: { x: 370, y: 50 },
+    },
+    {
+      id: 'starter-5',
+      name: 'Response',
+      type: 'starter',
+      bgColor: '#34B5FF',
+      rows: [{ title: 'Answer', value: 'Based on your docs...' }],
+      position: { x: 680, y: 140 },
+      hideSourceHandle: true,
+    },
+  ],
+  edges: [
+    { id: 'e-1', source: 'starter-4', target: 'agent-11' },
+    { id: 'e-2', source: 'agent-11', target: 'starter-5' },
+  ],
+}
+
+export const TEMPLATE_WORKFLOWS: PreviewWorkflow[] = [
+  OCR_INVOICE_WORKFLOW,
+  GITHUB_RELEASE_WORKFLOW,
+  MEETING_FOLLOWUP_WORKFLOW,
+  CV_SCANNER_WORKFLOW,
+  EMAIL_TRIAGE_WORKFLOW,
+  COMPETITOR_MONITOR_WORKFLOW,
+  SOCIAL_LISTENING_WORKFLOW,
+  DATA_ENRICHMENT_WORKFLOW,
+  FEEDBACK_DIGEST_WORKFLOW,
+  PR_REVIEW_WORKFLOW,
+  KNOWLEDGE_QA_WORKFLOW,
+]

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

@@ -0,0 +1,543 @@
+'use client'
+
+import { useRef, useState } from 'react'
+import { type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { Badge, ChevronDown } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { hexToRgba } from '@/lib/core/utils/color'
+import { TEMPLATE_WORKFLOWS } from '@/app/(home)/components/templates/template-workflows'
+
+const LandingPreviewWorkflow = dynamic(
+  () =>
+    import(
+      '@/app/(home)/components/landing-preview/components/landing-preview-workflow/landing-preview-workflow'
+    ).then((mod) => mod.LandingPreviewWorkflow),
+  {
+    ssr: false,
+    loading: () => <div className='h-full w-full bg-[#1b1b1b]' />,
+  }
+)
+
+const LEFT_WALL_CLIP = 'polygon(0 8px, 100% 0, 100% 100%, 0 100%)'
+const BOTTOM_WALL_CLIP = 'polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%)'
+
+interface DepthConfig {
+  color: string
+  segments: readonly (readonly [opacity: number, width: number])[]
+}
+
+/** Depth color and gradient segment pattern per template. Segments are `[opacity, width%]` tuples. */
+const DEPTH_CONFIGS: Record<string, DepthConfig> = {
+  'tpl-ocr-invoice': {
+    color: '#2ABBF8',
+    segments: [
+      [0.3, 10],
+      [0.5, 8],
+      [0.8, 6],
+      [1, 5],
+      [0.4, 12],
+      [0.7, 8],
+      [1, 6],
+      [0.5, 10],
+      [0.9, 7],
+      [0.6, 12],
+      [1, 8],
+      [0.35, 8],
+    ],
+  },
+  'tpl-github-release': {
+    color: '#00F701',
+    segments: [
+      [0.4, 8],
+      [0.7, 6],
+      [1, 5],
+      [0.5, 14],
+      [0.85, 8],
+      [0.3, 12],
+      [1, 6],
+      [0.6, 10],
+      [0.9, 7],
+      [0.45, 8],
+      [1, 8],
+      [0.7, 8],
+    ],
+  },
+  'tpl-meeting-followup': {
+    color: '#FFCC02',
+    segments: [
+      [0.5, 12],
+      [0.8, 6],
+      [0.35, 10],
+      [1, 5],
+      [0.6, 8],
+      [0.9, 7],
+      [0.4, 14],
+      [1, 6],
+      [0.7, 10],
+      [0.5, 8],
+      [1, 6],
+      [0.3, 8],
+    ],
+  },
+  'tpl-cv-scanner': {
+    color: '#FA4EDF',
+    segments: [
+      [0.35, 6],
+      [0.6, 10],
+      [0.9, 5],
+      [1, 6],
+      [0.4, 8],
+      [0.75, 12],
+      [0.5, 7],
+      [1, 5],
+      [0.3, 10],
+      [0.8, 8],
+      [0.6, 9],
+      [1, 6],
+      [0.45, 8],
+    ],
+  },
+  'tpl-email-triage': {
+    color: '#FF6B2C',
+    segments: [
+      [0.4, 10],
+      [0.7, 8],
+      [1, 5],
+      [0.5, 12],
+      [0.85, 6],
+      [0.3, 10],
+      [1, 6],
+      [0.6, 8],
+      [0.9, 7],
+      [0.4, 12],
+      [1, 8],
+      [0.65, 8],
+    ],
+  },
+  'tpl-competitor-monitor': {
+    color: '#6366F1',
+    segments: [
+      [0.3, 8],
+      [0.55, 10],
+      [0.8, 6],
+      [1, 5],
+      [0.4, 12],
+      [0.7, 7],
+      [0.9, 8],
+      [0.5, 10],
+      [1, 6],
+      [0.35, 8],
+      [0.75, 6],
+      [1, 6],
+      [0.6, 8],
+    ],
+  },
+  'tpl-social-listening': {
+    color: '#F43F5E',
+    segments: [
+      [0.5, 10],
+      [0.8, 6],
+      [0.4, 8],
+      [1, 5],
+      [0.6, 12],
+      [0.35, 8],
+      [0.9, 7],
+      [1, 6],
+      [0.5, 10],
+      [0.75, 8],
+      [0.4, 6],
+      [1, 6],
+      [0.65, 8],
+    ],
+  },
+  'tpl-data-enrichment': {
+    color: '#14B8A6',
+    segments: [
+      [0.35, 8],
+      [0.6, 6],
+      [0.9, 5],
+      [0.4, 12],
+      [1, 6],
+      [0.7, 10],
+      [0.5, 7],
+      [0.85, 8],
+      [1, 5],
+      [0.3, 10],
+      [0.65, 8],
+      [1, 7],
+      [0.5, 8],
+    ],
+  },
+  'tpl-feedback-digest': {
+    color: '#F59E0B',
+    segments: [
+      [0.4, 10],
+      [0.65, 6],
+      [0.9, 5],
+      [0.5, 12],
+      [1, 6],
+      [0.35, 8],
+      [0.75, 7],
+      [1, 5],
+      [0.6, 10],
+      [0.85, 8],
+      [0.45, 6],
+      [1, 8],
+      [0.55, 9],
+    ],
+  },
+  'tpl-pr-review': {
+    color: '#06B6D4',
+    segments: [
+      [0.35, 8],
+      [0.7, 7],
+      [1, 5],
+      [0.45, 10],
+      [0.8, 6],
+      [0.3, 12],
+      [1, 6],
+      [0.55, 8],
+      [0.9, 7],
+      [0.4, 10],
+      [1, 6],
+      [0.65, 8],
+      [0.5, 7],
+    ],
+  },
+  'tpl-knowledge-qa': {
+    color: '#84CC16',
+    segments: [
+      [0.5, 8],
+      [0.75, 6],
+      [0.4, 10],
+      [1, 5],
+      [0.6, 8],
+      [0.85, 7],
+      [0.35, 12],
+      [1, 6],
+      [0.7, 8],
+      [0.45, 10],
+      [0.9, 6],
+      [1, 6],
+      [0.55, 8],
+    ],
+  },
+}
+
+const SCROLL_BLOCK_RX = '2.59574'
+
+/**
+ * Two-row horizontal block strip for the scroll-driven reveal in the templates section.
+ * Same structural pattern as the hero's top-right blocks with matching colours:
+ * blue (left) → pink (middle) → green (right).
+ */
+const SCROLL_BLOCK_RECTS = [
+  { opacity: 0.6, x: '-34.24', y: '0', width: '34.24', height: '16.86', fill: '#2ABBF8' },
+  { opacity: 1, x: '-17.38', y: '0', width: '16.86', height: '16.86', fill: '#2ABBF8' },
+  { opacity: 1, x: '0', y: '0', width: '16.86', height: '33.73', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '0', y: '0', width: '85.34', height: '16.86', fill: '#2ABBF8' },
+  { opacity: 1, x: '0', y: '0', width: '16.86', height: '16.86', fill: '#2ABBF8' },
+  { opacity: 0.6, x: '34.24', y: '0', width: '34.24', height: '33.73', fill: '#2ABBF8' },
+  { opacity: 1, x: '34.24', y: '0', width: '16.86', height: '16.86', fill: '#2ABBF8' },
+  { opacity: 1, x: '51.62', y: '16.86', width: '16.86', height: '16.86', fill: '#2ABBF8' },
+  { opacity: 1, x: '68.48', y: '0', width: '54.65', height: '16.86', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '106.27', y: '0', width: '34.24', height: '33.73', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '106.27', y: '0', width: '51.10', height: '16.86', fill: '#FA4EDF' },
+  { opacity: 1, x: '123.65', y: '16.86', width: '16.86', height: '16.86', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '157.37', y: '0', width: '34.24', height: '16.86', fill: '#FA4EDF' },
+  { opacity: 1, x: '157.37', y: '0', width: '16.86', height: '16.86', fill: '#FA4EDF' },
+  { opacity: 0.6, x: '209.0', y: '0', width: '68.48', height: '16.86', fill: '#00F701' },
+  { opacity: 0.6, x: '209.14', y: '0', width: '16.86', height: '33.73', fill: '#00F701' },
+  { opacity: 0.6, x: '243.23', y: '0', width: '34.24', height: '33.73', fill: '#00F701' },
+  { opacity: 1, x: '243.23', y: '0', width: '16.86', height: '16.86', fill: '#00F701' },
+  { opacity: 0.6, x: '260.10', y: '0', width: '34.04', height: '16.86', fill: '#00F701' },
+  { opacity: 1, x: '260.61', y: '16.86', width: '16.86', height: '16.86', fill: '#00F701' },
+] as const
+
+const SCROLL_BLOCK_MAX_X = Math.max(...SCROLL_BLOCK_RECTS.map((r) => Number.parseFloat(r.x)))
+const SCROLL_REVEAL_START = 0.05
+const SCROLL_REVEAL_SPAN = 0.7
+const SCROLL_FADE_IN = 0.03
+
+function getScrollBlockThreshold(x: string): number {
+  const normalized = Number.parseFloat(x) / SCROLL_BLOCK_MAX_X
+  return SCROLL_REVEAL_START + (1 - normalized) * SCROLL_REVEAL_SPAN
+}
+
+interface ScrollBlockRectProps {
+  scrollYProgress: MotionValue<number>
+  rect: (typeof SCROLL_BLOCK_RECTS)[number]
+}
+
+/** Renders a single SVG rect whose opacity is driven by scroll progress. */
+function ScrollBlockRect({ scrollYProgress, rect }: ScrollBlockRectProps) {
+  const threshold = getScrollBlockThreshold(rect.x)
+  const opacity = useTransform(
+    scrollYProgress,
+    [threshold, threshold + SCROLL_FADE_IN],
+    [0, rect.opacity]
+  )
+
+  return (
+    <motion.rect
+      x={rect.x}
+      y={rect.y}
+      width={rect.width}
+      height={rect.height}
+      rx={SCROLL_BLOCK_RX}
+      fill={rect.fill}
+      style={{ opacity }}
+    />
+  )
+}
+
+function buildBottomWallStyle(config: DepthConfig) {
+  let pos = 0
+  const stops: string[] = []
+  for (const [opacity, width] of config.segments) {
+    const c = hexToRgba(config.color, opacity)
+    stops.push(`${c} ${pos}%`, `${c} ${pos + width}%`)
+    pos += width
+  }
+  return {
+    clipPath: BOTTOM_WALL_CLIP,
+    background: `linear-gradient(135deg, ${stops.join(', ')})`,
+  }
+}
+
+interface DotGridProps {
+  className?: string
+  cols: number
+  rows: number
+  gap?: number
+}
+
+function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) {
+  return (
+    <div
+      aria-hidden='true'
+      className={className}
+      style={{
+        display: 'grid',
+        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+        gap,
+        placeItems: 'center',
+      }}
+    >
+      {Array.from({ length: cols * rows }, (_, i) => (
+        <div key={i} className='h-[2px] w-[2px] rounded-full bg-[#2A2A2A]' />
+      ))}
+    </div>
+  )
+}
+
+const TEMPLATES_PANEL_ID = 'templates-panel'
+
+export default function Templates() {
+  const sectionRef = useRef<HTMLDivElement>(null)
+  const [activeIndex, setActiveIndex] = useState(0)
+
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ['start 0.9', 'start 0.2'],
+  })
+
+  const activeWorkflow = TEMPLATE_WORKFLOWS[activeIndex]
+  const activeDepth = DEPTH_CONFIGS[activeWorkflow.id]
+
+  return (
+    <section
+      ref={sectionRef}
+      id='templates'
+      aria-labelledby='templates-heading'
+      className='mt-[40px] mb-[80px]'
+    >
+      <p className='sr-only'>
+        Sim includes {TEMPLATE_WORKFLOWS.length} pre-built workflow templates covering OCR
+        processing, release management, meeting follow-ups, resume scanning, email triage,
+        competitor monitoring, social listening, data enrichment, feedback analysis, code review,
+        and knowledge base Q&amp;A. Each template connects real integrations and LLMs — pick one,
+        customise it, and deploy in minutes.
+      </p>
+
+      <div className='bg-[#1C1C1C]'>
+        <DotGrid
+          className='border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+          cols={120}
+          rows={1}
+          gap={6}
+        />
+
+        <div className='relative overflow-hidden'>
+          <div
+            aria-hidden='true'
+            className='pointer-events-none absolute top-0 right-0 z-20 hidden lg:block'
+          >
+            <svg
+              width={329}
+              height={34}
+              viewBox='-34 0 329 34'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'
+              className='h-auto w-full'
+            >
+              {SCROLL_BLOCK_RECTS.map((r, i) => (
+                <ScrollBlockRect key={i} scrollYProgress={scrollYProgress} rect={r} />
+              ))}
+            </svg>
+          </div>
+
+          <div className='px-[80px] pt-[100px]'>
+            <div className='flex flex-col items-start gap-[20px]'>
+              <Badge
+                variant='blue'
+                size='md'
+                dot
+                className='font-season uppercase tracking-[0.02em] transition-colors duration-200'
+                style={{
+                  color: activeDepth.color,
+                  backgroundColor: hexToRgba(activeDepth.color, 0.1),
+                }}
+              >
+                Templates
+              </Badge>
+
+              <h2
+                id='templates-heading'
+                className='font-[430] font-season text-[40px] text-white leading-[100%] tracking-[-0.02em]'
+              >
+                Ship your agent in minutes
+              </h2>
+
+              <p className='font-[430] font-season text-[#F6F6F0]/50 text-[16px] leading-[125%] tracking-[0.02em]'>
+                Pre-built templates for every use case—pick one, swap <br />
+                models and tools to fit your stack, and deploy.
+              </p>
+            </div>
+          </div>
+
+          <div className='mt-[73px] flex border-[#2A2A2A] border-y'>
+            <DotGrid
+              className='w-[80px] shrink-0 overflow-hidden border-[#2A2A2A] border-r p-[6px]'
+              cols={6}
+              rows={55}
+              gap={6}
+            />
+
+            <div className='flex min-w-0 flex-1'>
+              <div
+                role='tablist'
+                aria-label='Workflow templates'
+                className='flex w-[300px] shrink-0 flex-col border-[#2A2A2A] border-r'
+              >
+                {TEMPLATE_WORKFLOWS.map((workflow, index) => {
+                  const isActive = index === activeIndex
+                  return (
+                    <button
+                      key={workflow.id}
+                      id={`template-tab-${index}`}
+                      type='button'
+                      role='tab'
+                      aria-selected={isActive}
+                      aria-controls={TEMPLATES_PANEL_ID}
+                      onClick={() => setActiveIndex(index)}
+                      className={cn(
+                        'relative text-left',
+                        isActive
+                          ? 'z-10'
+                          : 'flex items-center px-[12px] py-[10px] shadow-[inset_0_-1px_0_0_#2A2A2A] last:shadow-none hover:bg-[#232323]/50'
+                      )}
+                    >
+                      {isActive ? (
+                        (() => {
+                          const depth = DEPTH_CONFIGS[workflow.id]
+                          return (
+                            <>
+                              <div
+                                className='absolute top-[-8px] bottom-0 left-0 w-2'
+                                style={{
+                                  clipPath: LEFT_WALL_CLIP,
+                                  backgroundColor: hexToRgba(depth.color, 0.63),
+                                }}
+                              />
+                              <div
+                                className='absolute right-[-8px] bottom-0 left-2 h-2'
+                                style={buildBottomWallStyle(depth)}
+                              />
+                              <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
+                                <span className='flex-1 font-[430] font-season text-[16px] text-white'>
+                                  {workflow.name}
+                                </span>
+                                <ChevronDown
+                                  className='-rotate-90 h-[11px] w-[11px] shrink-0'
+                                  style={{ color: depth.color }}
+                                />
+                              </div>
+                            </>
+                          )
+                        })()
+                      ) : (
+                        <span className='font-[430] font-season text-[#F6F6F0]/50 text-[16px]'>
+                          {workflow.name}
+                        </span>
+                      )}
+                    </button>
+                  )
+                })}
+              </div>
+
+              <div
+                id={TEMPLATES_PANEL_ID}
+                role='tabpanel'
+                aria-labelledby={`template-tab-${activeIndex}`}
+                className='relative hidden flex-1 lg:block'
+              >
+                <div aria-hidden='true' className='h-full'>
+                  <LandingPreviewWorkflow
+                    key={activeIndex}
+                    workflow={activeWorkflow}
+                    animate
+                    fitViewOptions={{ padding: 0.15, maxZoom: 1.3 }}
+                  />
+                </div>
+                <Link
+                  href='/signup'
+                  className='group/cta absolute top-[16px] right-[16px] z-10 inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#33C482] bg-[#33C482] px-[10px] font-[430] font-season text-[14px] text-black transition-[filter] hover:brightness-110'
+                >
+                  Use template
+                  <span className='relative h-[10px] w-[10px] shrink-0'>
+                    <ChevronDown className='-rotate-90 absolute inset-0 h-[10px] w-[10px] transition-opacity duration-150 group-hover/cta:opacity-0' />
+                    <svg
+                      className='absolute inset-0 h-[10px] w-[10px] opacity-0 transition-opacity duration-150 group-hover/cta:opacity-100'
+                      viewBox='0 0 10 10'
+                      fill='none'
+                      xmlns='http://www.w3.org/2000/svg'
+                    >
+                      <path
+                        d='M1 5H8M5.5 2L8.5 5L5.5 8'
+                        stroke='currentColor'
+                        strokeWidth='1.33'
+                        strokeLinecap='square'
+                        strokeLinejoin='miter'
+                        fill='none'
+                      />
+                    </svg>
+                  </span>
+                </Link>
+              </div>
+            </div>
+
+            <DotGrid
+              className='w-[80px] shrink-0 overflow-hidden border-[#2A2A2A] border-l p-[6px]'
+              cols={6}
+              rows={55}
+              gap={6}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

apps/sim/app/(home)/components/testimonials/testimonials.tsx

@@ -0,0 +1,18 @@
+/**
+ * Testimonials section — social proof via user quotes.
+ *
+ * SEO:
+ * - `<section id="testimonials" aria-labelledby="testimonials-heading">`.
+ * - `<h2 id="testimonials-heading">` for the section title.
+ * - Each testimonial: `<blockquote cite="tweet-url">` with `<footer><cite>Author</cite></footer>`.
+ * - Profile images use `loading="lazy"` (below the fold).
+ *
+ * GEO:
+ * - Keep quote text as plain text in `<blockquote>` — not split across `<span>` elements.
+ * - Include full author name + handle (LLMs weigh attributed quotes higher).
+ * - Testimonials mentioning "Sim" by name carry more citation weight.
+ * - Review data here aligns with `review` entries in structured-data.tsx.
+ */
+export default function Testimonials() {
+  return null
+}

apps/sim/app/(home)/landing.tsx

@@ -0,0 +1,53 @@
+import { martianMono } from '@/app/_styles/fonts/martian-mono/martian-mono'
+import { season } from '@/app/_styles/fonts/season/season'
+import {
+  Collaboration,
+  Enterprise,
+  Features,
+  Footer,
+  Hero,
+  Navbar,
+  Pricing,
+  StructuredData,
+  Templates,
+  Testimonials,
+} from '@/app/(home)/components'
+
+/**
+ * Landing page root component.
+ *
+ * ## SEO Architecture
+ * - Single `<h1>` inside Hero (only one per page).
+ * - Heading hierarchy: H1 (Hero) -> H2 (each section) -> H3 (sub-items).
+ * - Semantic landmarks: `<header>`, `<main>`, `<footer>`.
+ * - Every `<section>` has an `id` for anchor linking and `aria-labelledby` for accessibility.
+ * - `StructuredData` emits JSON-LD before any visible content.
+ *
+ * ## GEO Architecture
+ * - Above-fold content (Navbar, Hero) is statically rendered (Server Components where possible)
+ *   for immediate availability to AI crawlers.
+ * - Section `id` attributes serve as fragment anchors for precise AI citations.
+ * - Content ordering prioritizes answer-first patterns: definition (Hero) ->
+ *   examples (Templates) -> capabilities (Features) -> social proof (Collaboration, Testimonials) ->
+ *   pricing (Pricing) -> enterprise (Enterprise).
+ */
+export default async function Landing() {
+  return (
+    <div className={`${season.variable} ${martianMono.variable} min-h-screen bg-[#1C1C1C]`}>
+      <StructuredData />
+      <header>
+        <Navbar />
+      </header>
+      <main>
+        <Hero />
+        <Templates />
+        <Features />
+        <Collaboration />
+        <Pricing />
+        <Enterprise />
+        <Testimonials />
+      </main>
+      <Footer />
+    </div>
+  )
+}

apps/sim/app/(home)/layout.tsx

@@ -0,0 +1,18 @@
+import { martianMono } from '@/app/_styles/fonts/martian-mono/martian-mono'
+import { season } from '@/app/_styles/fonts/season/season'
+
+/**
+ * Landing page route-group layout.
+ *
+ * Applies landing-specific font CSS variables to the subtree:
+ * - `--font-season` (Season Sans): Headings and display text
+ * - `--font-martian-mono` (Martian Mono): Code snippets and technical accents
+ *
+ * Available to child components via Tailwind (`font-season`, `font-martian-mono`).
+ *
+ * SEO metadata for the `/` route is exported from `app/page.tsx` — not here.
+ * This layout only applies when a `page.tsx` exists inside the `(home)/` route group.
+ */
+export default function HomeLayout({ children }: { children: React.ReactNode }) {
+  return <div className={`${season.variable} ${martianMono.variable}`}>{children}</div>
+}

apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx

@@ -20,7 +20,7 @@ import {
   ENTERPRISE_PLAN_FEATURES,
   PRO_PLAN_FEATURES,
   TEAM_PLAN_FEATURES,
-} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/plan-configs'
+} from '@/app/workspace/[workspaceId]/settings/components/subscription/plan-configs'
 
 const logger = createLogger('LandingPricing')
 

apps/sim/app/(landing)/components/structured-data.tsx

@@ -8,7 +8,7 @@ export default function StructuredData() {
         name: 'Sim',
         alternateName: 'Sim',
         description:
-          'Open-source AI agent workflow builder used by developers at trail-blazing startups to Fortune 500 companies',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.',
         url: 'https://sim.ai',
         logo: {
           '@type': 'ImageObject',
@@ -36,9 +36,9 @@ export default function StructuredData() {
         '@type': 'WebSite',
         '@id': 'https://sim.ai/#website',
         url: 'https://sim.ai',
-        name: 'Sim - AI Agent Workflow Builder',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         description:
-          'Open-source AI agent workflow builder. 70,000+ developers build and deploy agentic workflows. SOC2 and HIPAA compliant.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Join 100,000+ builders.',
         publisher: {
           '@id': 'https://sim.ai/#organization',
         },
@@ -48,7 +48,7 @@ export default function StructuredData() {
         '@type': 'WebPage',
         '@id': 'https://sim.ai/#webpage',
         url: 'https://sim.ai',
-        name: 'Sim - Workflows for LLMs | Build AI Agent Workflows',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         isPartOf: {
           '@id': 'https://sim.ai/#website',
         },
@@ -58,7 +58,7 @@ export default function StructuredData() {
         datePublished: '2024-01-01T00:00:00+00:00',
         dateModified: new Date().toISOString(),
         description:
-          'Build and deploy AI agent workflows with Sim. Visual drag-and-drop interface for creating powerful LLM-powered automations.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs.',
         breadcrumb: {
           '@id': 'https://sim.ai/#breadcrumb',
         },
@@ -85,9 +85,9 @@ export default function StructuredData() {
       {
         '@type': 'SoftwareApplication',
         '@id': 'https://sim.ai/#software',
-        name: 'Sim - AI Agent Workflow Builder',
+        name: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         description:
-          'Open-source AI agent workflow builder used by 70,000+ developers. Build agentic workflows with visual drag-and-drop interface. SOC2 and HIPAA compliant. Integrate with 100+ apps.',
+          'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
         applicationCategory: 'DeveloperApplication',
         applicationSubCategory: 'AI Development Tools',
         operatingSystem: 'Web, Windows, macOS, Linux',
@@ -159,12 +159,13 @@ export default function StructuredData() {
           worstRating: '1',
         },
         featureList: [
-          'Visual workflow builder',
-          'Drag-and-drop interface',
-          '100+ integrations',
-          'AI model support (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
-          'Real-time collaboration',
-          'Version control',
+          'AI agent creation',
+          'Agentic workflow orchestration',
+          '1,000+ integrations',
+          'LLM orchestration (OpenAI, Anthropic, Google, xAI, Mistral, Perplexity)',
+          'Knowledge base creation',
+          'Table creation',
+          'Document creation',
           'API access',
           'Custom functions',
           'Scheduled workflows',
@@ -174,7 +175,7 @@ export default function StructuredData() {
           {
             '@type': 'ImageObject',
             url: 'https://sim.ai/logo/426-240/primary/small.png',
-            caption: 'Sim AI agent workflow builder interface',
+            caption: 'Sim — build AI agents and run your agentic workforce',
           },
         ],
       },
@@ -187,7 +188,7 @@ export default function StructuredData() {
             name: 'What is Sim?',
             acceptedAnswer: {
               '@type': 'Answer',
-              text: 'Sim is an open-source AI agent workflow builder used by 70,000+ developers at trail-blazing startups to Fortune 500 companies. It provides a visual drag-and-drop interface for building and deploying agentic workflows. Sim is SOC2 and HIPAA compliant.',
+              text: 'Sim is the open-source platform to build AI agents and run your agentic workforce. Teams connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Trusted by over 100,000 builders. SOC2 and HIPAA compliant.',
             },
           },
           {
@@ -203,7 +204,7 @@ export default function StructuredData() {
             name: 'Do I need coding skills to use Sim?',
             acceptedAnswer: {
               '@type': 'Answer',
-              text: 'No coding skills are required! Sim features a visual drag-and-drop interface that makes it easy to build AI workflows. However, developers can also use custom functions and our API for advanced use cases.',
+              text: 'No coding skills are required. Sim provides a visual interface for building AI agents and agentic workflows. Developers can also use custom functions, the API, and the CLI/SDK for advanced use cases.',
             },
           },
         ],

apps/sim/app/_shell/providers/theme-provider.tsx

@@ -28,7 +28,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return (
     <NextThemesProvider
       attribute='class'
-      defaultTheme='dark'
+      defaultTheme='system'
       enableSystem
       disableTransitionOnChange
       storageKey='sim-theme'

apps/sim/app/_styles/fonts/martian-mono/martian-mono.ts

@@ -0,0 +1,14 @@
+import { Martian_Mono } from 'next/font/google'
+
+/**
+ * Martian Mono font configuration
+ * Monospaced variable font used for code snippets, technical content, and accent text
+ * on the landing page. Supports weights 100-800.
+ */
+export const martianMono = Martian_Mono({
+  subsets: ['latin'],
+  display: 'swap',
+  variable: '--font-martian-mono',
+  weight: 'variable',
+  fallback: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
+})

apps/sim/app/_styles/globals.css

@@ -10,7 +10,7 @@
  * @see stores/constants.ts for the source of truth
  */
 :root {
-  --sidebar-width: 232px; /* SIDEBAR_WIDTH.DEFAULT */
+  --sidebar-width: 248px; /* SIDEBAR_WIDTH.DEFAULT */
   --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */
   --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
@@ -86,23 +86,24 @@
   :root,
   .light {
     --bg: #fefefe; /* main canvas - neutral near-white */
-    --surface-1: #fefefe; /* sidebar, panels */
+    --surface-1: #f9f9f9; /* sidebar, panels */
     --surface-2: #ffffff; /* blocks, cards, modals - pure white */
     --surface-3: #f7f7f7; /* popovers, headers */
     --surface-4: #f5f5f5; /* buttons base */
     --border: #e0e0e0; /* primary border */
     --surface-5: #f3f3f3; /* inputs, form elements */
     --border-1: #e0e0e0; /* stronger border */
-    --surface-6: #f0f0f0; /* popovers, elevated surfaces */
-    --surface-7: #ececec;
+    --surface-6: #e5e5e5; /* popovers, elevated surfaces */
+    --surface-7: #d9d9d9;
+    --surface-active: #eeeeee; /* hover/active state */
 
     --workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */
 
     /* Text - neutral */
-    --text-primary: #2d2d2d;
-    --text-secondary: #404040;
+    --text-primary: #1a1a1a;
+    --text-secondary: #525252;
     --text-tertiary: #5c5c5c;
-    --text-muted: #737373;
+    --text-muted: #707070;
     --text-subtle: #8c8c8c;
     --text-inverse: #ffffff;
     --text-muted-inverse: #a0a0a0;
@@ -125,7 +126,7 @@
 
     /* Font weights - lighter for light mode */
     --font-weight-base: 430;
-    --font-weight-medium: 450;
+    --font-weight-medium: 440;
     --font-weight-semibold: 500;
 
     /* Extended palette */
@@ -211,7 +212,8 @@
     --surface-5: #363636;
     --border-1: #3d3d3d;
     --surface-6: #454545;
-    --surface-7: #454545;
+    --surface-7: #505050;
+    --surface-active: #303030; /* hover/active state */
 
     --workflow-edge: #454545; /* workflow handles/edges - same as surface-6 in dark */
 
@@ -241,7 +243,7 @@
     --white: #ffffff;
 
     /* Font weights - standard weights for dark mode */
-    --font-weight-base: 440;
+    --font-weight-base: 450;
     --font-weight-medium: 480;
     --font-weight-semibold: 550;
 

apps/sim/app/api/billing/update-cost/route.ts

@@ -18,7 +18,9 @@ const UpdateCostSchema = z.object({
   model: z.string().min(1, 'Model is required'),
   inputTokens: z.number().min(0).default(0),
   outputTokens: z.number().min(0).default(0),
-  source: z.enum(['copilot', 'mcp_copilot']).default('copilot'),
+  source: z
+    .enum(['copilot', 'workspace-chat', 'mcp_copilot', 'mothership_block'])
+    .default('copilot'),
 })
 
 /**
@@ -76,6 +78,7 @@ export async function POST(req: NextRequest) {
     }
 
     const { userId, cost, model, inputTokens, outputTokens, source } = validation.data
+    const isCopilot = source === 'copilot' || source === 'mcp_copilot'
     const isMcp = source === 'mcp_copilot'
 
     logger.info(`[${requestId}] Processing cost update`, {
@@ -98,19 +101,25 @@ export async function POST(req: NextRequest) {
       return NextResponse.json({ error: 'User stats record not found' }, { status: 500 })
     }
 
+    const totalTokens = inputTokens + outputTokens
+
     const updateFields: Record<string, unknown> = {
       totalCost: sql`total_cost + ${cost}`,
       currentPeriodCost: sql`current_period_cost + ${cost}`,
-      totalCopilotCost: sql`total_copilot_cost + ${cost}`,
-      currentPeriodCopilotCost: sql`current_period_copilot_cost + ${cost}`,
-      totalCopilotCalls: sql`total_copilot_calls + 1`,
       lastActive: new Date(),
     }
 
-    // Also increment MCP-specific counters when source is mcp_copilot
+    if (isCopilot) {
+      updateFields.totalCopilotCost = sql`total_copilot_cost + ${cost}`
+      updateFields.currentPeriodCopilotCost = sql`current_period_copilot_cost + ${cost}`
+      updateFields.totalCopilotCalls = sql`total_copilot_calls + 1`
+      updateFields.totalCopilotTokens = sql`total_copilot_tokens + ${totalTokens}`
+    }
+
     if (isMcp) {
       updateFields.totalMcpCopilotCost = sql`total_mcp_copilot_cost + ${cost}`
       updateFields.currentPeriodMcpCopilotCost = sql`current_period_mcp_copilot_cost + ${cost}`
+      updateFields.totalMcpCopilotCalls = sql`total_mcp_copilot_calls + 1`
     }
 
     await db.update(userStats).set(updateFields).where(eq(userStats.userId, userId))
@@ -121,10 +130,10 @@ export async function POST(req: NextRequest) {
       source,
     })
 
-    // Log usage for complete audit trail
+    // Log usage for complete audit trail with the original source for visibility
     await logModelUsage({
       userId,
-      source: isMcp ? 'mcp_copilot' : 'copilot',
+      source,
       model,
       inputTokens,
       outputTokens,

apps/sim/app/api/copilot/auto-allowed-tools/route.ts

@@ -1,12 +1,22 @@
-import { db } from '@sim/db'
-import { settings } from '@sim/db/schema'
 import { createLogger } from '@sim/logger'
-import { eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
+import { SIM_AGENT_API_URL } from '@/lib/copilot/constants'
+import { env } from '@/lib/core/config/env'
 
 const logger = createLogger('CopilotAutoAllowedToolsAPI')
 
+/** Headers for server-to-server calls to the Go copilot backend. */
+function copilotHeaders(): Record<string, string> {
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  }
+  if (env.COPILOT_API_KEY) {
+    headers['x-api-key'] = env.COPILOT_API_KEY
+  }
+  return headers
+}
+
 /**
  * GET - Fetch user's auto-allowed integration tools
  */
@@ -20,24 +30,18 @@ export async function GET() {
 
     const userId = session.user.id
 
-    const [userSettings] = await db
-      .select()
-      .from(settings)
-      .where(eq(settings.userId, userId))
-      .limit(1)
+    const res = await fetch(
+      `${SIM_AGENT_API_URL}/api/tool-preferences/auto-allowed?userId=${encodeURIComponent(userId)}`,
+      { method: 'GET', headers: copilotHeaders() }
+    )
 
-    if (userSettings) {
-      const autoAllowedTools = (userSettings.copilotAutoAllowedTools as string[]) || []
-      return NextResponse.json({ autoAllowedTools })
+    if (!res.ok) {
+      logger.warn('Go backend returned error for list auto-allowed', { status: res.status })
+      return NextResponse.json({ autoAllowedTools: [] })
     }
 
-    await db.insert(settings).values({
-      id: userId,
-      userId,
-      copilotAutoAllowedTools: [],
-    })
-
-    return NextResponse.json({ autoAllowedTools: [] })
+    const payload = await res.json()
+    return NextResponse.json({ autoAllowedTools: payload?.autoAllowedTools || [] })
   } catch (error) {
     logger.error('Failed to fetch auto-allowed tools', { error })
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
@@ -62,38 +66,22 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: 'toolId must be a string' }, { status: 400 })
     }
 
-    const toolId = body.toolId
-
-    const [existing] = await db.select().from(settings).where(eq(settings.userId, userId)).limit(1)
-
-    if (existing) {
-      const currentTools = (existing.copilotAutoAllowedTools as string[]) || []
-
-      if (!currentTools.includes(toolId)) {
-        const updatedTools = [...currentTools, toolId]
-        await db
-          .update(settings)
-          .set({
-            copilotAutoAllowedTools: updatedTools,
-            updatedAt: new Date(),
-          })
-          .where(eq(settings.userId, userId))
-
-        logger.info('Added tool to auto-allowed list', { userId, toolId })
-        return NextResponse.json({ success: true, autoAllowedTools: updatedTools })
-      }
-
-      return NextResponse.json({ success: true, autoAllowedTools: currentTools })
-    }
-
-    await db.insert(settings).values({
-      id: userId,
-      userId,
-      copilotAutoAllowedTools: [toolId],
+    const res = await fetch(`${SIM_AGENT_API_URL}/api/tool-preferences/auto-allowed`, {
+      method: 'POST',
+      headers: copilotHeaders(),
+      body: JSON.stringify({ userId, toolId: body.toolId }),
     })
 
-    logger.info('Created settings and added tool to auto-allowed list', { userId, toolId })
-    return NextResponse.json({ success: true, autoAllowedTools: [toolId] })
+    if (!res.ok) {
+      logger.warn('Go backend returned error for add auto-allowed', { status: res.status })
+      return NextResponse.json({ error: 'Failed to add tool' }, { status: 500 })
+    }
+
+    const payload = await res.json()
+    return NextResponse.json({
+      success: true,
+      autoAllowedTools: payload?.autoAllowedTools || [],
+    })
   } catch (error) {
     logger.error('Failed to add auto-allowed tool', { error })
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
@@ -119,25 +107,21 @@ export async function DELETE(request: NextRequest) {
       return NextResponse.json({ error: 'toolId query parameter is required' }, { status: 400 })
     }
 
-    const [existing] = await db.select().from(settings).where(eq(settings.userId, userId)).limit(1)
+    const res = await fetch(
+      `${SIM_AGENT_API_URL}/api/tool-preferences/auto-allowed?userId=${encodeURIComponent(userId)}&toolId=${encodeURIComponent(toolId)}`,
+      { method: 'DELETE', headers: copilotHeaders() }
+    )
 
-    if (existing) {
-      const currentTools = (existing.copilotAutoAllowedTools as string[]) || []
-      const updatedTools = currentTools.filter((t) => t !== toolId)
-
-      await db
-        .update(settings)
-        .set({
-          copilotAutoAllowedTools: updatedTools,
-          updatedAt: new Date(),
-        })
-        .where(eq(settings.userId, userId))
-
-      logger.info('Removed tool from auto-allowed list', { userId, toolId })
-      return NextResponse.json({ success: true, autoAllowedTools: updatedTools })
+    if (!res.ok) {
+      logger.warn('Go backend returned error for remove auto-allowed', { status: res.status })
+      return NextResponse.json({ error: 'Failed to remove tool' }, { status: 500 })
     }
 
-    return NextResponse.json({ success: true, autoAllowedTools: [] })
+    const payload = await res.json()
+    return NextResponse.json({
+      success: true,
+      autoAllowedTools: payload?.autoAllowedTools || [],
+    })
   } catch (error) {
     logger.error('Failed to remove auto-allowed tool', { error })
     return NextResponse.json({ error: 'Internal server error' }, { status: 500 })

apps/sim/app/api/copilot/chat/route.ts

@@ -5,17 +5,15 @@ import { and, desc, eq } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
 import { getSession } from '@/lib/auth'
-import { buildConversationHistory } from '@/lib/copilot/chat-context'
 import { resolveOrCreateChat } from '@/lib/copilot/chat-lifecycle'
 import { buildCopilotRequestPayload } from '@/lib/copilot/chat-payload'
-import { SIM_AGENT_API_URL } from '@/lib/copilot/constants'
+import {
+  createSSEStream,
+  requestChatTitle,
+  SSE_RESPONSE_HEADERS,
+} from '@/lib/copilot/chat-streaming'
 import { COPILOT_REQUEST_MODES } from '@/lib/copilot/models'
 import { orchestrateCopilotStream } from '@/lib/copilot/orchestrator'
-import {
-  createStreamEventWriter,
-  resetStreamBuffer,
-  setStreamMeta,
-} from '@/lib/copilot/orchestrator/stream-buffer'
 import {
   authenticateCopilotRequestSessionOnly,
   createBadRequestResponse,
@@ -23,54 +21,11 @@ import {
   createRequestTracker,
   createUnauthorizedResponse,
 } from '@/lib/copilot/request-helpers'
-import { env } from '@/lib/core/config/env'
 import { resolveWorkflowIdForUser } from '@/lib/workflows/utils'
+import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
 
 const logger = createLogger('CopilotChatAPI')
 
-async function requestChatTitleFromCopilot(params: {
-  message: string
-  model: string
-  provider?: string
-}): Promise<string | null> {
-  const { message, model, provider } = params
-  if (!message || !model) return null
-
-  const headers: Record<string, string> = {
-    'Content-Type': 'application/json',
-  }
-  if (env.COPILOT_API_KEY) {
-    headers['x-api-key'] = env.COPILOT_API_KEY
-  }
-
-  try {
-    const response = await fetch(`${SIM_AGENT_API_URL}/api/generate-chat-title`, {
-      method: 'POST',
-      headers,
-      body: JSON.stringify({
-        message,
-        model,
-        ...(provider ? { provider } : {}),
-      }),
-    })
-
-    const payload = await response.json().catch(() => ({}))
-    if (!response.ok) {
-      logger.warn('Failed to generate chat title via copilot backend', {
-        status: response.status,
-        error: payload,
-      })
-      return null
-    }
-
-    const title = typeof payload?.title === 'string' ? payload.title.trim() : ''
-    return title || null
-  } catch (error) {
-    logger.error('Error generating chat title:', error)
-    return null
-  }
-}
-
 const FileAttachmentSchema = z.object({
   id: z.string(),
   key: z.string(),
@@ -81,9 +36,10 @@ const FileAttachmentSchema = z.object({
 
 const ChatMessageSchema = z.object({
   message: z.string().min(1, 'Message is required'),
-  userMessageId: z.string().optional(), // ID from frontend for the user message
+  userMessageId: z.string().optional(),
   chatId: z.string().optional(),
   workflowId: z.string().optional(),
+  workspaceId: z.string().optional(),
   workflowName: z.string().optional(),
   model: z.string().optional().default('claude-opus-4-5'),
   mode: z.enum(COPILOT_REQUEST_MODES).optional().default('agent'),
@@ -93,7 +49,6 @@ const ChatMessageSchema = z.object({
   implicitFeedback: z.string().optional(),
   fileAttachments: z.array(FileAttachmentSchema).optional(),
   provider: z.string().optional(),
-  conversationId: z.string().optional(),
   contexts: z
     .array(
       z.object({
@@ -116,7 +71,6 @@ const ChatMessageSchema = z.object({
         blockIds: z.array(z.string()).optional(),
         templateId: z.string().optional(),
         executionId: z.string().optional(),
-        // For workflow_block, provide both workflowId and blockId
       })
     )
     .optional(),
@@ -155,7 +109,6 @@ export async function POST(req: NextRequest) {
       implicitFeedback,
       fileAttachments,
       provider,
-      conversationId,
       contexts,
       commands,
     } = ChatMessageSchema.parse(body)
@@ -174,7 +127,7 @@ export async function POST(req: NextRequest) {
         })
       : contexts
 
-    // Resolve workflowId - if not provided, use first workflow or find by name
+    // Copilot route always requires a workflow scope
     const resolved = await resolveWorkflowIdForUser(
       authenticatedUserId,
       providedWorkflowId,
@@ -186,11 +139,22 @@ export async function POST(req: NextRequest) {
       )
     }
     const workflowId = resolved.workflowId
+    const workflowResolvedName = resolved.workflowName
+
+    // Resolve workspace from workflow so it can be sent as implicit context to the Go backend.
+    let resolvedWorkspaceId: string | undefined
+    try {
+      const { getWorkflowById } = await import('@/lib/workflows/utils')
+      const wf = await getWorkflowById(workflowId)
+      resolvedWorkspaceId = wf?.workspaceId ?? undefined
+    } catch {
+      logger.warn(`[${tracker.requestId}] Failed to resolve workspaceId from workflow`)
+    }
 
-    // Ensure we have a consistent user message ID for this request
     const userMessageIdToUse = userMessageId || crypto.randomUUID()
     try {
       logger.info(`[${tracker.requestId}] Received chat POST`, {
+        workflowId,
         hasContexts: Array.isArray(normalizedContexts),
         contextsCount: Array.isArray(normalizedContexts) ? normalizedContexts.length : 0,
         contextsPreview: Array.isArray(normalizedContexts)
@@ -204,7 +168,7 @@ export async function POST(req: NextRequest) {
           : undefined,
       })
     } catch {}
-    // Preprocess contexts server-side
+
     let agentContexts: Array<{ type: string; content: string }> = []
     if (Array.isArray(normalizedContexts) && normalizedContexts.length > 0) {
       try {
@@ -234,7 +198,6 @@ export async function POST(req: NextRequest) {
       }
     }
 
-    // Handle chat context
     let currentChat: any = null
     let conversationHistory: any[] = []
     let actualChatId = chatId
@@ -249,27 +212,30 @@ export async function POST(req: NextRequest) {
       })
       currentChat = chatResult.chat
       actualChatId = chatResult.chatId || chatId
-      const history = buildConversationHistory(
-        chatResult.conversationHistory,
-        (chatResult.chat?.conversationId as string | undefined) || conversationId
-      )
-      conversationHistory = history.history
+      conversationHistory = Array.isArray(chatResult.conversationHistory)
+        ? chatResult.conversationHistory
+        : []
     }
 
     const effectiveMode = mode === 'agent' ? 'build' : mode
-    const effectiveConversationId =
-      (currentChat?.conversationId as string | undefined) || conversationId
+
+    const userPermission = resolvedWorkspaceId
+      ? await getUserEntityPermissions(authenticatedUserId, 'workspace', resolvedWorkspaceId).catch(
+          () => null
+        )
+      : null
 
     const requestPayload = await buildCopilotRequestPayload(
       {
         message,
-        workflowId,
+        workflowId: workflowId || '',
+        workflowName: workflowResolvedName,
+        workspaceId: resolvedWorkspaceId,
         userId: authenticatedUserId,
         userMessageId: userMessageIdToUse,
         mode,
         model: selectedModel,
         provider,
-        conversationId: effectiveConversationId,
         conversationHistory,
         contexts: agentContexts,
         fileAttachments,
@@ -277,6 +243,7 @@ export async function POST(req: NextRequest) {
         chatId: actualChatId,
         prefetch,
         implicitFeedback,
+        userPermission: userPermission ?? undefined,
       },
       {
         selectedModel,
@@ -287,7 +254,6 @@ export async function POST(req: NextRequest) {
       logger.info(`[${tracker.requestId}] About to call Sim Agent`, {
         hasContext: agentContexts.length > 0,
         contextCount: agentContexts.length,
-        hasConversationId: !!effectiveConversationId,
         hasFileAttachments: Array.isArray(requestPayload.fileAttachments),
         messageLength: message.length,
         mode: effectiveMode,
@@ -302,138 +268,35 @@ export async function POST(req: NextRequest) {
     } catch {}
 
     if (stream) {
-      const streamId = userMessageIdToUse
-      let eventWriter: ReturnType<typeof createStreamEventWriter> | null = null
-      let clientDisconnected = false
-      const transformedStream = new ReadableStream({
-        async start(controller) {
-          const encoder = new TextEncoder()
-
-          await resetStreamBuffer(streamId)
-          await setStreamMeta(streamId, { status: 'active', userId: authenticatedUserId })
-          eventWriter = createStreamEventWriter(streamId)
-
-          const shouldFlushEvent = (event: Record<string, any>) =>
-            event.type === 'tool_call' ||
-            event.type === 'tool_result' ||
-            event.type === 'tool_error' ||
-            event.type === 'subagent_end' ||
-            event.type === 'structured_result' ||
-            event.type === 'subagent_result' ||
-            event.type === 'done' ||
-            event.type === 'error'
-
-          const pushEvent = async (event: Record<string, any>) => {
-            if (!eventWriter) return
-            const entry = await eventWriter.write(event)
-            if (shouldFlushEvent(event)) {
-              await eventWriter.flush()
-            }
-            const payload = {
-              ...event,
-              eventId: entry.eventId,
-              streamId,
-            }
-            try {
-              if (!clientDisconnected) {
-                controller.enqueue(encoder.encode(`data: ${JSON.stringify(payload)}\n\n`))
-              }
-            } catch {
-              clientDisconnected = true
-              await eventWriter.flush()
-            }
-          }
-
-          if (actualChatId) {
-            await pushEvent({ type: 'chat_id', chatId: actualChatId })
-          }
-
-          if (actualChatId && !currentChat?.title && conversationHistory.length === 0) {
-            requestChatTitleFromCopilot({ message, model: selectedModel, provider })
-              .then(async (title) => {
-                if (title) {
-                  await db
-                    .update(copilotChats)
-                    .set({
-                      title,
-                      updatedAt: new Date(),
-                    })
-                    .where(eq(copilotChats.id, actualChatId!))
-                  await pushEvent({ type: 'title_updated', title })
-                }
-              })
-              .catch((error) => {
-                logger.error(`[${tracker.requestId}] Title generation failed:`, error)
-              })
-          }
-
-          try {
-            const result = await orchestrateCopilotStream(requestPayload, {
-              userId: authenticatedUserId,
-              workflowId,
-              chatId: actualChatId,
-              autoExecuteTools: true,
-              interactive: true,
-              onEvent: async (event) => {
-                await pushEvent(event)
-              },
-            })
-
-            if (currentChat && result.conversationId) {
-              await db
-                .update(copilotChats)
-                .set({
-                  updatedAt: new Date(),
-                  conversationId: result.conversationId,
-                })
-                .where(eq(copilotChats.id, actualChatId!))
-            }
-            await eventWriter.close()
-            await setStreamMeta(streamId, { status: 'complete', userId: authenticatedUserId })
-          } catch (error) {
-            logger.error(`[${tracker.requestId}] Orchestration error:`, error)
-            await eventWriter.close()
-            await setStreamMeta(streamId, {
-              status: 'error',
-              userId: authenticatedUserId,
-              error: error instanceof Error ? error.message : 'Stream error',
-            })
-            await pushEvent({
-              type: 'error',
-              data: {
-                displayMessage: 'An unexpected error occurred while processing the response.',
-              },
-            })
-          } finally {
-            try {
-              controller.close()
-            } catch {
-              // controller may already be closed by cancel()
-            }
-          }
-        },
-        async cancel() {
-          clientDisconnected = true
-          if (eventWriter) {
-            await eventWriter.close().catch(() => {})
-          }
+      const sseStream = createSSEStream({
+        requestPayload,
+        userId: authenticatedUserId,
+        streamId: userMessageIdToUse,
+        chatId: actualChatId,
+        currentChat,
+        conversationHistory,
+        message,
+        titleModel: selectedModel,
+        titleProvider: provider,
+        requestId: tracker.requestId,
+        orchestrateOptions: {
+          userId: authenticatedUserId,
+          workflowId,
+          chatId: actualChatId,
+          goRoute: '/api/copilot',
+          autoExecuteTools: true,
+          interactive: true,
         },
       })
 
-      return new Response(transformedStream, {
-        headers: {
-          'Content-Type': 'text/event-stream',
-          'Cache-Control': 'no-cache',
-          Connection: 'keep-alive',
-          'X-Accel-Buffering': 'no',
-        },
-      })
+      return new Response(sseStream, { headers: SSE_RESPONSE_HEADERS })
     }
 
     const nonStreamingResult = await orchestrateCopilotStream(requestPayload, {
       userId: authenticatedUserId,
       workflowId,
       chatId: actualChatId,
+      goRoute: '/api/copilot',
       autoExecuteTools: true,
       interactive: true,
     })
@@ -485,7 +348,7 @@ export async function POST(req: NextRequest) {
       // Start title generation in parallel if this is first message (non-streaming)
       if (actualChatId && !currentChat.title && conversationHistory.length === 0) {
         logger.info(`[${tracker.requestId}] Starting title generation for non-streaming response`)
-        requestChatTitleFromCopilot({ message, model: selectedModel, provider })
+        requestChatTitle({ message, model: selectedModel, provider })
           .then(async (title) => {
             if (title) {
               await db
@@ -509,9 +372,6 @@ export async function POST(req: NextRequest) {
         .set({
           messages: updatedMessages,
           updatedAt: new Date(),
-          ...(nonStreamingResult.conversationId
-            ? { conversationId: nonStreamingResult.conversationId }
-            : {}),
         })
         .where(eq(copilotChats.id, actualChatId!))
     }
@@ -563,16 +423,15 @@ export async function GET(req: NextRequest) {
   try {
     const { searchParams } = new URL(req.url)
     const workflowId = searchParams.get('workflowId')
+    const workspaceId = searchParams.get('workspaceId')
     const chatId = searchParams.get('chatId')
 
-    // Get authenticated user using consolidated helper
     const { userId: authenticatedUserId, isAuthenticated } =
       await authenticateCopilotRequestSessionOnly()
     if (!isAuthenticated || !authenticatedUserId) {
       return createUnauthorizedResponse()
     }
 
-    // If chatId is provided, fetch a single chat
     if (chatId) {
       const [chat] = await db
         .select({
@@ -582,6 +441,7 @@ export async function GET(req: NextRequest) {
           messages: copilotChats.messages,
           planArtifact: copilotChats.planArtifact,
           config: copilotChats.config,
+          conversationId: copilotChats.conversationId,
           createdAt: copilotChats.createdAt,
           updatedAt: copilotChats.updatedAt,
         })
@@ -601,6 +461,7 @@ export async function GET(req: NextRequest) {
         messageCount: Array.isArray(chat.messages) ? chat.messages.length : 0,
         planArtifact: chat.planArtifact || null,
         config: chat.config || null,
+        conversationId: chat.conversationId || null,
         createdAt: chat.createdAt,
         updatedAt: chat.updatedAt,
       }
@@ -609,11 +470,14 @@ export async function GET(req: NextRequest) {
       return NextResponse.json({ success: true, chat: transformedChat })
     }
 
-    if (!workflowId) {
-      return createBadRequestResponse('workflowId or chatId is required')
+    if (!workflowId && !workspaceId) {
+      return createBadRequestResponse('workflowId, workspaceId, or chatId is required')
     }
 
-    // Fetch chats for this user and workflow
+    const scopeFilter = workflowId
+      ? eq(copilotChats.workflowId, workflowId)
+      : eq(copilotChats.workspaceId, workspaceId!)
+
     const chats = await db
       .select({
         id: copilotChats.id,
@@ -626,12 +490,9 @@ export async function GET(req: NextRequest) {
         updatedAt: copilotChats.updatedAt,
       })
       .from(copilotChats)
-      .where(
-        and(eq(copilotChats.userId, authenticatedUserId), eq(copilotChats.workflowId, workflowId))
-      )
+      .where(and(eq(copilotChats.userId, authenticatedUserId), scopeFilter))
       .orderBy(desc(copilotChats.updatedAt))
 
-    // Transform the data to include message count
     const transformedChats = chats.map((chat) => ({
       id: chat.id,
       title: chat.title,
@@ -644,7 +505,8 @@ export async function GET(req: NextRequest) {
       updatedAt: chat.updatedAt,
     }))
 
-    logger.info(`Retrieved ${transformedChats.length} chats for workflow ${workflowId}`)
+    const scope = workflowId ? `workflow ${workflowId}` : `workspace ${workspaceId}`
+    logger.info(`Retrieved ${transformedChats.length} chats for ${scope}`)
 
     return NextResponse.json({
       success: true,

apps/sim/app/api/copilot/chat/stream/route.ts

@@ -4,7 +4,7 @@ import {
   getStreamMeta,
   readStreamEvents,
   type StreamMeta,
-} from '@/lib/copilot/orchestrator/stream-buffer'
+} from '@/lib/copilot/orchestrator/stream/buffer'
 import { authenticateCopilotRequestSessionOnly } from '@/lib/copilot/request-helpers'
 import { SSE_HEADERS } from '@/lib/core/utils/sse'
 

apps/sim/app/api/copilot/confirm/route.ts

@@ -20,7 +20,8 @@ const ConfirmationSchema = z.object({
   status: z.enum(['success', 'error', 'accepted', 'rejected', 'background'] as const, {
     errorMap: () => ({ message: 'Invalid notification status' }),
   }),
-  message: z.string().optional(), // Optional message for background moves or additional context
+  message: z.string().optional(),
+  data: z.record(z.unknown()).optional(),
 })
 
 /**
@@ -30,7 +31,8 @@ const ConfirmationSchema = z.object({
 async function updateToolCallStatus(
   toolCallId: string,
   status: NotificationStatus,
-  message?: string
+  message?: string,
+  data?: Record<string, unknown>
 ): Promise<boolean> {
   const redis = getRedisClient()
   if (!redis) {
@@ -40,11 +42,14 @@ async function updateToolCallStatus(
 
   try {
     const key = `${REDIS_TOOL_CALL_PREFIX}${toolCallId}`
-    const payload = {
+    const payload: Record<string, unknown> = {
       status,
       message: message || null,
       timestamp: new Date().toISOString(),
     }
+    if (data) {
+      payload.data = data
+    }
     await redis.set(key, JSON.stringify(payload), 'EX', REDIS_TOOL_CALL_TTL_SECONDS)
     return true
   } catch (error) {
@@ -74,10 +79,10 @@ export async function POST(req: NextRequest) {
     }
 
     const body = await req.json()
-    const { toolCallId, status, message } = ConfirmationSchema.parse(body)
+    const { toolCallId, status, message, data } = ConfirmationSchema.parse(body)
 
     // Update the tool call status in Redis
-    const updated = await updateToolCallStatus(toolCallId, status, message)
+    const updated = await updateToolCallStatus(toolCallId, status, message, data)
 
     if (!updated) {
       logger.error(`[${tracker.requestId}] Failed to update tool call status`, {

apps/sim/app/api/mcp/copilot/route.ts

@@ -18,11 +18,7 @@ import { eq, sql } from 'drizzle-orm'
 import { type NextRequest, NextResponse } from 'next/server'
 import { validateOAuthAccessToken } from '@/lib/auth/oauth-token'
 import { getHighestPrioritySubscription } from '@/lib/billing/core/subscription'
-import {
-  ORCHESTRATION_TIMEOUT_MS,
-  SIM_AGENT_API_URL,
-  SIM_AGENT_VERSION,
-} from '@/lib/copilot/constants'
+import { ORCHESTRATION_TIMEOUT_MS, SIM_AGENT_API_URL } from '@/lib/copilot/constants'
 import { orchestrateCopilotStream } from '@/lib/copilot/orchestrator'
 import { orchestrateSubagentStream } from '@/lib/copilot/orchestrator/subagent'
 import {
@@ -724,16 +720,14 @@ async function handleBuildToolCall(
       mode: 'agent',
       commands: ['fast'],
       messageId: randomUUID(),
-      version: SIM_AGENT_VERSION,
-      headless: true,
       chatId,
-      source: 'mcp',
     }
 
     const result = await orchestrateCopilotStream(requestPayload, {
       userId,
       workflowId: resolved.workflowId,
       chatId,
+      goRoute: '/api/mcp',
       autoExecuteTools: true,
       timeout: 300000,
       interactive: false,

apps/sim/app/api/mothership/chat/route.ts

@@ -0,0 +1,229 @@
+import { db } from '@sim/db'
+import { copilotChats } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { getSession } from '@/lib/auth'
+import { resolveOrCreateChat } from '@/lib/copilot/chat-lifecycle'
+import { buildCopilotRequestPayload } from '@/lib/copilot/chat-payload'
+import { createSSEStream, SSE_RESPONSE_HEADERS } from '@/lib/copilot/chat-streaming'
+import type { OrchestratorResult } from '@/lib/copilot/orchestrator/types'
+import { createRequestTracker, createUnauthorizedResponse } from '@/lib/copilot/request-helpers'
+import { generateWorkspaceContext } from '@/lib/copilot/workspace-context'
+import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
+
+const logger = createLogger('MothershipChatAPI')
+
+const FileAttachmentSchema = z.object({
+  id: z.string(),
+  key: z.string(),
+  filename: z.string(),
+  media_type: z.string(),
+  size: z.number(),
+})
+
+const MothershipMessageSchema = z.object({
+  message: z.string().min(1, 'Message is required'),
+  workspaceId: z.string().min(1, 'workspaceId is required'),
+  userMessageId: z.string().optional(),
+  chatId: z.string().optional(),
+  createNewChat: z.boolean().optional().default(false),
+  fileAttachments: z.array(FileAttachmentSchema).optional(),
+  contexts: z
+    .array(
+      z.object({
+        kind: z.enum([
+          'past_chat',
+          'workflow',
+          'current_workflow',
+          'blocks',
+          'logs',
+          'workflow_block',
+          'knowledge',
+          'templates',
+          'docs',
+        ]),
+        label: z.string(),
+        chatId: z.string().optional(),
+        workflowId: z.string().optional(),
+        knowledgeId: z.string().optional(),
+        blockId: z.string().optional(),
+        blockIds: z.array(z.string()).optional(),
+        templateId: z.string().optional(),
+        executionId: z.string().optional(),
+      })
+    )
+    .optional(),
+})
+
+/**
+ * POST /api/mothership/chat
+ * Workspace-scoped chat — no workflowId, proxies to Go /api/mothership.
+ */
+export async function POST(req: NextRequest) {
+  const tracker = createRequestTracker()
+
+  try {
+    const session = await getSession()
+    if (!session?.user?.id) {
+      return createUnauthorizedResponse()
+    }
+
+    const authenticatedUserId = session.user.id
+    const body = await req.json()
+    const {
+      message,
+      workspaceId,
+      userMessageId: providedMessageId,
+      chatId,
+      createNewChat,
+      fileAttachments,
+      contexts,
+    } = MothershipMessageSchema.parse(body)
+
+    const userMessageId = providedMessageId || crypto.randomUUID()
+
+    let agentContexts: Array<{ type: string; content: string }> = []
+    if (Array.isArray(contexts) && contexts.length > 0) {
+      try {
+        const { processContextsServer } = await import('@/lib/copilot/process-contents')
+        agentContexts = await processContextsServer(contexts as any, authenticatedUserId, message)
+      } catch (e) {
+        logger.error(`[${tracker.requestId}] Failed to process contexts`, e)
+      }
+    }
+
+    let currentChat: any = null
+    let conversationHistory: any[] = []
+    let actualChatId = chatId
+
+    if (chatId || createNewChat) {
+      const chatResult = await resolveOrCreateChat({
+        chatId,
+        userId: authenticatedUserId,
+        workspaceId,
+        model: 'claude-opus-4-5',
+        type: 'mothership',
+      })
+      currentChat = chatResult.chat
+      actualChatId = chatResult.chatId || chatId
+      conversationHistory = Array.isArray(chatResult.conversationHistory)
+        ? chatResult.conversationHistory
+        : []
+    }
+
+    if (actualChatId) {
+      const userMsg = {
+        id: userMessageId,
+        role: 'user' as const,
+        content: message,
+        timestamp: new Date().toISOString(),
+      }
+
+      await db
+        .update(copilotChats)
+        .set({
+          messages: [...conversationHistory, userMsg],
+          conversationId: userMessageId,
+          updatedAt: new Date(),
+        })
+        .where(eq(copilotChats.id, actualChatId))
+    }
+
+    const [workspaceContext, userPermission] = await Promise.all([
+      generateWorkspaceContext(workspaceId, authenticatedUserId),
+      getUserEntityPermissions(authenticatedUserId, 'workspace', workspaceId).catch(() => null),
+    ])
+
+    const requestPayload = await buildCopilotRequestPayload(
+      {
+        message,
+        workspaceId,
+        userId: authenticatedUserId,
+        userMessageId,
+        mode: 'agent',
+        model: '',
+        conversationHistory,
+        contexts: agentContexts,
+        fileAttachments,
+        chatId: actualChatId,
+        userPermission: userPermission ?? undefined,
+        workspaceContext,
+      },
+      { selectedModel: '' }
+    )
+
+    const stream = createSSEStream({
+      requestPayload,
+      userId: authenticatedUserId,
+      streamId: userMessageId,
+      chatId: actualChatId,
+      currentChat,
+      conversationHistory,
+      message,
+      titleModel: 'claude-opus-4-5',
+      requestId: tracker.requestId,
+      orchestrateOptions: {
+        userId: authenticatedUserId,
+        workspaceId,
+        chatId: actualChatId,
+        goRoute: '/api/mothership',
+        autoExecuteTools: true,
+        interactive: false,
+        onComplete: async (result: OrchestratorResult) => {
+          if (!actualChatId) return
+
+          const userMessage = {
+            id: userMessageId,
+            role: 'user' as const,
+            content: message,
+            timestamp: new Date().toISOString(),
+          }
+
+          const assistantMessage = {
+            id: crypto.randomUUID(),
+            role: 'assistant' as const,
+            content: result.content,
+            timestamp: new Date().toISOString(),
+          }
+
+          const updatedMessages = [...conversationHistory, userMessage, assistantMessage]
+
+          try {
+            await db
+              .update(copilotChats)
+              .set({
+                messages: updatedMessages,
+                conversationId: null,
+              })
+              .where(eq(copilotChats.id, actualChatId))
+          } catch (error) {
+            logger.error(`[${tracker.requestId}] Failed to persist chat messages`, {
+              chatId: actualChatId,
+              error: error instanceof Error ? error.message : 'Unknown error',
+            })
+          }
+        },
+      },
+    })
+
+    return new Response(stream, { headers: SSE_RESPONSE_HEADERS })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Invalid request data', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error(`[${tracker.requestId}] Error handling mothership chat:`, {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    })
+
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}

apps/sim/app/api/mothership/chats/route.ts

@@ -0,0 +1,93 @@
+import { db } from '@sim/db'
+import { copilotChats } from '@sim/db/schema'
+import { createLogger } from '@sim/logger'
+import { and, desc, eq } from 'drizzle-orm'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import {
+  authenticateCopilotRequestSessionOnly,
+  createBadRequestResponse,
+  createInternalServerErrorResponse,
+  createUnauthorizedResponse,
+} from '@/lib/copilot/request-helpers'
+
+const logger = createLogger('MothershipChatsAPI')
+
+/**
+ * GET /api/mothership/chats?workspaceId=xxx
+ * Returns mothership (home) chats for the authenticated user in the given workspace.
+ */
+export async function GET(request: NextRequest) {
+  try {
+    const { userId, isAuthenticated } = await authenticateCopilotRequestSessionOnly()
+    if (!isAuthenticated || !userId) {
+      return createUnauthorizedResponse()
+    }
+
+    const workspaceId = request.nextUrl.searchParams.get('workspaceId')
+    if (!workspaceId) {
+      return createBadRequestResponse('workspaceId is required')
+    }
+
+    const chats = await db
+      .select({
+        id: copilotChats.id,
+        title: copilotChats.title,
+        updatedAt: copilotChats.updatedAt,
+      })
+      .from(copilotChats)
+      .where(
+        and(
+          eq(copilotChats.userId, userId),
+          eq(copilotChats.workspaceId, workspaceId),
+          eq(copilotChats.type, 'mothership')
+        )
+      )
+      .orderBy(desc(copilotChats.updatedAt))
+
+    return NextResponse.json({ success: true, data: chats })
+  } catch (error) {
+    logger.error('Error fetching mothership chats:', error)
+    return createInternalServerErrorResponse('Failed to fetch chats')
+  }
+}
+
+const CreateChatSchema = z.object({
+  workspaceId: z.string().min(1),
+})
+
+/**
+ * POST /api/mothership/chats
+ * Creates an empty mothership chat and returns its ID.
+ */
+export async function POST(request: NextRequest) {
+  try {
+    const { userId, isAuthenticated } = await authenticateCopilotRequestSessionOnly()
+    if (!isAuthenticated || !userId) {
+      return createUnauthorizedResponse()
+    }
+
+    const body = await request.json()
+    const { workspaceId } = CreateChatSchema.parse(body)
+
+    const [chat] = await db
+      .insert(copilotChats)
+      .values({
+        userId,
+        workspaceId,
+        type: 'mothership',
+        title: null,
+        model: 'claude-opus-4-5',
+        messages: [],
+      })
+      .returning({ id: copilotChats.id })
+
+    return NextResponse.json({ success: true, id: chat.id })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return createBadRequestResponse('workspaceId is required')
+    }
+    logger.error('Error creating mothership chat:', error)
+    return createInternalServerErrorResponse('Failed to create chat')
+  }
+}

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

@@ -0,0 +1,109 @@
+import { createLogger } from '@sim/logger'
+import { type NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { checkInternalAuth } from '@/lib/auth/hybrid'
+import { buildIntegrationToolSchemas } from '@/lib/copilot/chat-payload'
+import { orchestrateCopilotStream } from '@/lib/copilot/orchestrator'
+import { generateWorkspaceContext } from '@/lib/copilot/workspace-context'
+import { getUserEntityPermissions } from '@/lib/workspaces/permissions/utils'
+
+const logger = createLogger('MothershipExecuteAPI')
+
+const MessageSchema = z.object({
+  role: z.enum(['system', 'user', 'assistant']),
+  content: z.string(),
+})
+
+const ExecuteRequestSchema = z.object({
+  messages: z.array(MessageSchema).min(1, 'At least one message is required'),
+  responseFormat: z.any().optional(),
+  workspaceId: z.string().min(1, 'workspaceId is required'),
+  userId: z.string().min(1, 'userId is required'),
+  chatId: z.string().optional(),
+})
+
+/**
+ * POST /api/mothership/execute
+ *
+ * Non-streaming endpoint for Mothership block execution within workflows.
+ * Called by the executor via internal JWT auth, not by the browser directly.
+ * Consumes the Go SSE stream internally and returns a single JSON response.
+ */
+export async function POST(req: NextRequest) {
+  try {
+    const auth = await checkInternalAuth(req, { requireWorkflowId: false })
+    if (!auth.success) {
+      return NextResponse.json({ error: auth.error || 'Unauthorized' }, { status: 401 })
+    }
+
+    const body = await req.json()
+    const { messages, responseFormat, workspaceId, userId, chatId } =
+      ExecuteRequestSchema.parse(body)
+
+    const effectiveChatId = chatId || crypto.randomUUID()
+    const [workspaceContext, integrationTools, userPermission] = await Promise.all([
+      generateWorkspaceContext(workspaceId, userId),
+      buildIntegrationToolSchemas(),
+      getUserEntityPermissions(userId, 'workspace', workspaceId).catch(() => null),
+    ])
+
+    const requestPayload: Record<string, unknown> = {
+      messages,
+      responseFormat,
+      userId,
+      chatId: effectiveChatId,
+      mode: 'agent',
+      messageId: crypto.randomUUID(),
+      isHosted: true,
+      workspaceContext,
+      ...(integrationTools.length > 0 ? { integrationTools } : {}),
+      ...(userPermission ? { userPermission } : {}),
+    }
+
+    const result = await orchestrateCopilotStream(requestPayload, {
+      userId,
+      workspaceId,
+      chatId: effectiveChatId,
+      goRoute: '/api/mothership/execute',
+      autoExecuteTools: true,
+      interactive: false,
+    })
+
+    if (!result.success) {
+      logger.error('Mothership execute failed', {
+        error: result.error,
+        errors: result.errors,
+      })
+      return NextResponse.json(
+        {
+          error: result.error || 'Mothership execution failed',
+          content: result.content || '',
+        },
+        { status: 500 }
+      )
+    }
+
+    return NextResponse.json({
+      content: result.content,
+      model: 'mothership',
+      tokens: {},
+      toolCalls: result.toolCalls,
+    })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Invalid request data', details: error.errors },
+        { status: 400 }
+      )
+    }
+
+    logger.error('Mothership execute error', {
+      error: error instanceof Error ? error.message : 'Unknown error',
+    })
+
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}

apps/sim/app/api/users/me/settings/route.ts

@@ -31,7 +31,7 @@ const SettingsSchema = z.object({
 })
 
 const defaultSettings = {
-  theme: 'dark',
+  theme: 'system',
   autoConnect: true,
   telemetryEnabled: true,
   emailPreferences: {},

apps/sim/app/api/v1/copilot/chat/route.ts

@@ -1,7 +1,6 @@
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { z } from 'zod'
-import { SIM_AGENT_VERSION } from '@/lib/copilot/constants'
 import { COPILOT_REQUEST_MODES } from '@/lib/copilot/models'
 import { orchestrateCopilotStream } from '@/lib/copilot/orchestrator'
 import { resolveWorkflowIdForUser } from '@/lib/workflows/utils'
@@ -75,8 +74,6 @@ export async function POST(req: NextRequest) {
       model: selectedModel,
       mode: transportMode,
       messageId: crypto.randomUUID(),
-      version: SIM_AGENT_VERSION,
-      headless: true,
       chatId,
     }
 
@@ -84,6 +81,7 @@ export async function POST(req: NextRequest) {
       userId: auth.userId,
       workflowId: resolved.workflowId,
       chatId,
+      goRoute: '/api/mcp',
       autoExecuteTools: parsed.autoExecuteTools,
       timeout: parsed.timeout,
       interactive: false,
@@ -93,8 +91,7 @@ export async function POST(req: NextRequest) {
       success: result.success,
       content: result.content,
       toolCalls: result.toolCalls,
-      chatId: result.chatId || chatId, // Return the chatId for conversation continuity
-      conversationId: result.conversationId,
+      chatId: result.chatId || chatId,
       error: result.error,
     })
   } catch (error) {

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

@@ -8,7 +8,10 @@ import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
 import { env } from '@/lib/core/config/env'
 import { generateRequestId } from '@/lib/core/utils/request'
 import { extractAndPersistCustomTools } from '@/lib/workflows/persistence/custom-tools-persistence'
-import { saveWorkflowToNormalizedTables } from '@/lib/workflows/persistence/utils'
+import {
+  loadWorkflowFromNormalizedTables,
+  saveWorkflowToNormalizedTables,
+} from '@/lib/workflows/persistence/utils'
 import { sanitizeAgentToolsInBlocks } from '@/lib/workflows/sanitization/validation'
 import { authorizeWorkflowByWorkspacePermission } from '@/lib/workflows/utils'
 import type { BlockState, WorkflowState } from '@/stores/workflows/workflow/types'
@@ -108,6 +111,49 @@ const WorkflowStateSchema = z.object({
   variables: z.any().optional(), // Workflow variables
 })
 
+/**
+ * GET /api/workflows/[id]/state
+ * Fetch the current workflow state from normalized tables.
+ * Used by the client after server-side edits (edit_workflow) to stay in sync.
+ */
+export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id: workflowId } = await params
+
+  try {
+    const auth = await checkSessionOrInternalAuth(request, { requireWorkflowId: false })
+    if (!auth.success || !auth.userId) {
+      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+    }
+
+    const authorization = await authorizeWorkflowByWorkspacePermission({
+      workflowId,
+      userId: auth.userId,
+      action: 'read',
+    })
+    if (!authorization.allowed) {
+      return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+    }
+
+    const normalized = await loadWorkflowFromNormalizedTables(workflowId)
+    if (!normalized) {
+      return NextResponse.json({ error: 'Workflow state not found' }, { status: 404 })
+    }
+
+    return NextResponse.json({
+      blocks: normalized.blocks,
+      edges: normalized.edges,
+      loops: normalized.loops || {},
+      parallels: normalized.parallels || {},
+    })
+  } catch (error) {
+    logger.error('Failed to fetch workflow state', {
+      workflowId,
+      error: error instanceof Error ? error.message : String(error),
+    })
+    return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
+  }
+}
+
 /**
  * PUT /api/workflows/[id]/state
  * Save complete workflow state to normalized database tables

apps/sim/app/api/workspaces/invitations/[invitationId]/route.test.ts

@@ -240,7 +240,9 @@ describe('Workspace Invitation [invitationId] API Route', () => {
       const response = await GET(request, { params })
 
       expect(response.status).toBe(307)
-      expect(response.headers.get('location')).toBe('https://test.sim.ai/workspace/workspace-456/w')
+      expect(response.headers.get('location')).toBe(
+        'https://test.sim.ai/workspace/workspace-456/home'
+      )
     })
 
     it('should redirect to error page with token preserved when invitation expired', async () => {
@@ -495,7 +497,7 @@ describe('Workspace Invitation [invitationId] API Route', () => {
 
       expect(response2.status).toBe(307)
       expect(response2.headers.get('location')).toBe(
-        'https://test.sim.ai/workspace/workspace-456/w'
+        'https://test.sim.ai/workspace/workspace-456/home'
       )
     })
   })

apps/sim/app/api/workspaces/invitations/[invitationId]/route.ts

@@ -141,7 +141,7 @@ export async function GET(
           .where(eq(workspaceInvitation.id, invitation.id))
 
         return NextResponse.redirect(
-          new URL(`/workspace/${invitation.workspaceId}/w`, getBaseUrl())
+          new URL(`/workspace/${invitation.workspaceId}/home`, getBaseUrl())
         )
       }
 
@@ -193,7 +193,9 @@ export async function GET(
         request: req,
       })
 
-      return NextResponse.redirect(new URL(`/workspace/${invitation.workspaceId}/w`, getBaseUrl()))
+      return NextResponse.redirect(
+        new URL(`/workspace/${invitation.workspaceId}/home`, getBaseUrl())
+      )
     }
 
     return NextResponse.json({

apps/sim/app/layout.tsx

@@ -113,7 +113,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     var width = state && state.sidebarWidth;
                     var maxSidebarWidth = window.innerWidth * 0.3;
 
-                    if (width >= 232 && width <= maxSidebarWidth) {
+                    if (width >= 248 && width <= maxSidebarWidth) {
                       document.documentElement.style.setProperty('--sidebar-width', width + 'px');
                     } else if (width > maxSidebarWidth) {
                       document.documentElement.style.setProperty('--sidebar-width', maxSidebarWidth + 'px');

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

@@ -3,18 +3,18 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 export async function GET() {
   const baseUrl = getBaseUrl()
 
-  const llmsFullContent = `# Sim - AI Agent Workflow Builder
+  const llmsFullContent = `# Sim — Build AI Agents & Run Your Agentic Workforce
 
-> Sim is an open-source AI agent workflow builder used by 70,000+ developers at startups to Fortune 500 companies. Build and deploy agentic workflows with a visual drag-and-drop canvas. SOC2 and HIPAA compliant.
+> Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.
 
 ## Overview
 
-Sim provides a visual interface for building AI agent workflows. Instead of writing code, users drag and drop blocks onto a canvas and connect them to create complex AI automations. Each block represents a step in the workflow - an LLM call, a tool invocation, an API request, or a code execution.
+Sim lets teams create agents, workflows, knowledge bases, tables, and docs. Over 100,000 builders use Sim — from startups to Fortune 500 companies. Teams connect their tools and data, build agents that execute real workflows across systems, and manage them with full observability. SOC2 and HIPAA compliant.
 
 ## Product Details
 
 - **Product Name**: Sim
-- **Category**: AI Development Tools / Workflow Automation
+- **Category**: AI Agent Platform / Agentic Workflow Orchestration
 - **Deployment**: Cloud (SaaS) and Self-hosted options
 - **Pricing**: Free tier, Pro ($20/month), Team ($40/month), Enterprise (custom)
 - **Compliance**: SOC2 Type II, HIPAA compliant
@@ -66,7 +66,7 @@ Sim supports all major LLM providers:
 - Amazon Bedrock
 
 ### Integrations
-100+ pre-built integrations including:
+1,000+ pre-built integrations including:
 - **Communication**: Slack, Discord, Email (Gmail, Outlook), SMS (Twilio)
 - **Productivity**: Notion, Airtable, Google Sheets, Google Docs
 - **Development**: GitHub, GitLab, Jira, Linear
@@ -81,6 +81,12 @@ Built-in support for:
 - Semantic search and retrieval
 - Chunking strategies (fixed size, semantic, recursive)
 
+### Tables
+Built-in table creation and management:
+- Structured data storage
+- Queryable tables for agent workflows
+- Native integrations
+
 ### Code Execution
 - Sandboxed JavaScript/TypeScript execution
 - Access to npm packages

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

@@ -5,16 +5,16 @@ export async function GET() {
 
   const llmsContent = `# Sim
 
-> Sim is an open-source AI agent workflow builder. 70,000+ developers at startups to Fortune 500 companies deploy agentic workflows on the Sim platform. SOC2 and HIPAA compliant.
+> Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to deploy and orchestrate agentic workflows.
 
-Sim provides a visual drag-and-drop interface for building and deploying AI agent workflows. Connect to 100+ integrations and ship production-ready AI automations.
+Sim lets teams create agents, workflows, knowledge bases, tables, and docs. Over 100,000 builders use Sim — from startups to Fortune 500 companies. SOC2 and HIPAA compliant.
 
 ## Core Pages
 
-- [Homepage](${baseUrl}): Main landing page with product overview and features
+- [Homepage](${baseUrl}): Product overview, features, and pricing
 - [Templates](${baseUrl}/templates): Pre-built workflow templates to get started quickly
 - [Changelog](${baseUrl}/changelog): Product updates and release notes
-- [Sim Studio Blog](${baseUrl}/studio): Announcements, insights, and guides for AI workflows
+- [Sim Studio Blog](${baseUrl}/studio): Announcements, insights, and guides
 
 ## Documentation
 
@@ -29,28 +29,31 @@ Sim provides a visual drag-and-drop interface for building and deploying AI agen
 - **Block**: Individual step (LLM call, tool call, HTTP request, code execution)
 - **Trigger**: Event or schedule that initiates workflow execution
 - **Execution**: A single run of a workflow with logs and outputs
+- **Knowledge Base**: Vector-indexed document store for retrieval-augmented generation
 
 ## Capabilities
 
-- Visual workflow builder with drag-and-drop canvas
-- Multi-model LLM orchestration (OpenAI, Anthropic, Google, Mistral, xAI)
-- Retrieval-augmented generation (RAG) with vector databases
-- 100+ integrations (Slack, Gmail, Notion, Airtable, databases)
+- AI agent creation and deployment
+- Agentic workflow orchestration
+- 1,000+ integrations (Slack, Gmail, Notion, Airtable, databases, and more)
+- Multi-model LLM orchestration (OpenAI, Anthropic, Google, Mistral, xAI, Perplexity)
+- Knowledge base creation with retrieval-augmented generation (RAG)
+- Table creation and management
+- Document creation and processing
 - Scheduled and webhook-triggered executions
-- Real-time collaboration and version control
 
 ## Use Cases
 
-- AI agent workflow automation
-- RAG pipelines and document processing
-- Chatbot and copilot workflows for SaaS
-- Email and customer support automation
+- AI agent deployment and orchestration
+- Knowledge bases and RAG pipelines
+- Document creation and processing
+- Customer support automation
 - Internal operations (sales, marketing, legal, finance)
 
 ## Links
 
 - [GitHub Repository](https://github.com/simstudioai/sim): Open-source codebase
-- [Discord Community](https://discord.gg/Hr4UWYEcTT): Get help and connect with users
+- [Discord Community](https://discord.gg/Hr4UWYEcTT): Get help and connect with 100,000+ builders
 - [X/Twitter](https://x.com/simdotai): Product updates and announcements
 
 ## Optional

apps/sim/app/manifest.ts

@@ -5,10 +5,10 @@ export default function manifest(): MetadataRoute.Manifest {
   const brand = getBrandConfig()
 
   return {
-    name: brand.name === 'Sim' ? 'Sim - AI Agent Workflow Builder' : brand.name,
+    name: brand.name === 'Sim' ? 'Sim — Build AI Agents & Run Your Agentic Workforce' : brand.name,
     short_name: brand.name,
     description:
-      'Open-source AI agent workflow builder. 70,000+ developers build and deploy agentic workflows on Sim. Visual drag-and-drop interface for creating AI automations. SOC2 and HIPAA compliant.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.',
     start_url: '/',
     scope: '/',
     display: 'standalone',

apps/sim/app/page.tsx

@@ -1,16 +1,18 @@
 import type { Metadata } from 'next'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import Landing from '@/app/(landing)/landing'
+import Landing from '@/app/(home)/landing'
+
+export const dynamic = 'force-dynamic'
 
 const baseUrl = getBaseUrl()
 
 export const metadata: Metadata = {
   metadataBase: new URL(baseUrl),
-  title: 'Sim - AI Agent Workflow Builder | Open Source Platform',
+  title: 'Sim — Build AI Agents & Run Your Agentic Workforce',
   description:
-    'Open-source AI agent workflow builder used by 70,000+ developers. Build and deploy agentic workflows with a visual drag-and-drop canvas. Connect 100+ apps and ship SOC2 & HIPAA-ready AI automations from startups to Fortune 500.',
+    'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.',
   keywords:
-    'AI agent workflow builder, agentic workflows, open source AI, visual workflow builder, AI automation, LLM workflows, AI agents, workflow automation, no-code AI, SOC2 compliant, HIPAA compliant, enterprise AI',
+    'AI agents, agentic workforce, open-source AI agent platform, agentic workflows, LLM orchestration, AI automation, knowledge base, workflow builder, AI integrations, SOC2 compliant, HIPAA compliant, enterprise AI',
   authors: [{ name: 'Sim' }],
   creator: 'Sim',
   publisher: 'Sim',
@@ -20,9 +22,9 @@ export const metadata: Metadata = {
     telephone: false,
   },
   openGraph: {
-    title: 'Sim - AI Agent Workflow Builder | Open Source',
+    title: 'Sim — Build AI Agents & Run Your Agentic Workforce',
     description:
-      'Open-source platform used by 70,000+ developers. Design, deploy, and monitor agentic workflows with a visual drag-and-drop interface, 100+ integrations, and enterprise-grade security.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows. Create agents, workflows, knowledge bases, tables, and docs. Join over 100,000 builders.',
     type: 'website',
     url: baseUrl,
     siteName: 'Sim',
@@ -32,7 +34,7 @@ export const metadata: Metadata = {
         url: '/logo/426-240/primary/small.png',
         width: 2130,
         height: 1200,
-        alt: 'Sim - AI Agent Workflow Builder',
+        alt: 'Sim — Build AI Agents & Run Your Agentic Workforce',
         type: 'image/png',
       },
     ],
@@ -41,12 +43,12 @@ export const metadata: Metadata = {
     card: 'summary_large_image',
     site: '@simdotai',
     creator: '@simdotai',
-    title: 'Sim - AI Agent Workflow Builder | Open Source',
+    title: 'Sim — Build AI Agents & Run Your Agentic Workforce',
     description:
-      'Open-source platform for agentic workflows. 70,000+ developers. Visual builder. 100+ integrations. SOC2 & HIPAA compliant.',
+      'Sim is the open-source platform to build AI agents and run your agentic workforce. Connect 1,000+ integrations and LLMs to orchestrate agentic workflows.',
     images: {
       url: '/logo/426-240/primary/small.png',
-      alt: 'Sim - AI Agent Workflow Builder',
+      alt: 'Sim — Build AI Agents & Run Your Agentic Workforce',
     },
   },
   alternates: {
@@ -72,11 +74,12 @@ export const metadata: Metadata = {
   classification: 'AI Development Tools',
   referrer: 'origin-when-cross-origin',
   other: {
-    'llm:content-type': 'AI workflow builder, visual programming, no-code AI development',
+    'llm:content-type':
+      'AI agent platform, agentic workforce, agentic workflows, LLM orchestration',
     'llm:use-cases':
-      'email automation, Slack bots, Discord moderation, data analysis, customer support, content generation, agentic automations',
+      'AI agents, agentic workforce, agentic workflows, knowledge bases, tables, document creation, email automation, Slack bots, data analysis, customer support, content generation',
     'llm:integrations':
-      'OpenAI, Anthropic, Google AI, Slack, Gmail, Discord, Notion, Airtable, Supabase',
+      'OpenAI, Anthropic, Google AI, Mistral, xAI, Perplexity, Slack, Gmail, Discord, Notion, Airtable, Supabase',
     'llm:pricing': 'free tier available, pro $20/month, team $40/month, enterprise custom',
     'llm:region': 'global',
     'llm:languages': 'en',

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

@@ -1,5 +1,38 @@
 'use client'
 
-import { NextError } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/error'
+import { useEffect } from 'react'
+import { createLogger } from '@sim/logger'
+import { RefreshCw } from 'lucide-react'
+import { Button } from '@/components/emcn'
 
-export default NextError
+const logger = createLogger('WorkspaceError')
+
+interface WorkspaceErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function WorkspaceError({ error, reset }: WorkspaceErrorProps) {
+  useEffect(() => {
+    logger.error('Workspace error:', { error: error.message, digest: error.digest })
+  }, [error])
+
+  return (
+    <div className='flex h-full flex-1 items-center justify-center bg-white dark:bg-[var(--bg)]'>
+      <div className='flex flex-col items-center gap-[16px] text-center'>
+        <div className='flex flex-col gap-[8px]'>
+          <h2 className='font-semibold text-[16px] text-[var(--text-primary)]'>
+            Something went wrong
+          </h2>
+          <p className='max-w-[300px] text-[13px] text-[var(--text-tertiary)]'>
+            An unexpected error occurred. Please try again or refresh the page.
+          </p>
+        </div>
+        <Button variant='default' size='sm' onClick={reset}>
+          <RefreshCw className='mr-[6px] h-[14px] w-[14px]' />
+          Try again
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/files/components/file-list.tsx

@@ -74,7 +74,7 @@ const PLAN_NAMES = {
   free: 'Free',
 } as const
 
-export function Files() {
+export function FileList() {
   const params = useParams()
   const workspaceId = params?.workspaceId as string
 
@@ -227,19 +227,19 @@ export function Files() {
   const displayPlanName = PLAN_NAMES[planName as keyof typeof PLAN_NAMES] || 'Free'
 
   const renderTableSkeleton = () => (
-    <Table className='table-fixed text-[13px]'>
+    <Table className='table-fixed text-[14px]'>
       <TableHeader>
         <TableRow className='hover:bg-transparent'>
-          <TableHead className='w-[56%] px-[12px] py-[8px] text-[12px] text-[var(--text-secondary)]'>
+          <TableHead className='w-[56%] px-[12px] py-[8px] text-[13px] text-[var(--text-secondary)]'>
             <Skeleton className='h-[12px] w-[40px]' />
           </TableHead>
-          <TableHead className='w-[14%] px-[12px] py-[8px] text-left text-[12px] text-[var(--text-secondary)]'>
+          <TableHead className='w-[14%] px-[12px] py-[8px] text-left text-[13px] text-[var(--text-secondary)]'>
             <Skeleton className='h-[12px] w-[28px]' />
           </TableHead>
-          <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[12px] text-[var(--text-secondary)]'>
+          <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[13px] text-[var(--text-secondary)]'>
             <Skeleton className='h-[12px] w-[56px]' />
           </TableHead>
-          <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[12px] text-[var(--text-secondary)]'>
+          <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[13px] text-[var(--text-secondary)]'>
             <Skeleton className='h-[12px] w-[48px]' />
           </TableHead>
         </TableRow>
@@ -253,10 +253,10 @@ export function Files() {
                 <Skeleton className='h-[14px] w-[180px]' />
               </div>
             </TableCell>
-            <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px]'>
+            <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[13px]'>
               <Skeleton className='h-[12px] w-[48px]' />
             </TableCell>
-            <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px]'>
+            <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[13px]'>
               <Skeleton className='h-[12px] w-[56px]' />
             </TableCell>
             <TableCell className='px-[12px] py-[8px]'>
@@ -272,80 +272,80 @@ export function Files() {
   )
 
   return (
-    <div className='flex h-full flex-col gap-[2px]'>
-      {/* Search Input and Upload Button */}
-      <div className='flex items-center gap-[8px]'>
+    <div className='flex h-full flex-col'>
+      {/* Search and Actions */}
+      <div className='mt-[14px] flex items-center justify-between'>
         <div
           className={cn(
-            'flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]',
+            'flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]',
             permissionsLoading && 'opacity-50'
           )}
         >
-          <Search
-            className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-            strokeWidth={2}
-          />
+          <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
           <Input
-            placeholder='Search files...'
+            placeholder='Search'
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             disabled={permissionsLoading}
-            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-100'
+            className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-100'
           />
         </div>
-        {(permissionsLoading || userPermissions.canEdit) && (
-          <>
-            <input
-              ref={fileInputRef}
-              type='file'
-              className='hidden'
-              onChange={handleFileChange}
-              disabled={uploading || permissionsLoading}
-              accept={ACCEPT_ATTR}
-              multiple
-            />
-            <Button
-              onClick={handleUploadClick}
-              disabled={uploading || permissionsLoading}
-              variant='tertiary'
-            >
-              <Plus className='mr-[6px] h-[13px] w-[13px]' />
-              {uploading && uploadProgress.total > 0
-                ? `${uploadProgress.completed}/${uploadProgress.total}`
-                : uploading
-                  ? 'Uploading...'
-                  : 'Upload'}
-            </Button>
-          </>
-        )}
+        <div className='flex items-center gap-[8px]'>
+          {(permissionsLoading || userPermissions.canEdit) && (
+            <>
+              <input
+                ref={fileInputRef}
+                type='file'
+                className='hidden'
+                onChange={handleFileChange}
+                disabled={uploading || permissionsLoading}
+                accept={ACCEPT_ATTR}
+                multiple
+              />
+              <Button
+                onClick={handleUploadClick}
+                disabled={uploading || permissionsLoading}
+                variant='tertiary'
+                className='h-[32px] rounded-[6px]'
+              >
+                <Plus className='mr-[6px] h-[14px] w-[14px]' />
+                {uploading && uploadProgress.total > 0
+                  ? `${uploadProgress.completed}/${uploadProgress.total}`
+                  : uploading
+                    ? 'Uploading...'
+                    : 'Upload'}
+              </Button>
+            </>
+          )}
+        </div>
       </div>
 
-      {/* Scrollable Content */}
-      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+      {/* Content */}
+      <div ref={scrollContainerRef} className='mt-[24px] min-h-0 flex-1 overflow-y-auto'>
         {permissionsLoading ? (
           renderTableSkeleton()
         ) : files.length === 0 && failedFiles.length === 0 ? (
-          <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
             No files uploaded yet
           </div>
         ) : filteredFiles.length === 0 && failedFiles.length === 0 ? (
-          <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+          <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
             No files found matching "{search}"
           </div>
         ) : (
-          <Table className='table-fixed text-[13px]'>
+          <Table className='table-fixed text-[14px]'>
             <TableHeader>
               <TableRow className='hover:bg-transparent'>
-                <TableHead className='w-[56%] px-[12px] py-[8px] text-[12px] text-[var(--text-secondary)]'>
+                <TableHead className='w-[56%] px-[12px] py-[8px] text-[13px] text-[var(--text-secondary)]'>
                   Name
                 </TableHead>
-                <TableHead className='w-[14%] px-[12px] py-[8px] text-left text-[12px] text-[var(--text-secondary)]'>
+                <TableHead className='w-[14%] px-[12px] py-[8px] text-left text-[13px] text-[var(--text-secondary)]'>
                   Size
                 </TableHead>
-                <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[12px] text-[var(--text-secondary)]'>
+                <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[13px] text-[var(--text-secondary)]'>
                   Uploaded
                 </TableHead>
-                <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[12px] text-[var(--text-secondary)]'>
+                <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[13px] text-[var(--text-secondary)]'>
                   Actions
                 </TableHead>
               </TableRow>
@@ -362,17 +362,17 @@ export function Files() {
                       <div className='flex min-w-0 items-center gap-[8px]'>
                         <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-error)]' />
                         <span
-                          className='min-w-0 truncate text-[14px] text-[var(--text-error)]'
+                          className='min-w-0 truncate text-[15px] text-[var(--text-error)]'
                           title={fileName}
                         >
                           {truncateMiddle(fileName)}
                         </span>
                       </div>
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px] text-[var(--text-error)]'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[13px] text-[var(--text-error)]'>
                       —
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px] text-[var(--text-error)]'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[13px] text-[var(--text-error)]'>
                       —
                     </TableCell>
                     <TableCell className='px-[12px] py-[8px]'>
@@ -398,17 +398,17 @@ export function Files() {
                         <button
                           onClick={() => handleDownload(file)}
                           disabled={downloadingFileId === file.id}
-                          className='min-w-0 truncate text-left font-normal text-[14px] text-[var(--text-primary)] hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50'
+                          className='min-w-0 truncate text-left font-normal text-[15px] text-[var(--text-primary)] hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50'
                           title={file.name}
                         >
                           {truncateMiddle(file.name)}
                         </button>
                       </div>
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px] text-[var(--text-muted)]'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[13px] text-[var(--text-muted)]'>
                       {formatFileSize(file.size)}
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px] text-[var(--text-muted)]'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[13px] text-[var(--text-muted)]'>
                       {formatDate(file.uploadedAt)}
                     </TableCell>
                     <TableCell className='px-[12px] py-[8px]'>
@@ -467,7 +467,7 @@ export function Files() {
                 <div className='h-[14px] w-[1.5px] bg-[var(--divider)]' />
                 <div className='flex items-center gap-[4px]'>
                   <Skeleton className='h-[12px] w-[40px] rounded-[2px]' />
-                  <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>/</span>
+                  <span className='font-medium text-[13px] text-[var(--text-tertiary)]'>/</span>
                   <Skeleton className='h-[12px] w-[32px] rounded-[2px]' />
                 </div>
               </div>
@@ -483,16 +483,16 @@ export function Files() {
             <div className='mt-auto flex flex-col gap-[8px] pt-[10px]'>
               <div className='flex items-center justify-between'>
                 <div className='flex items-center gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-primary)]'>
+                  <span className='font-medium text-[13px] text-[var(--text-primary)]'>
                     {displayPlanName}
                   </span>
                   <div className='h-[14px] w-[1.5px] bg-[var(--divider)]' />
                   <div className='flex items-center gap-[4px]'>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)] tabular-nums'>
+                    <span className='font-medium text-[13px] text-[var(--text-tertiary)] tabular-nums'>
                       {formatStorageSize(storageInfo.usedBytes)}
                     </span>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>/</span>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)] tabular-nums'>
+                    <span className='font-medium text-[13px] text-[var(--text-tertiary)]'>/</span>
+                    <span className='font-medium text-[13px] text-[var(--text-tertiary)] tabular-nums'>
                       {formatStorageSize(storageInfo.limitBytes)}
                     </span>
                   </div>

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

@@ -0,0 +1,30 @@
+'use client'
+
+import { Files as FilesIcon } from 'lucide-react'
+import { FileList } from '@/app/workspace/[workspaceId]/files/components/file-list'
+
+export function Files() {
+  return (
+    <div className='flex h-full flex-1 flex-col'>
+      <div className='flex flex-1 overflow-hidden'>
+        <div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[28px] pb-[24px] dark:bg-[var(--bg)]'>
+          {/* Header */}
+          <div>
+            <div className='flex items-start gap-[12px]'>
+              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#8B5CF6] bg-[#F5F3FF] dark:border-[#5B21B6] dark:bg-[#2E1065]'>
+                <FilesIcon className='h-[14px] w-[14px] text-[#8B5CF6] dark:text-[#A78BFA]' />
+              </div>
+              <h1 className='font-medium text-[18px]'>Files</h1>
+            </div>
+            <p className='mt-[10px] text-[14px] text-[var(--text-tertiary)]'>
+              Workspace files accessible across all workflows.
+            </p>
+          </div>
+
+          {/* Search, Actions, and Content */}
+          <FileList />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/files/layout.tsx

@@ -0,0 +1,3 @@
+export default function FilesLayout({ children }: { children: React.ReactNode }) {
+  return <div className='flex h-full flex-1 flex-col overflow-hidden'>{children}</div>
+}

apps/sim/app/workspace/[workspaceId]/files/page.tsx

@@ -0,0 +1,32 @@
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/auth'
+import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
+import { getUserPermissionConfig } from '@/ee/access-control/utils/permission-check'
+import { Files } from './files'
+
+interface FilesPageProps {
+  params: Promise<{
+    workspaceId: string
+  }>
+}
+
+export default async function FilesPage({ params }: FilesPageProps) {
+  const { workspaceId } = await params
+  const session = await getSession()
+
+  if (!session?.user?.id) {
+    redirect('/')
+  }
+
+  const hasPermission = await verifyWorkspaceMembership(session.user.id, workspaceId)
+  if (!hasPermission) {
+    redirect('/')
+  }
+
+  const permissionConfig = await getUserPermissionConfig(session.user.id)
+  if (permissionConfig?.hideFilesTab) {
+    redirect(`/workspace/${workspaceId}`)
+  }
+
+  return <Files />
+}

apps/sim/app/workspace/[workspaceId]/global-error.tsx

@@ -1,5 +0,0 @@
-'use client'
-
-import { NextGlobalError } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/error'
-
-export default NextGlobalError

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

@@ -0,0 +1,3 @@
+export { MessageContent } from './message-content'
+export { MothershipView } from './mothership-view'
+export { UserInput } from './user-input'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/index.ts

@@ -0,0 +1 @@
+export { MessageContent } from './message-content'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@/lib/core/utils/cn'
+import type { ContentBlock, ToolCallStatus } from '../../types'
+
+const REMARK_PLUGINS = [remarkGfm]
+
+const PROSE_CLASSES = cn(
+  'prose prose-base dark:prose-invert max-w-none font-body font-[380]',
+  'prose-headings:font-semibold prose-headings:tracking-[-0.01em] prose-headings:text-[var(--text-primary)]',
+  'prose-headings:mb-[12px] prose-headings:mt-[20px]',
+  'prose-p:text-[16px] prose-p:leading-[1.75] prose-p:tracking-[-0.015em] prose-p:text-[var(--text-primary)]',
+  'prose-p:mb-[8px]',
+  'prose-li:text-[16px] prose-li:leading-[1.75] prose-li:tracking-[-0.015em] prose-li:text-[var(--text-primary)]',
+  'prose-li:my-[4px]',
+  'prose-ul:my-[12px] prose-ol:my-[12px]',
+  'prose-strong:font-semibold prose-strong:text-[var(--text-primary)]',
+  'prose-a:text-[var(--brand-secondary)]',
+  'prose-code:rounded-[4px] prose-code:bg-[var(--surface-5)] prose-code:px-[5px] prose-code:py-[2px] prose-code:text-[13px] prose-code:font-mono prose-code:font-normal prose-code:text-[var(--text-primary)]',
+  'prose-pre:my-[14px] prose-pre:rounded-[8px] prose-pre:bg-[var(--surface-5)] prose-pre:text-[13px]',
+  'prose-hr:border-[var(--divider)]'
+)
+
+function formatToolName(name: string): string {
+  return name
+    .replace(/_v\d+$/, '')
+    .split('_')
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(' ')
+}
+
+interface TextSegment {
+  type: 'text'
+  content: string
+}
+
+interface ActionSegment {
+  type: 'action'
+  id: string
+  label: string
+  status: ToolCallStatus
+}
+
+type MessageSegment = TextSegment | ActionSegment
+
+/**
+ * Flattens raw content blocks into a uniform list of text and action segments.
+ * Tool calls and subagents are treated identically as action items.
+ */
+function parseBlocks(blocks: ContentBlock[], isStreaming: boolean): MessageSegment[] {
+  const segments: MessageSegment[] = []
+  const lastSubagentIdx = blocks.findLastIndex((b) => b.type === 'subagent')
+
+  for (let i = 0; i < blocks.length; i++) {
+    const block = blocks[i]
+
+    switch (block.type) {
+      case 'text': {
+        if (block.content?.trim()) {
+          const last = segments[segments.length - 1]
+          if (last?.type === 'text') {
+            last.content += block.content
+          } else {
+            segments.push({ type: 'text', content: block.content })
+          }
+        }
+        break
+      }
+      case 'subagent': {
+        if (block.content) {
+          segments.push({
+            type: 'action',
+            id: `subagent-${i}`,
+            label: block.content,
+            status: isStreaming && i === lastSubagentIdx ? 'executing' : 'success',
+          })
+        }
+        break
+      }
+      case 'tool_call': {
+        if (block.toolCall) {
+          segments.push({
+            type: 'action',
+            id: block.toolCall.id,
+            label: block.toolCall.displayTitle || formatToolName(block.toolCall.name),
+            status: block.toolCall.status,
+          })
+        }
+        break
+      }
+    }
+  }
+
+  return segments
+}
+
+interface MessageContentProps {
+  blocks: ContentBlock[]
+  fallbackContent: string
+  isStreaming: boolean
+}
+
+export function MessageContent({ blocks, fallbackContent, isStreaming }: MessageContentProps) {
+  const parsed = blocks.length > 0 ? parseBlocks(blocks, isStreaming) : []
+
+  const segments: MessageSegment[] =
+    parsed.length > 0
+      ? parsed
+      : fallbackContent?.trim()
+        ? [{ type: 'text' as const, content: fallbackContent }]
+        : []
+
+  if (segments.length === 0) return null
+
+  return (
+    <div className='space-y-[10px]'>
+      {segments.map((segment, i) => {
+        if (segment.type === 'text') {
+          return (
+            <div key={`text-${i}`} className={PROSE_CLASSES}>
+              <ReactMarkdown remarkPlugins={REMARK_PLUGINS}>{segment.content}</ReactMarkdown>
+            </div>
+          )
+        }
+
+        return (
+          <div key={segment.id} className='font-base text-[13px] text-[var(--text-tertiary)]'>
+            {segment.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/index.ts

@@ -0,0 +1 @@
+export { MothershipView } from './mothership-view'

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+export function MothershipView() {
+  return (
+    <div className='flex h-full w-[480px] flex-shrink-0 flex-col border-[var(--border)] border-l'>
+      <div className='flex items-center border-[var(--border)] border-b px-[16px] py-[12px]'>
+        <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Mothership</span>
+      </div>
+      <div className='flex flex-1 items-center justify-center'>
+        <span className='text-[13px] text-[var(--text-muted)]'>No artifacts yet</span>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/index.ts

@@ -0,0 +1 @@
+export { UserInput } from './user-input'

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -0,0 +1,203 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { ArrowUp, Mic, Paperclip } from 'lucide-react'
+import { Button } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { useAnimatedPlaceholder } from '../../hooks'
+
+const TEXTAREA_CLASSES = cn(
+  'm-0 box-border h-auto max-h-[30vh] min-h-[24px] w-full resize-none',
+  'overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent',
+  'px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em]',
+  'text-[var(--text-primary)] outline-none',
+  'placeholder:font-[350] placeholder:text-[var(--text-subtle)]',
+  'focus-visible:ring-0 focus-visible:ring-offset-0',
+  '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+)
+
+const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
+const SEND_BUTTON_ACTIVE =
+  'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
+const SEND_BUTTON_DISABLED = 'bg-[var(--c-808080)] dark:bg-[var(--c-808080)]'
+
+function autoResizeTextarea(e: React.FormEvent<HTMLTextAreaElement>) {
+  const target = e.target as HTMLTextAreaElement
+  target.style.height = 'auto'
+  target.style.height = `${Math.min(target.scrollHeight, window.innerHeight * 0.3)}px`
+}
+
+interface UserInputProps {
+  value: string
+  onChange: (value: string) => void
+  onSubmit: () => void
+  isSending: boolean
+  onStopGeneration: () => void
+  isInitialView?: boolean
+}
+
+export function UserInput({
+  value,
+  onChange,
+  onSubmit,
+  isSending,
+  onStopGeneration,
+  isInitialView = true,
+}: UserInputProps) {
+  const animatedPlaceholder = useAnimatedPlaceholder()
+  const placeholder = isInitialView ? animatedPlaceholder : 'Send message to Sim'
+  const canSubmit = value.trim().length > 0 && !isSending
+
+  const [isListening, setIsListening] = useState(false)
+  const recognitionRef = useRef<SpeechRecognition | null>(null)
+  const prefixRef = useRef('')
+
+  useEffect(() => {
+    return () => {
+      recognitionRef.current?.abort()
+    }
+  }, [])
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  const handleContainerClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    if ((e.target as HTMLElement).closest('button')) return
+    textareaRef.current?.focus()
+  }, [])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault()
+        onSubmit()
+      }
+    },
+    [onSubmit]
+  )
+
+  const toggleListening = useCallback(() => {
+    if (isListening) {
+      recognitionRef.current?.stop()
+      recognitionRef.current = null
+      setIsListening(false)
+      return
+    }
+
+    const w = window as Window & {
+      SpeechRecognition?: typeof SpeechRecognition
+      webkitSpeechRecognition?: typeof SpeechRecognition
+    }
+    const SpeechRecognitionAPI = w.SpeechRecognition || w.webkitSpeechRecognition
+    if (!SpeechRecognitionAPI) return
+
+    prefixRef.current = value
+
+    const recognition = new SpeechRecognitionAPI()
+    recognition.continuous = true
+    recognition.interimResults = true
+    recognition.lang = 'en-US'
+
+    recognition.onresult = (event: SpeechRecognitionEvent) => {
+      let transcript = ''
+      for (let i = 0; i < event.results.length; i++) {
+        transcript += event.results[i][0].transcript
+      }
+      const prefix = prefixRef.current
+      onChange(prefix ? `${prefix} ${transcript}` : transcript)
+    }
+
+    recognition.onend = () => {
+      if (recognitionRef.current === recognition) {
+        try {
+          recognition.start()
+        } catch {
+          recognitionRef.current = null
+          setIsListening(false)
+        }
+      }
+    }
+    recognition.onerror = (e: SpeechRecognitionErrorEvent) => {
+      if (e.error === 'aborted' || e.error === 'not-allowed') {
+        recognitionRef.current = null
+        setIsListening(false)
+      }
+    }
+
+    recognitionRef.current = recognition
+    recognition.start()
+    setIsListening(true)
+  }, [isListening, value, onChange])
+
+  return (
+    <div
+      onClick={handleContainerClick}
+      className={cn(
+        'mx-auto w-full max-w-[640px] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-[10px] py-[8px] dark:bg-[var(--surface-4)]',
+        isInitialView && 'shadow-sm'
+      )}
+    >
+      <textarea
+        ref={textareaRef}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onInput={autoResizeTextarea}
+        placeholder={placeholder}
+        rows={1}
+        className={TEXTAREA_CLASSES}
+      />
+      <div className='flex items-center justify-between'>
+        <div className='flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-full border border-[#F0F0F0] transition-colors hover:bg-[#F7F7F7] dark:border-[#3d3d3d] dark:hover:bg-[#303030]'>
+          <Paperclip
+            className='h-[14px] w-[14px] text-[var(--text-muted)] dark:text-[var(--text-secondary)]'
+            strokeWidth={2}
+          />
+        </div>
+        <div className='flex items-center gap-[6px]'>
+          <button
+            type='button'
+            onClick={toggleListening}
+            className={cn(
+              'flex h-[28px] w-[28px] items-center justify-center rounded-full transition-colors',
+              isListening
+                ? 'bg-red-500 text-white hover:bg-red-600'
+                : 'text-[var(--text-muted)] hover:bg-[#F7F7F7] dark:text-[var(--text-secondary)] dark:hover:bg-[#303030]'
+            )}
+            title={isListening ? 'Stop listening' : 'Voice input'}
+          >
+            <Mic className='h-[16px] w-[16px]' strokeWidth={2} />
+          </button>
+          {isSending ? (
+            <Button
+              onClick={onStopGeneration}
+              className={cn(SEND_BUTTON_BASE, SEND_BUTTON_ACTIVE)}
+              title='Stop generation'
+            >
+              <svg
+                className='block h-[14px] w-[14px] fill-white dark:fill-black'
+                viewBox='0 0 24 24'
+                xmlns='http://www.w3.org/2000/svg'
+              >
+                <rect x='4' y='4' width='16' height='16' rx='3' ry='3' />
+              </svg>
+            </Button>
+          ) : (
+            <Button
+              onClick={onSubmit}
+              disabled={!canSubmit}
+              className={cn(
+                SEND_BUTTON_BASE,
+                canSubmit ? SEND_BUTTON_ACTIVE : SEND_BUTTON_DISABLED
+              )}
+            >
+              <ArrowUp
+                className='block h-[16px] w-[16px] text-white dark:text-black'
+                strokeWidth={2.25}
+              />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,107 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { useParams } from 'next/navigation'
+import { MessageContent, UserInput } from './components'
+import { useChat } from './hooks'
+
+interface HomeProps {
+  chatId?: string
+}
+
+export function Home({ chatId }: HomeProps = {}) {
+  const { workspaceId } = useParams<{ workspaceId: string }>()
+  const [inputValue, setInputValue] = useState('')
+  const { messages, isSending, sendMessage, stopGeneration, chatBottomRef } = useChat(
+    workspaceId,
+    chatId
+  )
+
+  const handleSubmit = useCallback(() => {
+    const trimmed = inputValue.trim()
+    if (!trimmed) return
+    setInputValue('')
+    sendMessage(trimmed)
+  }, [inputValue, sendMessage])
+
+  const hasMessages = messages.length > 0
+
+  if (!hasMessages) {
+    return (
+      <div className='flex h-full flex-col items-center justify-center bg-[#FCFCFC] px-[24px] dark:bg-[var(--surface-2)]'>
+        <h1 className='mb-[24px] font-[450] font-season text-[32px] text-[var(--text-primary)] tracking-[-0.02em]'>
+          What do you want to do?
+        </h1>
+        <UserInput
+          value={inputValue}
+          onChange={setInputValue}
+          onSubmit={handleSubmit}
+          isSending={isSending}
+          onStopGeneration={stopGeneration}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex h-full bg-[#FCFCFC] dark:bg-[var(--surface-2)]'>
+      <div className='flex h-full min-w-0 flex-1 flex-col'>
+        <div className='min-h-0 flex-1 overflow-y-auto px-[24px] py-[16px]'>
+          <div className='mx-auto max-w-[640px] space-y-[16px]'>
+            {messages.map((msg) => {
+              if (msg.role === 'user') {
+                return (
+                  <div key={msg.id} className='flex justify-end'>
+                    <div className='max-w-[80%] rounded-[16px] bg-[var(--surface-5)] px-[14px] py-[4px]'>
+                      <p className='whitespace-pre-wrap font-[380] font-body text-[16px] text-[var(--text-primary)] leading-[1.75] tracking-[-0.015em]'>
+                        {msg.content}
+                      </p>
+                    </div>
+                  </div>
+                )
+              }
+
+              const hasBlocks = msg.contentBlocks && msg.contentBlocks.length > 0
+              const isThisStreaming = isSending && msg === messages[messages.length - 1]
+
+              if (!hasBlocks && !msg.content && isThisStreaming) {
+                return (
+                  <div key={msg.id} className='flex items-center gap-[6px] py-[8px]'>
+                    <div className='h-[6px] w-[6px] animate-pulse rounded-full bg-[var(--text-tertiary)]' />
+                    <span className='font-base text-[13px] text-[var(--text-tertiary)]'>
+                      Thinking…
+                    </span>
+                  </div>
+                )
+              }
+
+              if (!hasBlocks && !msg.content) return null
+
+              return (
+                <div key={msg.id}>
+                  <MessageContent
+                    blocks={msg.contentBlocks || []}
+                    fallbackContent={msg.content}
+                    isStreaming={isThisStreaming}
+                  />
+                </div>
+              )
+            })}
+            <div ref={chatBottomRef} />
+          </div>
+        </div>
+
+        <div className='flex-shrink-0 px-[24px] pb-[16px]'>
+          <UserInput
+            value={inputValue}
+            onChange={setInputValue}
+            onSubmit={handleSubmit}
+            isSending={isSending}
+            onStopGeneration={stopGeneration}
+            isInitialView={false}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useAnimatedPlaceholder } from './use-animated-placeholder'
+export type { UseChatReturn } from './use-chat'
+export { useChat } from './use-chat'

apps/sim/app/workspace/[workspaceId]/home/hooks/use-animated-placeholder.ts

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react'
+
+const PLACEHOLDER_PREFIX = 'Ask Sim to '
+const PLACEHOLDER_SUFFIXES = [
+  'respond to my emails...',
+  'find and track leads...',
+  'DM me Linear updates on Slack...',
+  'track GitHub commits...',
+] as const
+
+const TYPE_SPEED_MS = 60
+const DELETE_SPEED_MS = 35
+const PAUSE_AFTER_TYPING_MS = 2000
+const PAUSE_AFTER_DELETING_MS = 400
+
+export function useAnimatedPlaceholder(): string {
+  const [text, setText] = useState(PLACEHOLDER_PREFIX)
+  const stateRef = useRef({
+    suffixIndex: 0,
+    charIndex: 0,
+    phase: 'typing' as 'typing' | 'paused' | 'deleting' | 'waiting',
+  })
+
+  useEffect(() => {
+    const tick = () => {
+      const s = stateRef.current
+      const suffix = PLACEHOLDER_SUFFIXES[s.suffixIndex]
+
+      switch (s.phase) {
+        case 'typing': {
+          s.charIndex++
+          setText(PLACEHOLDER_PREFIX + suffix.slice(0, s.charIndex))
+          if (s.charIndex >= suffix.length) {
+            s.phase = 'paused'
+            return PAUSE_AFTER_TYPING_MS
+          }
+          return TYPE_SPEED_MS
+        }
+        case 'paused': {
+          s.phase = 'deleting'
+          return DELETE_SPEED_MS
+        }
+        case 'deleting': {
+          s.charIndex--
+          setText(PLACEHOLDER_PREFIX + suffix.slice(0, s.charIndex))
+          if (s.charIndex <= 0) {
+            s.phase = 'waiting'
+            return PAUSE_AFTER_DELETING_MS
+          }
+          return DELETE_SPEED_MS
+        }
+        case 'waiting': {
+          s.suffixIndex = (s.suffixIndex + 1) % PLACEHOLDER_SUFFIXES.length
+          s.charIndex = 0
+          s.phase = 'typing'
+          return TYPE_SPEED_MS
+        }
+      }
+    }
+
+    let timer: ReturnType<typeof setTimeout>
+    const schedule = () => {
+      const delay = tick()
+      timer = setTimeout(schedule, delay)
+    }
+    timer = setTimeout(schedule, TYPE_SPEED_MS)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  return text
+}

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts

@@ -0,0 +1,404 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+import { usePathname, useRouter } from 'next/navigation'
+import { MOTHERSHIP_CHAT_API_PATH } from '@/lib/copilot/constants'
+import {
+  type TaskChatHistory,
+  type TaskStoredContentBlock,
+  type TaskStoredMessage,
+  taskKeys,
+  useChatHistory,
+} from '@/hooks/queries/tasks'
+import type {
+  ChatMessage,
+  ContentBlock,
+  ContentBlockType,
+  SSEPayload,
+  SSEPayloadData,
+  ToolCallStatus,
+} from '../types'
+import { SUBAGENT_LABELS } from '../types'
+
+export interface UseChatReturn {
+  messages: ChatMessage[]
+  isSending: boolean
+  error: string | null
+  sendMessage: (message: string) => Promise<void>
+  stopGeneration: () => void
+  chatBottomRef: React.RefObject<HTMLDivElement | null>
+}
+
+const STATE_TO_STATUS: Record<string, ToolCallStatus> = {
+  success: 'success',
+  error: 'error',
+} as const
+
+function mapStoredBlock(block: TaskStoredContentBlock): ContentBlock {
+  const mapped: ContentBlock = {
+    type: block.type as ContentBlockType,
+    content: block.content,
+  }
+
+  if (block.type === 'tool_call' && block.toolCall) {
+    mapped.toolCall = {
+      id: block.toolCall.id ?? '',
+      name: block.toolCall.name ?? 'unknown',
+      status: STATE_TO_STATUS[block.toolCall.state ?? ''] ?? 'success',
+      displayTitle: block.toolCall.display?.text,
+    }
+  }
+
+  return mapped
+}
+
+function mapStoredMessage(msg: TaskStoredMessage): ChatMessage {
+  const mapped: ChatMessage = {
+    id: msg.id,
+    role: msg.role,
+    content: msg.content,
+  }
+
+  if (Array.isArray(msg.contentBlocks) && msg.contentBlocks.length > 0) {
+    mapped.contentBlocks = msg.contentBlocks.map(mapStoredBlock)
+  }
+
+  return mapped
+}
+
+function getPayloadData(payload: SSEPayload): SSEPayloadData | undefined {
+  return typeof payload.data === 'object' ? payload.data : undefined
+}
+
+export function useChat(workspaceId: string, initialChatId?: string): UseChatReturn {
+  const pathname = usePathname()
+  const queryClient = useQueryClient()
+  const router = useRouter()
+  const routerRef = useRef(router)
+  const [messages, setMessages] = useState<ChatMessage[]>([])
+  const [isSending, setIsSending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const abortControllerRef = useRef<AbortController | null>(null)
+  const chatIdRef = useRef<string | undefined>(initialChatId)
+  const chatBottomRef = useRef<HTMLDivElement>(null)
+  const appliedChatIdRef = useRef<string | undefined>(undefined)
+  const pendingUserMsgRef = useRef<{ id: string; content: string } | null>(null)
+  const streamIdRef = useRef<string | undefined>(undefined)
+  const sendingRef = useRef(false)
+
+  useEffect(() => {
+    routerRef.current = router
+  }, [router])
+
+  const isHomePage = pathname.endsWith('/home')
+
+  const { data: chatHistory } = useChatHistory(initialChatId)
+
+  useEffect(() => {
+    chatIdRef.current = initialChatId
+    appliedChatIdRef.current = undefined
+    setMessages([])
+    setError(null)
+    setIsSending(false)
+  }, [initialChatId])
+
+  useEffect(() => {
+    if (!isHomePage || !chatIdRef.current) return
+    chatIdRef.current = undefined
+    appliedChatIdRef.current = undefined
+    abortControllerRef.current?.abort()
+    abortControllerRef.current = null
+    setMessages([])
+    setError(null)
+    setIsSending(false)
+  }, [isHomePage])
+
+  useEffect(() => {
+    if (!chatHistory || appliedChatIdRef.current === chatHistory.id) return
+    appliedChatIdRef.current = chatHistory.id
+    setMessages(chatHistory.messages.map(mapStoredMessage))
+  }, [chatHistory])
+
+  const processSSEStream = useCallback(
+    async (reader: ReadableStreamDefaultReader<Uint8Array>, assistantId: string) => {
+      const decoder = new TextDecoder()
+      let buffer = ''
+      const blocks: ContentBlock[] = []
+      const toolMap = new Map<string, number>()
+
+      const ensureTextBlock = (): ContentBlock => {
+        const last = blocks[blocks.length - 1]
+        if (last?.type === 'text') return last
+        const b: ContentBlock = { type: 'text', content: '' }
+        blocks.push(b)
+        return b
+      }
+
+      const flush = () => {
+        const text = blocks
+          .filter((b) => b.type === 'text')
+          .map((b) => b.content ?? '')
+          .join('')
+        setMessages((prev) =>
+          prev.map((m) =>
+            m.id === assistantId ? { ...m, content: text, contentBlocks: [...blocks] } : m
+          )
+        )
+      }
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        buffer += decoder.decode(value, { stream: true })
+        const lines = buffer.split('\n')
+        buffer = lines.pop() || ''
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue
+          const raw = line.slice(6)
+
+          let parsed: SSEPayload
+          try {
+            parsed = JSON.parse(raw)
+          } catch {
+            continue
+          }
+
+          switch (parsed.type) {
+            case 'chat_id': {
+              if (parsed.chatId) {
+                const isNewChat = !chatIdRef.current
+                chatIdRef.current = parsed.chatId
+                queryClient.invalidateQueries({ queryKey: taskKeys.list(workspaceId) })
+                if (isNewChat) {
+                  const userMsg = pendingUserMsgRef.current
+                  const activeStreamId = streamIdRef.current
+                  if (userMsg && activeStreamId) {
+                    queryClient.setQueryData<TaskChatHistory>(taskKeys.detail(parsed.chatId), {
+                      id: parsed.chatId,
+                      title: null,
+                      messages: [{ id: userMsg.id, role: 'user', content: userMsg.content }],
+                      activeStreamId,
+                    })
+                  }
+                  routerRef.current.replace(`/workspace/${workspaceId}/task/${parsed.chatId}`)
+                }
+              }
+              break
+            }
+            case 'content': {
+              const chunk = typeof parsed.data === 'string' ? parsed.data : (parsed.content ?? '')
+              if (chunk) {
+                const tb = ensureTextBlock()
+                tb.content = (tb.content ?? '') + chunk
+                flush()
+              }
+              break
+            }
+            case 'tool_generating':
+            case 'tool_call': {
+              const id = parsed.toolCallId
+              const data = getPayloadData(parsed)
+              const name = parsed.toolName || data?.name || 'unknown'
+              if (!id) break
+              const ui = parsed.ui || data?.ui
+              if (ui?.hidden) break
+              const displayTitle = ui?.title || ui?.phaseLabel
+              if (!toolMap.has(id)) {
+                toolMap.set(id, blocks.length)
+                blocks.push({
+                  type: 'tool_call',
+                  toolCall: { id, name, status: 'executing', displayTitle },
+                })
+              } else {
+                const idx = toolMap.get(id)!
+                const tc = blocks[idx].toolCall
+                if (tc) {
+                  tc.name = name
+                  if (displayTitle) tc.displayTitle = displayTitle
+                }
+              }
+              flush()
+              break
+            }
+            case 'tool_result': {
+              const id = parsed.toolCallId || getPayloadData(parsed)?.id
+              if (!id) break
+              const idx = toolMap.get(id)
+              if (idx !== undefined && blocks[idx].toolCall) {
+                blocks[idx].toolCall!.status = parsed.success ? 'success' : 'error'
+                flush()
+              }
+              break
+            }
+            case 'tool_error': {
+              const id = parsed.toolCallId || getPayloadData(parsed)?.id
+              if (!id) break
+              const idx = toolMap.get(id)
+              if (idx !== undefined && blocks[idx].toolCall) {
+                blocks[idx].toolCall!.status = 'error'
+                flush()
+              }
+              break
+            }
+            case 'subagent_start': {
+              const name = parsed.subagent || getPayloadData(parsed)?.agent
+              if (name) {
+                blocks.push({ type: 'subagent', content: SUBAGENT_LABELS[name] || name })
+                flush()
+              }
+              break
+            }
+            case 'subagent_end': {
+              flush()
+              break
+            }
+            case 'title_updated': {
+              queryClient.invalidateQueries({ queryKey: taskKeys.list(workspaceId) })
+              break
+            }
+            case 'error': {
+              setError(parsed.error || 'An error occurred')
+              break
+            }
+          }
+        }
+      }
+    },
+    [workspaceId, queryClient]
+  )
+
+  const finalize = useCallback(() => {
+    setIsSending(false)
+    abortControllerRef.current = null
+    chatBottomRef.current?.scrollIntoView({ behavior: 'smooth' })
+
+    const activeChatId = chatIdRef.current
+    if (activeChatId) {
+      queryClient.invalidateQueries({ queryKey: taskKeys.detail(activeChatId) })
+    }
+    queryClient.invalidateQueries({ queryKey: taskKeys.list(workspaceId) })
+  }, [workspaceId, queryClient])
+
+  useEffect(() => {
+    const activeStreamId = chatHistory?.activeStreamId
+    if (!activeStreamId || !appliedChatIdRef.current || sendingRef.current) return
+
+    const abortController = new AbortController()
+    abortControllerRef.current = abortController
+    setIsSending(true)
+
+    const assistantId = crypto.randomUUID()
+    setMessages((prev) => [
+      ...prev,
+      { id: assistantId, role: 'assistant' as const, content: '', contentBlocks: [] },
+    ])
+
+    const reconnect = async () => {
+      try {
+        const response = await fetch(`/api/copilot/chat/stream?streamId=${activeStreamId}&from=0`, {
+          signal: abortController.signal,
+        })
+        if (!response.ok || !response.body) return
+        await processSSEStream(response.body.getReader(), assistantId)
+      } catch (err) {
+        if (err instanceof Error && err.name === 'AbortError') return
+      } finally {
+        finalize()
+      }
+    }
+    reconnect()
+
+    return () => {
+      abortController.abort()
+      appliedChatIdRef.current = undefined
+    }
+  }, [chatHistory?.activeStreamId, processSSEStream, finalize])
+
+  const sendMessage = useCallback(
+    async (message: string) => {
+      if (!message.trim() || !workspaceId) return
+
+      abortControllerRef.current?.abort()
+
+      setError(null)
+      setIsSending(true)
+      sendingRef.current = true
+
+      const userMessageId = crypto.randomUUID()
+      const assistantId = crypto.randomUUID()
+
+      pendingUserMsgRef.current = { id: userMessageId, content: message }
+      streamIdRef.current = userMessageId
+
+      if (chatIdRef.current) {
+        queryClient.setQueryData<TaskChatHistory>(taskKeys.detail(chatIdRef.current), (old) =>
+          old
+            ? {
+                ...old,
+                messages: [
+                  ...old.messages,
+                  { id: userMessageId, role: 'user' as const, content: message },
+                ],
+                activeStreamId: userMessageId,
+              }
+            : undefined
+        )
+      }
+
+      setMessages((prev) => [
+        ...prev,
+        { id: userMessageId, role: 'user', content: message },
+        { id: assistantId, role: 'assistant', content: '', contentBlocks: [] },
+      ])
+
+      const abortController = new AbortController()
+      abortControllerRef.current = abortController
+
+      try {
+        const response = await fetch(MOTHERSHIP_CHAT_API_PATH, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            message,
+            workspaceId,
+            userMessageId,
+            createNewChat: !chatIdRef.current,
+            ...(chatIdRef.current ? { chatId: chatIdRef.current } : {}),
+          }),
+          signal: abortController.signal,
+        })
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}))
+          throw new Error(errorData.error || `Request failed: ${response.status}`)
+        }
+
+        if (!response.body) throw new Error('No response body')
+
+        await processSSEStream(response.body.getReader(), assistantId)
+      } catch (err) {
+        if (err instanceof Error && err.name === 'AbortError') return
+        setError(err instanceof Error ? err.message : 'Failed to send message')
+      } finally {
+        sendingRef.current = false
+        finalize()
+      }
+    },
+    [workspaceId, queryClient, processSSEStream, finalize]
+  )
+
+  const stopGeneration = useCallback(() => {
+    abortControllerRef.current?.abort()
+    setIsSending(false)
+  }, [])
+
+  return {
+    messages,
+    isSending,
+    error,
+    sendMessage,
+    stopGeneration,
+    chatBottomRef,
+  }
+}

apps/sim/app/workspace/[workspaceId]/home/layout.tsx

@@ -0,0 +1,3 @@
+export default function HomeLayout({ children }: { children: React.ReactNode }) {
+  return <div className='flex h-full flex-1 flex-col overflow-hidden'>{children}</div>
+}

apps/sim/app/workspace/[workspaceId]/home/page.tsx

@@ -0,0 +1,26 @@
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/auth'
+import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
+import { Home } from './home'
+
+interface HomePageProps {
+  params: Promise<{
+    workspaceId: string
+  }>
+}
+
+export default async function HomePage({ params }: HomePageProps) {
+  const { workspaceId } = await params
+  const session = await getSession()
+
+  if (!session?.user?.id) {
+    redirect('/')
+  }
+
+  const hasPermission = await verifyWorkspaceMembership(session.user.id, workspaceId)
+  if (!hasPermission) {
+    redirect('/')
+  }
+
+  return <Home key='home' />
+}

apps/sim/app/workspace/[workspaceId]/home/types.ts

@@ -0,0 +1,63 @@
+export type ToolCallStatus = 'executing' | 'success' | 'error'
+
+export interface ToolCallInfo {
+  id: string
+  name: string
+  status: ToolCallStatus
+  displayTitle?: string
+}
+
+export type ContentBlockType = 'text' | 'tool_call' | 'subagent'
+
+export interface ContentBlock {
+  type: ContentBlockType
+  content?: string
+  toolCall?: ToolCallInfo
+}
+
+export interface ChatMessage {
+  id: string
+  role: 'user' | 'assistant'
+  content: string
+  contentBlocks?: ContentBlock[]
+}
+
+export const SUBAGENT_LABELS: Record<string, string> = {
+  build: 'Building',
+  deploy: 'Deploying',
+  auth: 'Connecting credentials',
+  research: 'Researching',
+  knowledge: 'Managing knowledge base',
+  table: 'Managing tables',
+  custom_tool: 'Creating tool',
+  superagent: 'Executing action',
+  plan: 'Planning',
+  debug: 'Debugging',
+  edit: 'Editing workflow',
+} as const
+
+export interface SSEPayloadUI {
+  hidden?: boolean
+  title?: string
+  phaseLabel?: string
+}
+
+export interface SSEPayloadData {
+  name?: string
+  ui?: SSEPayloadUI
+  id?: string
+  agent?: string
+}
+
+export interface SSEPayload {
+  type: string
+  chatId?: string
+  data?: string | SSEPayloadData
+  content?: string
+  toolCallId?: string
+  toolName?: string
+  ui?: SSEPayloadUI
+  success?: boolean
+  error?: string
+  subagent?: string
+}

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

@@ -51,7 +51,8 @@ export function ActionBar({
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: 10 }}
       transition={{ duration: 0.2 }}
-      className={cn('-translate-x-1/2 fixed bottom-6 left-1/2 z-50 transform', className)}
+      className={cn('-translate-x-1/2 fixed bottom-6 z-50 transform', className)}
+      style={{ left: 'calc(50% + var(--sidebar-width, 0px) / 2)' }}
     >
       <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-[8px] py-[6px]'>
         <span className='px-[4px] text-[13px] text-[var(--text-secondary)]'>

apps/sim/app/workspace/[workspaceId]/knowledge/layout.tsx

@@ -1,10 +1,3 @@
-/**
- * Knowledge Base layout - applies sidebar padding for all knowledge routes.
- */
 export default function KnowledgeLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden pl-[var(--sidebar-width)]'>
-      {children}
-    </div>
-  )
+  return <div className='flex h-full flex-1 flex-col overflow-hidden'>{children}</div>
 }

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

@@ -12,12 +12,16 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
       <SettingsLoader />
       <ProviderModelsLoader />
       <GlobalCommandsProvider>
-        <div className='flex h-screen w-full bg-[var(--bg)]'>
+        <div className='flex h-screen w-full bg-[#F4F4F4] dark:bg-[var(--surface-1)]'>
           <WorkspacePermissionsProvider>
             <div className='shrink-0' suppressHydrationWarning>
               <Sidebar />
             </div>
-            {children}
+            <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
+              <div className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
+                {children}
+              </div>
+            </div>
           </WorkspacePermissionsProvider>
         </div>
       </GlobalCommandsProvider>

apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx

@@ -88,9 +88,11 @@ function WorkflowsListInner({
                   {/* Workflow name with color */}
                   <div className='flex w-[160px] flex-shrink-0 items-center gap-[8px] pr-[8px]'>
                     <div
-                      className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px]'
+                      className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
                       style={{
                         backgroundColor: workflowColor,
+                        borderColor: `${workflowColor}60`,
+                        backgroundClip: 'padding-box',
                       }}
                     />
                     <span className='min-w-0 truncate font-medium text-[12px] text-[var(--text-primary)]'>

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

@@ -408,14 +408,21 @@ export const LogDetails = memo(function LogDetails({
                       Workflow
                     </div>
                     <div className='flex min-w-0 items-center gap-[8px]'>
-                      <div
-                        className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px]'
-                        style={{
-                          backgroundColor:
-                            log.workflow?.color ||
-                            (!log.workflowId ? DELETED_WORKFLOW_COLOR : undefined),
-                        }}
-                      />
+                      {(() => {
+                        const c =
+                          log.workflow?.color ||
+                          (!log.workflowId ? DELETED_WORKFLOW_COLOR : undefined)
+                        return (
+                          <div
+                            className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
+                            style={{
+                              backgroundColor: c,
+                              borderColor: c ? `${c}60` : undefined,
+                              backgroundClip: 'padding-box',
+                            }}
+                          />
+                        )
+                      })()}
                       <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-secondary)]'>
                         {log.workflow?.name ||
                           (!log.workflowId ? DELETED_WORKFLOW_LABEL : 'Unknown')}

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

@@ -95,8 +95,12 @@ const LogRow = memo(
             className={`flex ${LOG_COLUMNS.workflow.width} ${LOG_COLUMNS.workflow.minWidth} items-center gap-[8px] pr-[8px]`}
           >
             <div
-              className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px]'
-              style={{ backgroundColor: workflowColor }}
+              className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
+              style={{
+                backgroundColor: workflowColor,
+                borderColor: `${workflowColor}60`,
+                backgroundClip: 'padding-box',
+              }}
             />
             <span
               className={cn(

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

@@ -104,20 +104,33 @@ const colorIconCache = new Map<string, React.ComponentType<{ className?: string
  * Uses a cache to ensure the same color always returns the same component reference,
  * which prevents unnecessary React reconciliation.
  * @param color - CSS color value for the icon background
+ * @param withRing - Whether to render the semi-transparent outer ring
  * @returns A React component that renders a colored square icon
  */
-function getColorIcon(color: string): React.ComponentType<{ className?: string }> {
-  const cached = colorIconCache.get(color)
+function getColorIcon(
+  color: string,
+  withRing = false
+): React.ComponentType<{ className?: string }> {
+  const cacheKey = withRing ? `${color}-ring` : color
+  const cached = colorIconCache.get(cacheKey)
   if (cached) return cached
 
   const ColorIcon = ({ className }: { className?: string }) => (
     <div
-      className={cn(className, 'flex-shrink-0 rounded-[3px]')}
-      style={{ backgroundColor: color, width: 10, height: 10 }}
+      className={cn(className, 'flex-shrink-0 rounded-[3px]', withRing && 'border-[1.5px]')}
+      style={{
+        backgroundColor: color,
+        width: 10,
+        height: 10,
+        ...(withRing && {
+          borderColor: `${color}60`,
+          backgroundClip: 'padding-box' as const,
+        }),
+      }}
     />
   )
-  ColorIcon.displayName = `ColorIcon(${color})`
-  colorIconCache.set(color, ColorIcon)
+  ColorIcon.displayName = `ColorIcon(${color}${withRing ? '-ring' : ''})`
+  colorIconCache.set(cacheKey, ColorIcon)
   return ColorIcon
 }
 
@@ -248,7 +261,7 @@ export const LogsToolbar = memo(function LogsToolbar({
   }, [selectedStatuses])
 
   const workflowOptions: ComboboxOption[] = useMemo(
-    () => workflows.map((w) => ({ value: w.id, label: w.name, icon: getColorIcon(w.color) })),
+    () => workflows.map((w) => ({ value: w.id, label: w.name, icon: getColorIcon(w.color, true) })),
     [workflows]
   )
 
@@ -526,8 +539,12 @@ export const LogsToolbar = memo(function LogsToolbar({
                       <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
                         {selectedWorkflow && (
                           <div
-                            className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px]'
-                            style={{ backgroundColor: selectedWorkflow.color }}
+                            className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px] border-[1.5px]'
+                            style={{
+                              backgroundColor: selectedWorkflow.color,
+                              borderColor: `${selectedWorkflow.color}60`,
+                              backgroundClip: 'padding-box',
+                            }}
                           />
                         )}
                         <span className='truncate'>{workflowDisplayLabel}</span>
@@ -653,8 +670,12 @@ export const LogsToolbar = memo(function LogsToolbar({
                 <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
                   {selectedWorkflow && (
                     <div
-                      className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px]'
-                      style={{ backgroundColor: selectedWorkflow.color }}
+                      className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px] border-[1.5px]'
+                      style={{
+                        backgroundColor: selectedWorkflow.color,
+                        borderColor: `${selectedWorkflow.color}60`,
+                        backgroundClip: 'padding-box',
+                      }}
                     />
                   )}
                   <span className='truncate'>{workflowDisplayLabel}</span>

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

@@ -1,7 +1,3 @@
 export default function LogsLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className='flex h-full flex-1 flex-col overflow-hidden pl-[var(--sidebar-width)]'>
-      {children}
-    </div>
-  )
+  return <div className='flex h-full flex-1 flex-col overflow-hidden'>{children}</div>
 }

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

@@ -6,5 +6,5 @@ export default async function WorkspacePage({
   params: Promise<{ workspaceId: string }>
 }) {
   const { workspaceId } = await params
-  redirect(`/workspace/${workspaceId}/w`)
+  redirect(`/workspace/${workspaceId}/home`)
 }

apps/sim/app/workspace/[workspaceId]/settings/[section]/page.tsx

@@ -0,0 +1,28 @@
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/auth'
+import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
+import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
+import { SettingsPage } from './settings-page'
+
+interface SettingsSectionPageProps {
+  params: Promise<{
+    workspaceId: string
+    section: string
+  }>
+}
+
+export default async function SettingsSectionPage({ params }: SettingsSectionPageProps) {
+  const { workspaceId, section } = await params
+  const session = await getSession()
+
+  if (!session?.user?.id) {
+    redirect('/')
+  }
+
+  const hasPermission = await verifyWorkspaceMembership(session.user.id, workspaceId)
+  if (!hasPermission) {
+    redirect('/')
+  }
+
+  return <SettingsPage section={section as SettingsSection} />
+}

apps/sim/app/workspace/[workspaceId]/settings/[section]/settings-page.tsx

@@ -0,0 +1,63 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import {
+  ApiKeys,
+  BYOK,
+  Copilot,
+  CredentialSets,
+  Credentials,
+  CustomTools,
+  Debug,
+  General,
+  MCP,
+  Skills,
+  Subscription,
+  TeamManagement,
+  TemplateProfile,
+  WorkflowMcpServers,
+} from '@/app/workspace/[workspaceId]/settings/components'
+import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
+import {
+  allNavigationItems,
+  isBillingEnabled,
+} from '@/app/workspace/[workspaceId]/settings/navigation'
+import { AccessControl } from '@/ee/access-control/components/access-control'
+import { SSO } from '@/ee/sso/components/sso-settings'
+
+interface SettingsPageProps {
+  section: SettingsSection
+}
+
+export function SettingsPage({ section }: SettingsPageProps) {
+  const searchParams = useSearchParams()
+  const mcpServerId = searchParams.get('mcpServerId')
+
+  const effectiveSection =
+    !isBillingEnabled && (section === 'subscription' || section === 'team') ? 'general' : section
+
+  const label =
+    allNavigationItems.find((item) => item.id === effectiveSection)?.label ?? effectiveSection
+
+  return (
+    <div>
+      <h2 className='mb-[28px] font-medium text-[22px] text-[var(--text-primary)]'>{label}</h2>
+      {effectiveSection === 'general' && <General />}
+      {effectiveSection === 'credentials' && <Credentials />}
+      {effectiveSection === 'template-profile' && <TemplateProfile />}
+      {effectiveSection === 'credential-sets' && <CredentialSets />}
+      {effectiveSection === 'access-control' && <AccessControl />}
+      {effectiveSection === 'apikeys' && <ApiKeys />}
+      {isBillingEnabled && effectiveSection === 'subscription' && <Subscription />}
+      {isBillingEnabled && effectiveSection === 'team' && <TeamManagement />}
+      {effectiveSection === 'sso' && <SSO />}
+      {effectiveSection === 'byok' && <BYOK />}
+      {effectiveSection === 'copilot' && <Copilot />}
+      {effectiveSection === 'mcp' && <MCP initialServerId={mcpServerId} />}
+      {effectiveSection === 'custom-tools' && <CustomTools />}
+      {effectiveSection === 'skills' && <Skills />}
+      {effectiveSection === 'workflow-mcp-servers' && <WorkflowMcpServers />}
+      {effectiveSection === 'debug' && <Debug />}
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx

@@ -29,11 +29,7 @@ import { CreateApiKeyModal } from './components'
 
 const logger = createLogger('ApiKeys')
 
-interface ApiKeysProps {
-  onOpenChange?: (open: boolean) => void
-}
-
-export function ApiKeys({ onOpenChange }: ApiKeysProps) {
+export function ApiKeys() {
   const { data: session } = useSession()
   const userId = session?.user?.id
   const params = useParams()
@@ -113,10 +109,6 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
     }
   }
 
-  const handleModalClose = (open: boolean) => {
-    onOpenChange?.(open)
-  }
-
   useEffect(() => {
     if (shouldScrollToBottom && scrollContainerRef.current) {
       scrollContainerRef.current.scrollTo({
@@ -133,7 +125,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[16px]'>
+    <div className='flex h-full flex-col gap-[18px]'>
       {/* Search Input and Create Button */}
       <div className='flex items-center gap-[8px]'>
         <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
@@ -167,10 +159,10 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
       {/* Scrollable Content */}
       <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
         {isLoading ? (
-          <div className='flex flex-col gap-[16px]'>
+          <div className='flex flex-col gap-[18px]'>
             <div className='flex flex-col gap-[8px]'>
               <Skeleton className='h-5 w-[70px]' />
-              <div className='text-[13px] text-[var(--text-muted)]'>
+              <div className='text-[14px] text-[var(--text-muted)]'>
                 <Skeleton className='h-5 w-[140px]' />
               </div>
             </div>
@@ -181,20 +173,20 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
             </div>
           </div>
         ) : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
-          <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
             Click "Create" above to get started
           </div>
         ) : (
-          <div className='flex flex-col gap-[16px]'>
+          <div className='flex flex-col gap-[18px]'>
             <>
               {/* Workspace section */}
               {!searchTerm.trim() ? (
                 <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
                     Workspace
                   </div>
                   {workspaceKeys.length === 0 ? (
-                    <div className='text-[13px] text-[var(--text-muted)]'>
+                    <div className='text-[14px] text-[var(--text-muted)]'>
                       No workspace Sim keys yet
                     </div>
                   ) : (
@@ -202,14 +194,14 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                       <div key={key.id} className='flex items-center justify-between gap-[12px]'>
                         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
                           <div className='flex items-center gap-[6px]'>
-                            <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                            <span className='max-w-[280px] truncate font-medium text-[15px]'>
                               {key.name}
                             </span>
-                            <span className='text-[13px] text-[var(--text-secondary)]'>
+                            <span className='text-[14px] text-[var(--text-secondary)]'>
                               (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                             </span>
                           </div>
-                          <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                          <p className='truncate text-[14px] text-[var(--text-muted)]'>
                             {key.displayKey || key.key}
                           </p>
                         </div>
@@ -230,21 +222,21 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                 </div>
               ) : filteredWorkspaceKeys.length > 0 ? (
                 <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
                     Workspace
                   </div>
                   {filteredWorkspaceKeys.map(({ key }) => (
                     <div key={key.id} className='flex items-center justify-between gap-[12px]'>
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
                         <div className='flex items-center gap-[6px]'>
-                          <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                          <span className='max-w-[280px] truncate font-medium text-[15px]'>
                             {key.name}
                           </span>
-                          <span className='text-[13px] text-[var(--text-secondary)]'>
+                          <span className='text-[14px] text-[var(--text-secondary)]'>
                             (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                           </span>
                         </div>
-                        <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
                           {key.displayKey || key.key}
                         </p>
                       </div>
@@ -267,7 +259,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
               {/* Personal section */}
               {(!searchTerm.trim() || filteredPersonalKeys.length > 0) && (
                 <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
                     Personal
                   </div>
                   {filteredPersonalKeys.map(({ key }) => {
@@ -277,14 +269,14 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                         <div className='flex items-center justify-between gap-[12px]'>
                           <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
                             <div className='flex items-center gap-[6px]'>
-                              <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                              <span className='max-w-[280px] truncate font-medium text-[15px]'>
                                 {key.name}
                               </span>
-                              <span className='text-[13px] text-[var(--text-secondary)]'>
+                              <span className='text-[14px] text-[var(--text-secondary)]'>
                                 (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                               </span>
                             </div>
-                            <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                            <p className='truncate text-[14px] text-[var(--text-muted)]'>
                               {key.displayKey || key.key}
                             </p>
                           </div>
@@ -300,7 +292,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                           </Button>
                         </div>
                         {isConflict && (
-                          <div className='text-[12px] text-[var(--text-error)] leading-tight'>
+                          <div className='text-[13px] text-[var(--text-error)] leading-tight'>
                             Workspace Sim key with the same name overrides this. Rename your
                             personal key to use it.
                           </div>
@@ -316,7 +308,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                 filteredPersonalKeys.length === 0 &&
                 filteredWorkspaceKeys.length === 0 &&
                 (personalKeys.length > 0 || workspaceKeys.length > 0) && (
-                  <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
                     No Sim keys found matching "{searchTerm}"
                   </div>
                 )}
@@ -330,7 +322,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
         <Tooltip.Provider delayDuration={150}>
           <div className='mt-auto flex items-center justify-between'>
             <div className='flex items-center gap-[8px]'>
-              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
                 Allow personal Sim keys
               </span>
               <Tooltip.Root>
@@ -342,7 +334,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
                     <Info className='h-[12px] w-[12px]' strokeWidth={2} />
                   </button>
                 </Tooltip.Trigger>
-                <Tooltip.Content side='top' className='max-w-xs text-[12px]'>
+                <Tooltip.Content side='top' className='max-w-xs text-[13px]'>
                   Allow collaborators to create and use their own keys with billing charged to them.
                 </Tooltip.Content>
               </Tooltip.Root>
@@ -385,7 +377,7 @@ export function ApiKeys({ onOpenChange }: ApiKeysProps) {
         <ModalContent size='sm'>
           <ModalHeader>Delete Sim key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               Deleting{' '}
               <span className='font-medium text-[var(--text-primary)]'>{deleteKey?.name}</span> will
               immediately revoke access for any integrations using it.{' '}

apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx

@@ -112,19 +112,19 @@ export function CreateApiKeyModal({
     <>
       {/* Create API Key Dialog */}
       <Modal open={open} onOpenChange={onOpenChange}>
-        <ModalContent size='sm'>
+        <ModalContent size='md'>
           <ModalHeader>Create new Sim key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               {keyType === 'workspace'
                 ? "This key will have access to all workflows in this workspace. Make sure to copy it after creation as you won't be able to see it again."
                 : "This key will have access to your personal workflows. Make sure to copy it after creation as you won't be able to see it again."}
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[16px]'>
+            <div className='mt-[16px] flex flex-col gap-[18px]'>
               {canManageWorkspaceKeys && (
                 <div className='flex flex-col gap-[8px]'>
-                  <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
                     Sim Key Type
                   </p>
                   <ButtonGroup
@@ -142,7 +142,7 @@ export function CreateApiKeyModal({
                 </div>
               )}
               <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
                   Enter a name for your Sim key to help you identify it later.
                 </p>
                 {/* Hidden decoy fields to prevent browser autofill */}
@@ -176,7 +176,7 @@ export function CreateApiKeyModal({
                   data-form-type='other'
                 />
                 {createError && (
-                  <p className='text-[12px] text-[var(--text-error)] leading-tight'>
+                  <p className='text-[13px] text-[var(--text-error)] leading-tight'>
                     {createError}
                   </p>
                 )}
@@ -218,7 +218,7 @@ export function CreateApiKeyModal({
         <ModalContent size='sm'>
           <ModalHeader>Your Sim key has been created</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               This is the only time you will see your Sim key.{' '}
               <span className='font-semibold text-[var(--text-primary)]'>
                 Copy it now and store it securely.
@@ -228,7 +228,7 @@ export function CreateApiKeyModal({
             {newKey && (
               <div className='relative mt-[10px]'>
                 <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
-                  <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                  <code className='flex-1 truncate font-mono text-[14px] text-[var(--text-primary)]'>
                     {newKey.key}
                   </code>
                 </div>

apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx

@@ -140,8 +140,8 @@ export function BYOK() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[16px]'>
-        <p className='text-[13px] text-[var(--text-secondary)]'>
+      <div className='flex h-full flex-col gap-[18px]'>
+        <p className='text-[14px] text-[var(--text-secondary)]'>
           Use your own API keys for hosted model providers.
         </p>
 
@@ -165,8 +165,8 @@ export function BYOK() {
                         <Icon className='h-4 w-4' />
                       </div>
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <span className='font-medium text-[14px]'>{provider.name}</span>
-                        <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                        <span className='font-medium text-[15px]'>{provider.name}</span>
+                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
                           {provider.description}
                         </p>
                       </div>
@@ -212,7 +212,7 @@ export function BYOK() {
           }
         }}
       >
-        <ModalContent className='w-[420px]'>
+        <ModalContent size='md'>
           <ModalHeader>
             {editingProvider && (
               <>
@@ -222,13 +222,13 @@ export function BYOK() {
             )}
           </ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               This key will be used for all {PROVIDERS.find((p) => p.id === editingProvider)?.name}{' '}
               requests in this workspace. Your key is encrypted and stored securely.
             </p>
 
             <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
                 Enter your API key
               </p>
               {/* Hidden decoy fields to prevent browser autofill */}
@@ -276,7 +276,7 @@ export function BYOK() {
                 </Button>
               </div>
               {error && (
-                <p className='text-[12px] text-[var(--text-error)] leading-tight'>{error}</p>
+                <p className='text-[13px] text-[var(--text-error)] leading-tight'>{error}</p>
               )}
             </div>
           </ModalBody>
@@ -308,7 +308,7 @@ export function BYOK() {
         <ModalContent size='sm'>
           <ModalHeader>Delete API Key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               Are you sure you want to delete the{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {PROVIDERS.find((p) => p.id === deleteConfirmProvider)?.name}

apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useMemo, useState } from 'react'
+// import { useParams } from 'next/navigation'
 import { createLogger } from '@sim/logger'
 import { Check, Copy, Plus, Search } from 'lucide-react'
 import {
@@ -11,6 +12,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
+  // Switch,
 } from '@/components/emcn'
 import { Input, Skeleton } from '@/components/ui'
 import { formatDate } from '@/lib/core/utils/formatting'
@@ -21,6 +23,8 @@ import {
   useGenerateCopilotKey,
 } from '@/hooks/queries/copilot-keys'
 
+// import { useMcpServers, useUpdateMcpServer } from '@/hooks/queries/mcp'
+
 const logger = createLogger('CopilotSettings')
 
 /**
@@ -45,11 +49,29 @@ function CopilotKeySkeleton() {
  * Copilot Keys management component for handling API keys used with the Copilot feature.
  * Provides functionality to create, view, and delete copilot API keys.
  */
+// function McpServerSkeleton() {
+//   return (
+//     <div className='flex items-center justify-between gap-[12px]'>
+//       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+//         <Skeleton className='h-5 w-[120px]' />
+//         <Skeleton className='h-5 w-[80px]' />
+//       </div>
+//       <Skeleton className='h-5 w-[36px] rounded-full' />
+//     </div>
+//   )
+// }
+
 export function Copilot() {
+  // const params = useParams()
+  // const workspaceId = params.workspaceId as string
+
   const { data: keys = [], isLoading } = useCopilotKeys()
   const generateKey = useGenerateCopilotKey()
   const deleteKeyMutation = useDeleteCopilotKey()
 
+  // const { data: mcpServers = [], isLoading: mcpLoading } = useMcpServers(workspaceId)
+  // const updateServer = useUpdateMcpServer()
+
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
   const [newKeyName, setNewKeyName] = useState('')
   const [newKey, setNewKey] = useState<string | null>(null)
@@ -60,6 +82,20 @@ export function Copilot() {
   const [searchTerm, setSearchTerm] = useState('')
   const [createError, setCreateError] = useState<string | null>(null)
 
+  // const enabledServers = mcpServers.filter((s) => s.enabled)
+
+  // const handleToggleCopilot = async (serverId: string, enabled: boolean) => {
+  //   try {
+  //     await updateServer.mutateAsync({
+  //       workspaceId,
+  //       serverId,
+  //       updates: { copilotEnabled: enabled },
+  //     })
+  //   } catch (error) {
+  //     logger.error('Failed to toggle MCP server for Mothership', { error })
+  //   }
+  // }
+
   const filteredKeys = useMemo(() => {
     if (!searchTerm.trim()) return keys
     const term = searchTerm.toLowerCase()
@@ -127,7 +163,42 @@ export function Copilot() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex h-full flex-col gap-[18px]'>
+        {/* MCP Tools Section — uncomment when ready to allow users to toggle MCP servers for Mothership
+        <div className='flex flex-col gap-[8px]'>
+          <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            MCP Tools
+          </div>
+          {mcpLoading ? (
+            <div className='flex flex-col gap-[8px]'>
+              <McpServerSkeleton />
+              <McpServerSkeleton />
+            </div>
+          ) : enabledServers.length === 0 ? (
+            <div className='text-[14px] text-[var(--text-muted)]'>
+              No MCP servers configured. Add servers in the MCP Tools tab.
+            </div>
+          ) : (
+            <div className='flex flex-col gap-[8px]'>
+              {enabledServers.map((server) => (
+                <div key={server.id} className='flex items-center justify-between gap-[12px]'>
+                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                    <span className='truncate font-medium text-[15px]'>{server.name}</span>
+                    <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                      {server.toolCount ?? 0} tool{server.toolCount === 1 ? '' : 's'}
+                    </p>
+                  </div>
+                  <Switch
+                    checked={server.copilotEnabled ?? false}
+                    onCheckedChange={(checked) => handleToggleCopilot(server.id, checked)}
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+        */}
+
         {/* Search Input and Create Button */}
         <div className='flex items-center gap-[8px]'>
           <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
@@ -164,7 +235,7 @@ export function Copilot() {
               <CopilotKeySkeleton />
             </div>
           ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
               Click "Create" above to get started
             </div>
           ) : (
@@ -173,14 +244,14 @@ export function Copilot() {
                 <div key={key.id} className='flex items-center justify-between gap-[12px]'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
                     <div className='flex items-center gap-[6px]'>
-                      <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                      <span className='max-w-[280px] truncate font-medium text-[15px]'>
                         {key.name || 'Unnamed Key'}
                       </span>
-                      <span className='text-[13px] text-[var(--text-secondary)]'>
+                      <span className='text-[14px] text-[var(--text-secondary)]'>
                         (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                       </span>
                     </div>
-                    <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                    <p className='truncate text-[14px] text-[var(--text-muted)]'>
                       {key.displayKey}
                     </p>
                   </div>
@@ -197,7 +268,7 @@ export function Copilot() {
                 </div>
               ))}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
                   No API keys found matching "{searchTerm}"
                 </div>
               )}
@@ -211,13 +282,13 @@ export function Copilot() {
         <ModalContent size='sm'>
           <ModalHeader>Create new API key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               This key will allow access to Copilot features. Make sure to copy it after creation as
               you won't be able to see it again.
             </p>
 
             <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
                 Enter a name for your API key to help you identify it later.
               </p>
               <EmcnInput
@@ -231,7 +302,7 @@ export function Copilot() {
                 autoFocus
               />
               {createError && (
-                <p className='text-[12px] text-[var(--text-error)] leading-tight'>{createError}</p>
+                <p className='text-[13px] text-[var(--text-error)] leading-tight'>{createError}</p>
               )}
             </div>
           </ModalBody>
@@ -273,7 +344,7 @@ export function Copilot() {
         <ModalContent size='sm'>
           <ModalHeader>Your API key has been created</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               This is the only time you will see your API key.{' '}
               <span className='font-semibold text-[var(--text-primary)]'>
                 Copy it now and store it securely.
@@ -283,7 +354,7 @@ export function Copilot() {
             {newKey && (
               <div className='relative mt-[10px]'>
                 <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
-                  <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                  <code className='flex-1 truncate font-mono text-[14px] text-[var(--text-primary)]'>
                     {newKey}
                   </code>
                 </div>
@@ -310,7 +381,7 @@ export function Copilot() {
         <ModalContent size='sm'>
           <ModalHeader>Delete API key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               Deleting{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {deleteKey?.name || 'Unnamed Key'}

apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx

@@ -52,7 +52,7 @@ const logger = createLogger('EmailPolling')
 
 function CredentialSetsSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[16px]'>
+    <div className='flex h-full flex-col gap-[18px]'>
       <div className='flex flex-col gap-[8px]'>
         <Skeleton className='h-[14px] w-[100px]' />
         <div className='flex items-center justify-between'>
@@ -441,26 +441,26 @@ export function CredentialSets() {
 
     return (
       <>
-        <div className='flex h-full flex-col gap-[16px]'>
+        <div className='flex h-full flex-col gap-[18px]'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[16px]'>
-              <div className='flex items-center gap-[16px]'>
+            <div className='flex flex-col gap-[18px]'>
+              <div className='flex items-center gap-[18px]'>
                 <div className='flex items-center gap-[8px]'>
-                  <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>
                     Group Name
                   </span>
-                  <span className='text-[13px] text-[var(--text-secondary)]'>
+                  <span className='text-[14px] text-[var(--text-secondary)]'>
                     {viewingSet.name}
                   </span>
                 </div>
                 <div className='h-4 w-px bg-[var(--border)]' />
                 <div className='flex items-center gap-[8px]'>
-                  <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>
                     Provider
                   </span>
                   <div className='flex items-center gap-[6px]'>
                     {getProviderIcon(viewingSet.providerId)}
-                    <span className='text-[13px] text-[var(--text-secondary)]'>
+                    <span className='text-[14px] text-[var(--text-secondary)]'>
                       {getProviderDisplayName(viewingSet.providerId as PollingProvider)}
                     </span>
                   </div>
@@ -487,14 +487,14 @@ export function CredentialSets() {
                     {createInvitation.isPending ? 'Sending...' : 'Invite'}
                   </Button>
                 </div>
-                {emailError && <p className='text-[12px] text-[var(--text-error)]'>{emailError}</p>}
+                {emailError && <p className='text-[13px] text-[var(--text-error)]'>{emailError}</p>}
               </div>
 
-              <div className='flex flex-col gap-[16px]'>
-                <h4 className='font-medium text-[14px] text-[var(--text-primary)]'>Members</h4>
+              <div className='flex flex-col gap-[18px]'>
+                <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>Members</h4>
 
                 {membersLoading || pendingInvitationsLoading ? (
-                  <div className='flex flex-col gap-[16px]'>
+                  <div className='flex flex-col gap-[18px]'>
                     {[1, 2].map((i) => (
                       <div key={i} className='flex items-center justify-between'>
                         <div className='flex items-center gap-[12px]'>
@@ -508,11 +508,11 @@ export function CredentialSets() {
                     ))}
                   </div>
                 ) : totalCount === 0 ? (
-                  <p className='text-[13px] text-[var(--text-muted)]'>
+                  <p className='text-[14px] text-[var(--text-muted)]'>
                     No members yet. Send invitations above.
                   </p>
                 ) : (
-                  <div className='flex flex-col gap-[16px]'>
+                  <div className='flex flex-col gap-[18px]'>
                     {activeMembers.map((member) => {
                       const name = member.userName || 'Unknown'
                       const avatarInitial = name.charAt(0).toUpperCase()
@@ -536,7 +536,7 @@ export function CredentialSets() {
 
                             <div className='min-w-0'>
                               <div className='flex items-center gap-[8px]'>
-                                <span className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                                <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
                                   {name}
                                 </span>
                                 {member.credentials.length === 0 && (
@@ -545,7 +545,7 @@ export function CredentialSets() {
                                   </Badge>
                                 )}
                               </div>
-                              <div className='truncate text-[12px] text-[var(--text-muted)]'>
+                              <div className='truncate text-[13px] text-[var(--text-muted)]'>
                                 {member.userEmail}
                               </div>
                             </div>
@@ -584,14 +584,14 @@ export function CredentialSets() {
 
                             <div className='min-w-0'>
                               <div className='flex items-center gap-[8px]'>
-                                <span className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                                <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
                                   {emailPrefix}
                                 </span>
                                 <Badge variant='gray-secondary' size='sm'>
                                   Pending
                                 </Badge>
                               </div>
-                              <div className='truncate text-[12px] text-[var(--text-muted)]'>
+                              <div className='truncate text-[13px] text-[var(--text-muted)]'>
                                 {email}
                               </div>
                             </div>
@@ -645,7 +645,7 @@ export function CredentialSets() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex h-full flex-col gap-[18px]'>
         <div className='flex items-center gap-[8px]'>
           <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
@@ -669,19 +669,19 @@ export function CredentialSets() {
 
         <div className='relative min-h-0 flex-1 overflow-y-auto'>
           {hasNoContent && !canManageCredentialSets ? (
-            <div className='absolute inset-0 flex items-center justify-center text-[13px] text-[var(--text-muted)]'>
+            <div className='absolute inset-0 flex items-center justify-center text-[14px] text-[var(--text-muted)]'>
               You're not a member of any polling groups yet. When someone invites you, it will
               appear here.
             </div>
           ) : hasNoResults ? (
-            <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+            <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
               No results found matching "{searchTerm}"
             </div>
           ) : (
-            <div className='flex flex-col gap-[16px]'>
+            <div className='flex flex-col gap-[18px]'>
               {filteredInvitations.length > 0 && (
                 <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
                     Pending Invitations
                   </div>
                   {filteredInvitations.map((invitation) => (
@@ -694,10 +694,10 @@ export function CredentialSets() {
                           {getProviderIcon(invitation.providerId)}
                         </div>
                         <div className='flex flex-col'>
-                          <span className='font-medium text-[14px]'>
+                          <span className='font-medium text-[15px]'>
                             {invitation.credentialSetName}
                           </span>
-                          <span className='text-[13px] text-[var(--text-muted)]'>
+                          <span className='text-[14px] text-[var(--text-muted)]'>
                             {invitation.organizationName}
                           </span>
                         </div>
@@ -716,7 +716,7 @@ export function CredentialSets() {
 
               {filteredMemberships.length > 0 && (
                 <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
                     My Memberships
                   </div>
                   {filteredMemberships.map((membership) => (
@@ -729,10 +729,10 @@ export function CredentialSets() {
                           {getProviderIcon(membership.providerId)}
                         </div>
                         <div className='flex flex-col'>
-                          <span className='font-medium text-[14px]'>
+                          <span className='font-medium text-[15px]'>
                             {membership.credentialSetName}
                           </span>
-                          <span className='text-[13px] text-[var(--text-muted)]'>
+                          <span className='text-[14px] text-[var(--text-muted)]'>
                             {membership.organizationName}
                           </span>
                         </div>
@@ -756,7 +756,7 @@ export function CredentialSets() {
                   ownedSetsLoading ||
                   (!searchTerm.trim() && ownedSets.length === 0)) && (
                   <div className='flex flex-col gap-[8px]'>
-                    <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
                       Manage
                     </div>
                     {ownedSetsLoading ? (
@@ -774,7 +774,7 @@ export function CredentialSets() {
                         ))}
                       </>
                     ) : !searchTerm.trim() && ownedSets.length === 0 ? (
-                      <div className='text-[13px] text-[var(--text-muted)]'>
+                      <div className='text-[14px] text-[var(--text-muted)]'>
                         No polling groups created yet
                       </div>
                     ) : (
@@ -785,8 +785,8 @@ export function CredentialSets() {
                               {getProviderIcon(set.providerId)}
                             </div>
                             <div className='flex flex-col'>
-                              <span className='font-medium text-[14px]'>{set.name}</span>
-                              <span className='text-[13px] text-[var(--text-muted)]'>
+                              <span className='font-medium text-[15px]'>{set.name}</span>
+                              <span className='text-[14px] text-[var(--text-muted)]'>
                                 {set.memberCount} member{set.memberCount !== 1 ? 's' : ''}
                               </span>
                             </div>
@@ -844,7 +844,7 @@ export function CredentialSets() {
                     variant={newSetProvider === 'google-email' ? 'active' : 'default'}
                     onClick={() => setNewSetProvider('google-email')}
                     className={cn(
-                      'rounded-r-none px-[8px] py-[4px] text-[12px]',
+                      'rounded-r-none px-[8px] py-[4px] text-[13px]',
                       newSetProvider === 'google-email' &&
                         'bg-[var(--border-1)] hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
                     )}
@@ -855,7 +855,7 @@ export function CredentialSets() {
                     variant={newSetProvider === 'outlook' ? 'active' : 'default'}
                     onClick={() => setNewSetProvider('outlook')}
                     className={cn(
-                      'rounded-l-none px-[8px] py-[4px] text-[12px]',
+                      'rounded-l-none px-[8px] py-[4px] text-[13px]',
                       newSetProvider === 'outlook' &&
                         'bg-[var(--border-1)] hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
                     )}
@@ -867,7 +867,7 @@ export function CredentialSets() {
                   Members will connect their {getProviderDisplayName(newSetProvider)} account
                 </p>
               </div>
-              {createError && <p className='text-[12px] text-[var(--text-error)]'>{createError}</p>}
+              {createError && <p className='text-[13px] text-[var(--text-error)]'>{createError}</p>}
             </div>
           </ModalBody>
           <ModalFooter>
@@ -889,7 +889,7 @@ export function CredentialSets() {
         <ModalContent size='sm'>
           <ModalHeader>Leave Polling Group</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               Are you sure you want to leave{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {leavingMembership?.name}
@@ -916,7 +916,7 @@ export function CredentialSets() {
         <ModalContent size='sm'>
           <ModalHeader>Delete Polling Group</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               Are you sure you want to delete{' '}
               <span className='font-medium text-[var(--text-primary)]'>{deletingSet?.name}</span>?{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>

apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx

@@ -58,7 +58,6 @@ import {
   useOAuthConnections,
 } from '@/hooks/queries/oauth-connections'
 import { useWorkspacePermissionsQuery } from '@/hooks/queries/workspace'
-import { useSettingsModalStore } from '@/stores/modals/settings/store'
 
 const logger = createLogger('CredentialsManager')
 
@@ -175,11 +174,7 @@ function CredentialSkeleton() {
   )
 }
 
-interface CredentialsManagerProps {
-  onOpenChange?: (open: boolean) => void
-}
-
-export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
+export function CredentialsManager() {
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
 
@@ -210,9 +205,6 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
   const [showDeleteConfirmDialog, setShowDeleteConfirmDialog] = useState(false)
   const [deleteError, setDeleteError] = useState<string | null>(null)
   const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
-  const [unsavedChangesAlertSource, setUnsavedChangesAlertSource] = useState<
-    'back' | 'modal-close'
-  >('back')
   const { data: session } = useSession()
   const currentUserId = session?.user?.id || ''
 
@@ -444,7 +436,6 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
 
   const handleBackAttempt = useCallback(() => {
     if (isDetailsDirty && !isSavingDetails) {
-      setUnsavedChangesAlertSource('back')
       setShowUnsavedChangesAlert(true)
     } else {
       setSelectedCredentialId(null)
@@ -459,38 +450,15 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
     setSelectedCredentialId(null)
   }, [selectedEnvCurrentValue, selectedCredential])
 
-  const handleDiscardAndClose = useCallback(() => {
-    setShowUnsavedChangesAlert(false)
-    useSettingsModalStore.getState().setHasUnsavedChanges(false)
-    useSettingsModalStore.getState().setOnCloseAttempt(null)
-    onOpenChange?.(false)
-  }, [onOpenChange])
-
-  const handleCloseAttemptFromModal = useCallback(() => {
-    if (selectedCredentialId && isDetailsDirty && !isSavingDetails) {
-      setUnsavedChangesAlertSource('modal-close')
-      setShowUnsavedChangesAlert(true)
-    }
-  }, [selectedCredentialId, isDetailsDirty, isSavingDetails])
-
   useEffect(() => {
-    const store = useSettingsModalStore.getState()
+    const handler = (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+    }
     if (selectedCredentialId && isDetailsDirty) {
-      store.setHasUnsavedChanges(true)
-      store.setOnCloseAttempt(handleCloseAttemptFromModal)
-    } else {
-      store.setHasUnsavedChanges(false)
-      store.setOnCloseAttempt(null)
+      window.addEventListener('beforeunload', handler)
     }
-  }, [selectedCredentialId, isDetailsDirty, handleCloseAttemptFromModal])
-
-  useEffect(() => {
-    return () => {
-      const store = useSettingsModalStore.getState()
-      store.setHasUnsavedChanges(false)
-      store.setOnCloseAttempt(null)
-    }
-  }, [])
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [selectedCredentialId, isDetailsDirty])
 
   const applyPendingCredentialCreateRequest = useCallback(
     (request: PendingCredentialCreateRequest) => {
@@ -1359,13 +1327,13 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
                     >
                       <ButtonGroupItem
                         value='workspace'
-                        className='h-[28px] min-w-[80px] px-[10px] py-0 text-[12px]'
+                        className='h-[28px] min-w-[80px] px-[10px] py-0 text-[13px]'
                       >
                         Workspace
                       </ButtonGroupItem>
                       <ButtonGroupItem
                         value='personal'
-                        className='h-[28px] min-w-[72px] px-[10px] py-0 text-[12px]'
+                        className='h-[28px] min-w-[72px] px-[10px] py-0 text-[13px]'
                       >
                         Personal
                       </ButtonGroupItem>
@@ -1448,7 +1416,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
           {credentialToDelete?.type === 'oauth' ? 'Disconnect Secret' : 'Delete Secret'}
         </ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-secondary)]'>
+          <p className='text-[13px] text-[var(--text-secondary)]'>
             Are you sure you want to{' '}
             {credentialToDelete?.type === 'oauth' ? 'disconnect' : 'delete'}{' '}
             <span className='font-medium text-[var(--text-primary)]'>
@@ -1460,7 +1428,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
             <div className='mt-[12px] rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
               <div className='flex items-start gap-[10px]'>
                 <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
-                <p className='text-[12px] text-red-700 dark:text-red-300'>{deleteError}</p>
+                <p className='text-[13px] text-red-700 dark:text-red-300'>{deleteError}</p>
               </div>
             </div>
           )}
@@ -1490,7 +1458,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
       <ModalContent size='sm'>
         <ModalHeader>Unsaved Changes</ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-secondary)]'>
+          <p className='text-[13px] text-[var(--text-secondary)]'>
             You have unsaved changes. Are you sure you want to discard them?
           </p>
         </ModalBody>
@@ -1498,14 +1466,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
           <Button variant='default' onClick={() => setShowUnsavedChangesAlert(false)}>
             Keep Editing
           </Button>
-          <Button
-            variant='destructive'
-            onClick={
-              unsavedChangesAlertSource === 'modal-close'
-                ? handleDiscardAndClose
-                : handleDiscardChanges
-            }
-          >
+          <Button variant='destructive' onClick={handleDiscardChanges}>
             Discard Changes
           </Button>
         </ModalFooter>
@@ -1516,9 +1477,9 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
   if (selectedCredential) {
     return (
       <>
-        <div className='flex h-full flex-col gap-[16px]'>
+        <div className='flex h-full flex-col gap-[18px]'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[16px]'>
+            <div className='flex flex-col gap-[18px]'>
               {selectedCredential.type === 'oauth' ? (
                 <div className='rounded-[8px] border border-[var(--border-1)] p-[10px]'>
                   <div className='flex items-center justify-between gap-[12px]'>
@@ -1527,14 +1488,14 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
                         {selectedOAuthServiceConfig ? (
                           createElement(selectedOAuthServiceConfig.icon, { className: 'h-4 w-4' })
                         ) : (
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[13px] text-[var(--text-tertiary)]'>
                             {resolveProviderLabel(selectedCredential.providerId).slice(0, 1)}
                           </span>
                         )}
                       </div>
                       <div className='min-w-0'>
                         <p className='text-[11px] text-[var(--text-tertiary)]'>Connected service</p>
-                        <p className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                        <p className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
                           {resolveProviderLabel(selectedCredential.providerId) || 'Unknown service'}
                         </p>
                       </div>
@@ -1701,7 +1662,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
               )}
 
               {detailsError && (
-                <div className='rounded-[8px] border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-[10px] py-[8px] text-[12px] text-[var(--status-red)]'>
+                <div className='rounded-[8px] border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-[10px] py-[8px] text-[13px] text-[var(--status-red)]'>
                   {detailsError}
                 </div>
               )}
@@ -1724,7 +1685,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
                         className='grid grid-cols-[1fr_120px_auto] items-center gap-[8px]'
                       >
                         <div className='min-w-0'>
-                          <p className='truncate font-medium text-[12px] text-[var(--text-primary)]'>
+                          <p className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
                             {member.userName || member.userEmail || member.userId}
                           </p>
                           <p className='truncate text-[11px] text-[var(--text-tertiary)]'>
@@ -1892,7 +1853,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex h-full flex-col gap-[18px]'>
         <div className='flex items-center gap-[8px]'>
           <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
@@ -1925,7 +1886,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
               <CredentialSkeleton />
             </div>
           ) : !hasCredentials ? (
-            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
               Click "Add" above to get started
             </div>
           ) : (
@@ -1945,10 +1906,10 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
                         </div>
                       )}
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <span className='truncate font-medium text-[14px]'>
+                        <span className='truncate font-medium text-[15px]'>
                           {credential.displayName}
                         </span>
-                        <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
                           {credential.description || 'No description'}
                         </p>
                       </div>
@@ -1971,7 +1932,7 @@ export function CredentialsManager({ onOpenChange }: CredentialsManagerProps) {
                 )
               })}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
                   No secrets found matching &ldquo;{searchTerm}&rdquo;
                 </div>
               )}

apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { CredentialsManager } from '@/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager'
+
+export function Credentials() {
+  return (
+    <div className='h-full min-h-0'>
+      <CredentialsManager />
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx

@@ -100,7 +100,7 @@ export function CustomTools() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex h-full flex-col gap-[18px]'>
         <div className='flex items-center gap-[8px]'>
           <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
@@ -135,7 +135,7 @@ export function CustomTools() {
               <CustomToolSkeleton />
             </div>
           ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
               Click "Add" above to get started
             </div>
           ) : (
@@ -143,11 +143,11 @@ export function CustomTools() {
               {filteredTools.map((tool) => (
                 <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-[14px]'>
+                    <span className='truncate font-medium text-[15px]'>
                       {tool.title || 'Unnamed Tool'}
                     </span>
                     {tool.schema?.function?.description && (
-                      <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                      <p className='truncate text-[14px] text-[var(--text-muted)]'>
                         {tool.schema.function.description}
                       </p>
                     )}
@@ -167,7 +167,7 @@ export function CustomTools() {
                 </div>
               ))}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
                   No tools found matching "{searchTerm}"
                 </div>
               )}
@@ -203,7 +203,7 @@ export function CustomTools() {
         <ModalContent size='sm'>
           <ModalHeader>Delete Custom Tool</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               Are you sure you want to delete{' '}
               <span className='font-medium text-[var(--text-primary)]'>{toolToDelete?.name}</span>?{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>

apps/sim/app/workspace/[workspaceId]/settings/components/debug/debug.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useState } from 'react'
+import { createLogger } from '@sim/logger'
+import { useQueryClient } from '@tanstack/react-query'
+import { useParams } from 'next/navigation'
+import { Button, Input as EmcnInput } from '@/components/emcn'
+import { Skeleton } from '@/components/ui'
+import { workflowKeys } from '@/hooks/queries/workflows'
+
+const logger = createLogger('DebugSettings')
+
+/**
+ * Debug settings component for superusers.
+ * Allows importing workflows by ID for debugging purposes.
+ */
+export function Debug() {
+  const params = useParams()
+  const queryClient = useQueryClient()
+  const workspaceId = params?.workspaceId as string
+
+  const [workflowId, setWorkflowId] = useState('')
+  const [isImporting, setIsImporting] = useState(false)
+  const [importError, setImportError] = useState<string | null>(null)
+  const [importSuccess, setImportSuccess] = useState<string | null>(null)
+
+  const handleImport = async () => {
+    if (!workflowId.trim()) return
+
+    setIsImporting(true)
+    setImportError(null)
+    setImportSuccess(null)
+
+    try {
+      const response = await fetch('/api/superuser/import-workflow', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          workflowId: workflowId.trim(),
+          targetWorkspaceId: workspaceId,
+        }),
+      })
+
+      const data = await response.json()
+
+      if (!response.ok) {
+        const message = data?.error || `Import failed with status ${response.status}`
+        setImportError(message)
+        logger.error('Failed to import workflow', { status: response.status, error: message })
+        return
+      }
+
+      await queryClient.invalidateQueries({ queryKey: workflowKeys.list(workspaceId) })
+      setWorkflowId('')
+      setImportSuccess(
+        `Workflow imported successfully (new ID: ${data.newWorkflowId}, ${data.copilotChatsImported ?? 0} copilot chats imported)`
+      )
+      logger.info('Workflow imported successfully', {
+        originalWorkflowId: workflowId.trim(),
+        newWorkflowId: data.newWorkflowId,
+        copilotChatsImported: data.copilotChatsImported,
+      })
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'An unexpected error occurred'
+      setImportError(message)
+      logger.error('Failed to import workflow', { error })
+    } finally {
+      setIsImporting(false)
+    }
+  }
+
+  return (
+    <div className='flex h-full flex-col gap-[18px]'>
+      <p className='text-[14px] text-[var(--text-secondary)]'>
+        Import a workflow by ID along with its associated copilot chats.
+      </p>
+
+      <div className='flex gap-[8px]'>
+        <EmcnInput
+          value={workflowId}
+          onChange={(e) => {
+            setWorkflowId(e.target.value)
+            setImportError(null)
+            setImportSuccess(null)
+          }}
+          placeholder='Enter workflow ID'
+          disabled={isImporting}
+        />
+        <Button
+          variant='tertiary'
+          onClick={handleImport}
+          disabled={isImporting || !workflowId.trim()}
+        >
+          {isImporting ? 'Importing...' : 'Import'}
+        </Button>
+      </div>
+
+      {isImporting && <DebugSkeleton />}
+
+      {importError && <p className='text-[13px] text-[var(--text-error)]'>{importError}</p>}
+
+      {importSuccess && <p className='text-[13px] text-[var(--text-secondary)]'>{importSuccess}</p>}
+    </div>
+  )
+}
+
+/**
+ * Loading skeleton displayed during workflow import.
+ */
+function DebugSkeleton() {
+  return (
+    <div className='flex flex-col gap-[8px]'>
+      <Skeleton className='h-5 w-[200px]' />
+      <Skeleton className='h-5 w-[140px]' />
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx

@@ -22,10 +22,14 @@ import { ANONYMOUS_USER_ID } from '@/lib/auth/constants'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { isHosted } from '@/lib/core/config/feature-flags'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/hooks/use-profile-picture-upload'
+import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/settings/hooks/use-profile-picture-upload'
 import { useBrandConfig } from '@/ee/whitelabeling'
 import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
-import { useUpdateUserProfile, useUserProfile } from '@/hooks/queries/user-profile'
+import {
+  useSuperUserStatus,
+  useUpdateUserProfile,
+  useUserProfile,
+} from '@/hooks/queries/user-profile'
 import { clearUserData } from '@/stores'
 
 const logger = createLogger('General')
@@ -50,7 +54,7 @@ function getInitials(name: string | undefined | null): string {
  */
 function GeneralSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[16px]'>
+    <div className='flex h-full flex-col gap-[18px]'>
       {/* User Info Section */}
       <div className='flex items-center gap-[12px]'>
         <Skeleton className='h-9 w-9 rounded-full' />
@@ -115,11 +119,7 @@ function GeneralSkeleton() {
   )
 }
 
-interface GeneralProps {
-  onOpenChange?: (open: boolean) => void
-}
-
-export function General({ onOpenChange }: GeneralProps) {
+export function General() {
   const router = useRouter()
   const brandConfig = useBrandConfig()
   const { data: session } = useSession()
@@ -135,8 +135,8 @@ export function General({ onOpenChange }: GeneralProps) {
   const isTrainingEnabled = isTruthy(getEnv('NEXT_PUBLIC_COPILOT_TRAINING_ENABLED'))
   const isAuthDisabled = session?.user?.id === ANONYMOUS_USER_ID
 
-  const [isSuperUser, setIsSuperUser] = useState(false)
-  const [loadingSuperUser, setLoadingSuperUser] = useState(true)
+  const { data: superUserData } = useSuperUserStatus(session?.user?.id)
+  const isSuperUser = superUserData?.isSuperUser ?? false
 
   const [name, setName] = useState(profile?.name || '')
   const [isEditingName, setIsEditingName] = useState(false)
@@ -157,26 +157,6 @@ export function General({ onOpenChange }: GeneralProps) {
     }
   }, [profile?.name])
 
-  useEffect(() => {
-    const fetchSuperUserStatus = async () => {
-      try {
-        const response = await fetch('/api/user/super-user')
-        if (response.ok) {
-          const data = await response.json()
-          setIsSuperUser(data.isSuperUser)
-        }
-      } catch (error) {
-        logger.error('Failed to fetch super user status:', error)
-      } finally {
-        setLoadingSuperUser(false)
-      }
-    }
-
-    if (session?.user?.id) {
-      fetchSuperUserStatus()
-    }
-  }, [session?.user?.id])
-
   const {
     previewUrl: profilePictureUrl,
     fileInputRef: profilePictureInputRef,
@@ -367,7 +347,7 @@ export function General({ onOpenChange }: GeneralProps) {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[16px]'>
+    <div className='flex h-full flex-col gap-[18px]'>
       {/* User Info Section */}
       <div className='flex items-center gap-[12px]'>
         <div className='relative'>
@@ -391,7 +371,7 @@ export function General({ onOpenChange }: GeneralProps) {
                 )
               }
               return (
-                <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                <span className='font-medium text-[15px] text-[var(--text-primary)]'>
                   {getInitials(profile?.name) || ''}
                 </span>
               )
@@ -423,7 +403,7 @@ export function General({ onOpenChange }: GeneralProps) {
               <>
                 <div className='relative inline-flex'>
                   <span
-                    className='invisible whitespace-pre font-medium text-[14px]'
+                    className='invisible whitespace-pre font-medium text-[15px]'
                     aria-hidden='true'
                   >
                     {name || '\u00A0'}
@@ -434,7 +414,7 @@ export function General({ onOpenChange }: GeneralProps) {
                     onChange={(e) => setName(e.target.value)}
                     onKeyDown={handleKeyDown}
                     onBlur={handleInputBlur}
-                    className='absolute top-0 left-0 h-full w-full border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                    className='absolute top-0 left-0 h-full w-full border-0 bg-transparent p-0 font-medium text-[15px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
                     maxLength={100}
                     disabled={updateProfile.isPending}
                     autoComplete='off'
@@ -455,7 +435,7 @@ export function General({ onOpenChange }: GeneralProps) {
               </>
             ) : (
               <>
-                <h3 className='font-medium text-[14px]'>{profile?.name || ''}</h3>
+                <h3 className='font-medium text-[15px]'>{profile?.name || ''}</h3>
                 <Button
                   variant='ghost'
                   className='h-[10.5px] w-[10.5px] flex-shrink-0 p-0'
@@ -467,10 +447,10 @@ export function General({ onOpenChange }: GeneralProps) {
               </>
             )}
           </div>
-          <p className='text-[13px] text-[var(--text-tertiary)]'>{profile?.email || ''}</p>
+          <p className='text-[14px] text-[var(--text-tertiary)]'>{profile?.email || ''}</p>
         </div>
       </div>
-      {uploadError && <p className='text-[13px] text-[var(--text-error)]'>{uploadError}</p>}
+      {uploadError && <p className='text-[14px] text-[var(--text-error)]'>{uploadError}</p>}
 
       <div className='flex items-center justify-between border-b pb-[12px]'>
         <Label htmlFor='theme-select'>Theme</Label>
@@ -549,7 +529,7 @@ export function General({ onOpenChange }: GeneralProps) {
         />
       </div>
 
-      <p className='-mt-[8px] text-[12px] text-[var(--text-muted)]'>
+      <p className='-mt-[8px] text-[13px] text-[var(--text-muted)]'>
         We use OpenTelemetry to collect anonymous usage data to improve Sim. You can opt-out at any
         time.
       </p>
@@ -565,7 +545,7 @@ export function General({ onOpenChange }: GeneralProps) {
         </div>
       )}
 
-      {!loadingSuperUser && isSuperUser && (
+      {isSuperUser && (
         <div className='flex items-center justify-between'>
           <Label htmlFor='super-user-mode'>Super admin mode</Label>
           <Switch
@@ -603,13 +583,13 @@ export function General({ onOpenChange }: GeneralProps) {
         <ModalContent size='sm'>
           <ModalHeader>Reset Password</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[13px] text-[var(--text-secondary)]'>
               A password reset link will be sent to{' '}
               <span className='font-medium text-[var(--text-primary)]'>{profile?.email}</span>.
               Click the link in the email to create a new password.
             </p>
             {resetPasswordError && (
-              <p className='mt-[8px] text-[12px] text-[var(--text-error)]'>{resetPasswordError}</p>
+              <p className='mt-[8px] text-[13px] text-[var(--text-error)]'>{resetPasswordError}</p>
             )}
           </ModalBody>
           <ModalFooter>

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

@@ -5,10 +5,10 @@ export { CredentialSets } from './credential-sets/credential-sets'
 export { Credentials } from './credentials/credentials'
 export { CustomTools } from './custom-tools/custom-tools'
 export { Debug } from './debug/debug'
-export { Files as FileUploads } from './files/files'
 export { General } from './general/general'
 export { MCP } from './mcp/mcp'
 export { Skills } from './skills/skills'
 export { Subscription } from './subscription/subscription'
 export { TeamManagement } from './team-management/team-management'
+export { TemplateProfile } from './template-profile/template-profile'
 export { WorkflowMcpServers } from './workflow-mcp-servers/workflow-mcp-servers'

apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx

@@ -9,7 +9,7 @@ interface FormFieldProps {
 export function FormField({ label, children, optional }: FormFieldProps) {
   return (
     <div className='flex items-center justify-between gap-[12px]'>
-      <Label className='w-[100px] shrink-0 font-medium text-[13px] text-[var(--text-secondary)]'>
+      <Label className='w-[100px] shrink-0 font-medium text-[14px] text-[var(--text-secondary)]'>
         {label}
         {optional && (
           <span className='ml-1 font-normal text-[11px] text-[var(--text-muted)]'>(optional)</span>