removed redundant logic, kept single source of truth for diff

apps/sim/app/_styles/globals.css

@@ -14,7 +14,7 @@
   --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */
   --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
-  --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
+  --terminal-height: 155px; /* TERMINAL_HEIGHT.DEFAULT */
 }
 
 .sidebar-container {

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

@@ -9,13 +9,24 @@ import { createErrorResponse, createSuccessResponse } from '@/app/api/workflows/
 
 const logger = createLogger('WorkflowDeploymentVersionAPI')
 
-const patchBodySchema = z.object({
-  name: z
-    .string()
-    .trim()
-    .min(1, 'Name cannot be empty')
-    .max(100, 'Name must be 100 characters or less'),
-})
+const patchBodySchema = z
+  .object({
+    name: z
+      .string()
+      .trim()
+      .min(1, 'Name cannot be empty')
+      .max(100, 'Name must be 100 characters or less')
+      .optional(),
+    description: z
+      .string()
+      .trim()
+      .max(500, 'Description must be 500 characters or less')
+      .nullable()
+      .optional(),
+  })
+  .refine((data) => data.name !== undefined || data.description !== undefined, {
+    message: 'At least one of name or description must be provided',
+  })
 
 export const dynamic = 'force-dynamic'
 export const runtime = 'nodejs'
@@ -88,33 +99,46 @@ export async function PATCH(
       return createErrorResponse(validation.error.errors[0]?.message || 'Invalid request body', 400)
     }
 
-    const { name } = validation.data
+    const { name, description } = validation.data
+
+    const updateData: { name?: string; description?: string | null } = {}
+    if (name !== undefined) {
+      updateData.name = name
+    }
+    if (description !== undefined) {
+      updateData.description = description
+    }
 
     const [updated] = await db
       .update(workflowDeploymentVersion)
-      .set({ name })
+      .set(updateData)
       .where(
         and(
           eq(workflowDeploymentVersion.workflowId, id),
           eq(workflowDeploymentVersion.version, versionNum)
         )
       )
-      .returning({ id: workflowDeploymentVersion.id, name: workflowDeploymentVersion.name })
+      .returning({
+        id: workflowDeploymentVersion.id,
+        name: workflowDeploymentVersion.name,
+        description: workflowDeploymentVersion.description,
+      })
 
     if (!updated) {
       return createErrorResponse('Deployment version not found', 404)
     }
 
-    logger.info(
-      `[${requestId}] Renamed deployment version ${version} for workflow ${id} to "${name}"`
-    )
+    logger.info(`[${requestId}] Updated deployment version ${version} for workflow ${id}`, {
+      name: updateData.name,
+      description: updateData.description,
+    })
 
-    return createSuccessResponse({ name: updated.name })
+    return createSuccessResponse({ name: updated.name, description: updated.description })
   } catch (error: any) {
     logger.error(
-      `[${requestId}] Error renaming deployment version ${version} for workflow ${id}`,
+      `[${requestId}] Error updating deployment version ${version} for workflow ${id}`,
       error
     )
-    return createErrorResponse(error.message || 'Failed to rename deployment version', 500)
+    return createErrorResponse(error.message || 'Failed to update deployment version', 500)
   }
 }

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

@@ -26,6 +26,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         id: workflowDeploymentVersion.id,
         version: workflowDeploymentVersion.version,
         name: workflowDeploymentVersion.name,
+        description: workflowDeploymentVersion.description,
         isActive: workflowDeploymentVersion.isActive,
         createdAt: workflowDeploymentVersion.createdAt,
         createdBy: workflowDeploymentVersion.createdBy,

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

@@ -573,19 +573,7 @@ const TraceSpanNode = memo(function TraceSpanNode({
     return children.sort((a, b) => parseTime(a.startTime) - parseTime(b.startTime))
   }, [span, spanId, spanStartTime])
 
-  // Hide empty model timing segments for agents without tool calls
-  const filteredChildren = useMemo(() => {
-    const isAgent = span.type?.toLowerCase() === 'agent'
-    const hasToolCalls =
-      (span.toolCalls?.length ?? 0) > 0 || allChildren.some((c) => c.type?.toLowerCase() === 'tool')
-
-    if (isAgent && !hasToolCalls) {
-      return allChildren.filter((c) => c.type?.toLowerCase() !== 'model')
-    }
-    return allChildren
-  }, [allChildren, span.type, span.toolCalls])
-
-  const hasChildren = filteredChildren.length > 0
+  const hasChildren = allChildren.length > 0
   const isExpanded = isRootWorkflow || expandedNodes.has(spanId)
   const isToggleable = !isRootWorkflow
 
@@ -697,7 +685,7 @@ const TraceSpanNode = memo(function TraceSpanNode({
           {/* Nested Children */}
           {hasChildren && (
             <div className='flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[10px]'>
-              {filteredChildren.map((child, index) => (
+              {allChildren.map((child, index) => (
                 <div key={child.id || `${spanId}-child-${index}`} className='pl-[6px]'>
                   <TraceSpanNode
                     span={child}

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

@@ -0,0 +1,170 @@
+'use client'
+
+import { useCallback, useRef, useState } from 'react'
+import {
+  Button,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Textarea,
+} from '@/components/emcn'
+import {
+  useGenerateVersionDescription,
+  useUpdateDeploymentVersion,
+} from '@/hooks/queries/deployments'
+
+interface VersionDescriptionModalProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  workflowId: string
+  version: number
+  versionName: string
+  currentDescription: string | null | undefined
+}
+
+export function VersionDescriptionModal({
+  open,
+  onOpenChange,
+  workflowId,
+  version,
+  versionName,
+  currentDescription,
+}: VersionDescriptionModalProps) {
+  const initialDescriptionRef = useRef(currentDescription || '')
+  const [description, setDescription] = useState(initialDescriptionRef.current)
+  const [showUnsavedChangesAlert, setShowUnsavedChangesAlert] = useState(false)
+
+  const updateMutation = useUpdateDeploymentVersion()
+  const generateMutation = useGenerateVersionDescription()
+
+  const hasChanges = description.trim() !== initialDescriptionRef.current.trim()
+  const isGenerating = generateMutation.isPending
+
+  const handleCloseAttempt = useCallback(() => {
+    if (updateMutation.isPending || isGenerating) {
+      return
+    }
+    if (hasChanges) {
+      setShowUnsavedChangesAlert(true)
+    } else {
+      onOpenChange(false)
+    }
+  }, [hasChanges, updateMutation.isPending, isGenerating, onOpenChange])
+
+  const handleDiscardChanges = useCallback(() => {
+    setShowUnsavedChangesAlert(false)
+    setDescription(initialDescriptionRef.current)
+    onOpenChange(false)
+  }, [onOpenChange])
+
+  const handleGenerateDescription = useCallback(() => {
+    generateMutation.mutate({
+      workflowId,
+      version,
+      onStreamChunk: (accumulated) => {
+        setDescription(accumulated)
+      },
+    })
+  }, [workflowId, version, generateMutation])
+
+  const handleSave = useCallback(() => {
+    if (!workflowId) return
+
+    updateMutation.mutate(
+      {
+        workflowId,
+        version,
+        description: description.trim() || null,
+      },
+      {
+        onSuccess: () => {
+          onOpenChange(false)
+        },
+      }
+    )
+  }, [workflowId, version, description, updateMutation, onOpenChange])
+
+  return (
+    <>
+      <Modal open={open} onOpenChange={(openState) => !openState && handleCloseAttempt()}>
+        <ModalContent className='max-w-[480px]'>
+          <ModalHeader>
+            <span>Version Description</span>
+          </ModalHeader>
+          <ModalBody className='space-y-[10px]'>
+            <div className='flex items-center justify-between'>
+              <p className='text-[12px] text-[var(--text-secondary)]'>
+                {currentDescription ? 'Edit the' : 'Add a'} description for{' '}
+                <span className='font-medium text-[var(--text-primary)]'>{versionName}</span>
+              </p>
+              <Button
+                variant='active'
+                className='-my-1 h-5 px-2 py-0 text-[11px]'
+                onClick={handleGenerateDescription}
+                disabled={isGenerating || updateMutation.isPending}
+              >
+                {isGenerating ? 'Generating...' : 'Generate'}
+              </Button>
+            </div>
+            <Textarea
+              placeholder='Describe the changes in this deployment version...'
+              className='min-h-[120px] resize-none'
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              maxLength={500}
+              disabled={isGenerating}
+            />
+            <div className='flex items-center justify-between'>
+              {(updateMutation.error || generateMutation.error) && (
+                <p className='text-[12px] text-[var(--text-error)]'>
+                  {updateMutation.error?.message || generateMutation.error?.message}
+                </p>
+              )}
+              {!updateMutation.error && !generateMutation.error && <div />}
+              <p className='text-[11px] text-[var(--text-tertiary)]'>{description.length}/500</p>
+            </div>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant='default'
+              onClick={handleCloseAttempt}
+              disabled={updateMutation.isPending || isGenerating}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='tertiary'
+              onClick={handleSave}
+              disabled={updateMutation.isPending || isGenerating || !hasChanges}
+            >
+              {updateMutation.isPending ? 'Saving...' : 'Save'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Modal open={showUnsavedChangesAlert} onOpenChange={setShowUnsavedChangesAlert}>
+        <ModalContent className='max-w-[400px]'>
+          <ModalHeader>
+            <span>Unsaved Changes</span>
+          </ModalHeader>
+          <ModalBody>
+            <p className='text-[14px] text-[var(--text-secondary)]'>
+              You have unsaved changes. Are you sure you want to discard them?
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowUnsavedChangesAlert(false)}>
+              Keep Editing
+            </Button>
+            <Button variant='destructive' onClick={handleDiscardChanges}>
+              Discard Changes
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}

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

@@ -1,26 +1,31 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
-import { MoreVertical, Pencil, RotateCcw, SendToBack } from 'lucide-react'
-import { Button, Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+import { FileText, MoreVertical, Pencil, RotateCcw, SendToBack } from 'lucide-react'
+import {
+  Button,
+  Popover,
+  PopoverContent,
+  PopoverItem,
+  PopoverTrigger,
+  Tooltip,
+} from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
+import { formatDateTime } from '@/lib/core/utils/formatting'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
+import { useUpdateDeploymentVersion } from '@/hooks/queries/deployments'
+import { VersionDescriptionModal } from './version-description-modal'
 
-const logger = createLogger('Versions')
-
-/** Shared styling constants aligned with terminal component */
 const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
 const ROW_TEXT_CLASS = 'font-medium text-[var(--text-primary)] text-[12px]'
 const COLUMN_BASE_CLASS = 'flex-shrink-0'
 
-/** Column width configuration */
 const COLUMN_WIDTHS = {
   VERSION: 'w-[180px]',
   DEPLOYED_BY: 'w-[140px]',
   TIMESTAMP: 'flex-1',
-  ACTIONS: 'w-[32px]',
+  ACTIONS: 'w-[56px]',
 } as const
 
 interface VersionsProps {
@@ -31,34 +36,6 @@ interface VersionsProps {
   onSelectVersion: (version: number | null) => void
   onPromoteToLive: (version: number) => void
   onLoadDeployment: (version: number) => void
-  fetchVersions: () => Promise<void>
-}
-
-/**
- * Formats a timestamp into a readable string.
- * @param value - The date string or Date object to format
- * @returns Formatted string like "8:36 PM PT on Oct 11, 2025"
- */
-const formatDate = (value: string | Date): string => {
-  const date = value instanceof Date ? value : new Date(value)
-  if (Number.isNaN(date.getTime())) {
-    return '-'
-  }
-
-  const timePart = date.toLocaleTimeString('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: true,
-    timeZoneName: 'short',
-  })
-
-  const datePart = date.toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  })
-
-  return `${timePart} on ${datePart}`
 }
 
 /**
@@ -73,14 +50,15 @@ export function Versions({
   onSelectVersion,
   onPromoteToLive,
   onLoadDeployment,
-  fetchVersions,
 }: VersionsProps) {
   const [editingVersion, setEditingVersion] = useState<number | null>(null)
   const [editValue, setEditValue] = useState('')
-  const [isRenaming, setIsRenaming] = useState(false)
   const [openDropdown, setOpenDropdown] = useState<number | null>(null)
+  const [descriptionModalVersion, setDescriptionModalVersion] = useState<number | null>(null)
   const inputRef = useRef<HTMLInputElement>(null)
 
+  const renameMutation = useUpdateDeploymentVersion()
+
   useEffect(() => {
     if (editingVersion !== null && inputRef.current) {
       inputRef.current.focus()
@@ -94,7 +72,8 @@ export function Versions({
     setEditValue(currentName || `v${version}`)
   }
 
-  const handleSaveRename = async (version: number) => {
+  const handleSaveRename = (version: number) => {
+    if (renameMutation.isPending) return
     if (!workflowId || !editValue.trim()) {
       setEditingVersion(null)
       return
@@ -108,25 +87,21 @@ export function Versions({
       return
     }
 
-    setIsRenaming(true)
-    try {
-      const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: editValue.trim() }),
-      })
-
-      if (res.ok) {
-        await fetchVersions()
-        setEditingVersion(null)
-      } else {
-        logger.error('Failed to rename version')
+    renameMutation.mutate(
+      {
+        workflowId,
+        version,
+        name: editValue.trim(),
+      },
+      {
+        onSuccess: () => {
+          setEditingVersion(null)
+        },
+        onError: () => {
+          // Keep editing state open on error so user can retry
+        },
       }
-    } catch (error) {
-      logger.error('Error renaming version:', error)
-    } finally {
-      setIsRenaming(false)
-    }
+    )
   }
 
   const handleCancelRename = () => {
@@ -149,6 +124,16 @@ export function Versions({
     onLoadDeployment(version)
   }
 
+  const handleOpenDescriptionModal = (version: number) => {
+    setOpenDropdown(null)
+    setDescriptionModalVersion(version)
+  }
+
+  const descriptionModalVersionData =
+    descriptionModalVersion !== null
+      ? versions.find((v) => v.version === descriptionModalVersion)
+      : null
+
   if (versionsLoading && versions.length === 0) {
     return (
       <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
@@ -179,7 +164,14 @@ export function Versions({
               <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
                 <Skeleton className='h-[12px] w-[160px]' />
               </div>
-              <div className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS, 'flex justify-end')}>
+              <div
+                className={clsx(
+                  COLUMN_WIDTHS.ACTIONS,
+                  COLUMN_BASE_CLASS,
+                  'flex justify-end gap-[2px]'
+                )}
+              >
+                <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
                 <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
               </div>
             </div>
@@ -257,7 +249,7 @@ export function Versions({
                         'text-[var(--text-primary)] focus:outline-none focus:ring-0'
                       )}
                       maxLength={100}
-                      disabled={isRenaming}
+                      disabled={renameMutation.isPending}
                       autoComplete='off'
                       autoCorrect='off'
                       autoCapitalize='off'
@@ -289,14 +281,40 @@ export function Versions({
                 <span
                   className={clsx('block truncate text-[var(--text-tertiary)]', ROW_TEXT_CLASS)}
                 >
-                  {formatDate(v.createdAt)}
+                  {formatDateTime(new Date(v.createdAt))}
                 </span>
               </div>
 
               <div
-                className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS, 'flex justify-end')}
+                className={clsx(
+                  COLUMN_WIDTHS.ACTIONS,
+                  COLUMN_BASE_CLASS,
+                  'flex items-center justify-end gap-[2px]'
+                )}
                 onClick={(e) => e.stopPropagation()}
               >
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <Button
+                      variant='ghost'
+                      className={clsx(
+                        '!p-1',
+                        !v.description &&
+                          'text-[var(--text-quaternary)] hover:text-[var(--text-tertiary)]'
+                      )}
+                      onClick={() => handleOpenDescriptionModal(v.version)}
+                    >
+                      <FileText className='h-3.5 w-3.5' />
+                    </Button>
+                  </Tooltip.Trigger>
+                  <Tooltip.Content side='top' className='max-w-[240px]'>
+                    {v.description ? (
+                      <p className='line-clamp-3 text-[12px]'>{v.description}</p>
+                    ) : (
+                      <p className='text-[12px]'>Add description</p>
+                    )}
+                  </Tooltip.Content>
+                </Tooltip.Root>
                 <Popover
                   open={openDropdown === v.version}
                   onOpenChange={(open) => setOpenDropdown(open ? v.version : null)}
@@ -311,6 +329,10 @@ export function Versions({
                       <Pencil className='h-3 w-3' />
                       <span>Rename</span>
                     </PopoverItem>
+                    <PopoverItem onClick={() => handleOpenDescriptionModal(v.version)}>
+                      <FileText className='h-3 w-3' />
+                      <span>{v.description ? 'Edit description' : 'Add description'}</span>
+                    </PopoverItem>
                     {!v.isActive && (
                       <PopoverItem onClick={() => handlePromote(v.version)}>
                         <RotateCcw className='h-3 w-3' />
@@ -328,6 +350,20 @@ export function Versions({
           )
         })}
       </div>
+
+      {workflowId && descriptionModalVersionData && (
+        <VersionDescriptionModal
+          key={descriptionModalVersionData.version}
+          open={descriptionModalVersion !== null}
+          onOpenChange={(open) => !open && setDescriptionModalVersion(null)}
+          workflowId={workflowId}
+          version={descriptionModalVersionData.version}
+          versionName={
+            descriptionModalVersionData.name || `v${descriptionModalVersionData.version}`
+          }
+          currentDescription={descriptionModalVersionData.description}
+        />
+      )}
     </div>
   )
 }

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

@@ -32,7 +32,6 @@ interface GeneralDeployProps {
   versionsLoading: boolean
   onPromoteToLive: (version: number) => Promise<void>
   onLoadDeploymentComplete: () => void
-  fetchVersions: () => Promise<void>
 }
 
 type PreviewMode = 'active' | 'selected'
@@ -48,7 +47,6 @@ export function GeneralDeploy({
   versionsLoading,
   onPromoteToLive,
   onLoadDeploymentComplete,
-  fetchVersions,
 }: GeneralDeployProps) {
   const [selectedVersion, setSelectedVersion] = useState<number | null>(null)
   const [previewMode, setPreviewMode] = useState<PreviewMode>('active')
@@ -229,7 +227,6 @@ export function GeneralDeploy({
             onSelectVersion={handleSelectVersion}
             onPromoteToLive={handlePromoteToLive}
             onLoadDeployment={handleLoadDeployment}
-            fetchVersions={fetchVersions}
           />
         </div>
       </div>

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

@@ -135,11 +135,9 @@ export function DeployModal({
     refetch: refetchDeploymentInfo,
   } = useDeploymentInfo(workflowId, { enabled: open && isDeployed })
 
-  const {
-    data: versionsData,
-    isLoading: versionsLoading,
-    refetch: refetchVersions,
-  } = useDeploymentVersions(workflowId, { enabled: open })
+  const { data: versionsData, isLoading: versionsLoading } = useDeploymentVersions(workflowId, {
+    enabled: open,
+  })
 
   const {
     isLoading: isLoadingChat,
@@ -450,10 +448,6 @@ export function DeployModal({
     deleteTrigger?.click()
   }, [])
 
-  const handleFetchVersions = useCallback(async () => {
-    await refetchVersions()
-  }, [refetchVersions])
-
   const isSubmitting = deployMutation.isPending
   const isUndeploying = undeployMutation.isPending
 
@@ -512,7 +506,6 @@ export function DeployModal({
                   versionsLoading={versionsLoading}
                   onPromoteToLive={handlePromoteToLive}
                   onLoadDeploymentComplete={handleCloseModal}
-                  fetchVersions={handleFetchVersions}
                 />
               </ModalTabsContent>
 

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

@@ -3,9 +3,8 @@
 import { useCallback, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import clsx from 'clsx'
-import { RepeatIcon, SplitIcon } from 'lucide-react'
+import { ChevronDown, RepeatIcon, SplitIcon } from 'lucide-react'
 import { useShallow } from 'zustand/react/shallow'
-import { ChevronDown } from '@/components/emcn'
 import {
   FieldItem,
   type SchemaField,
@@ -116,8 +115,9 @@ function ConnectionItem({
         {hasFields && (
           <ChevronDown
             className={clsx(
-              'h-[8px] w-[8px] flex-shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]',
-              !isExpanded && '-rotate-90'
+              'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+              'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
+              isExpanded && 'rotate-180'
             )}
           />
         )}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx

@@ -1,121 +0,0 @@
-'use client'
-
-import { memo } from 'react'
-import clsx from 'clsx'
-import { Filter } from 'lucide-react'
-import {
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverDivider,
-  PopoverItem,
-  PopoverScrollArea,
-  PopoverSection,
-  PopoverTrigger,
-} from '@/components/emcn'
-import type {
-  BlockInfo,
-  TerminalFilters,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
-import { getBlockIcon } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils'
-
-/**
- * Props for the FilterPopover component
- */
-export interface FilterPopoverProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  filters: TerminalFilters
-  toggleStatus: (status: 'error' | 'info') => void
-  toggleBlock: (blockId: string) => void
-  uniqueBlocks: BlockInfo[]
-  hasActiveFilters: boolean
-}
-
-/**
- * Filter popover component used in terminal header and output panel
- */
-export const FilterPopover = memo(function FilterPopover({
-  open,
-  onOpenChange,
-  filters,
-  toggleStatus,
-  toggleBlock,
-  uniqueBlocks,
-  hasActiveFilters,
-}: FilterPopoverProps) {
-  return (
-    <Popover open={open} onOpenChange={onOpenChange} size='sm'>
-      <PopoverTrigger asChild>
-        <Button
-          variant='ghost'
-          className='!p-1.5 -m-1.5'
-          onClick={(e) => e.stopPropagation()}
-          aria-label='Filters'
-        >
-          <Filter
-            className={clsx('h-3 w-3', hasActiveFilters && 'text-[var(--brand-secondary)]')}
-          />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        side='top'
-        align='end'
-        sideOffset={4}
-        onClick={(e) => e.stopPropagation()}
-        minWidth={160}
-        maxWidth={220}
-        maxHeight={300}
-      >
-        <PopoverSection>Status</PopoverSection>
-        <PopoverItem
-          active={filters.statuses.has('error')}
-          showCheck={filters.statuses.has('error')}
-          onClick={() => toggleStatus('error')}
-        >
-          <div
-            className='h-[6px] w-[6px] rounded-[2px]'
-            style={{ backgroundColor: 'var(--text-error)' }}
-          />
-          <span className='flex-1'>Error</span>
-        </PopoverItem>
-        <PopoverItem
-          active={filters.statuses.has('info')}
-          showCheck={filters.statuses.has('info')}
-          onClick={() => toggleStatus('info')}
-        >
-          <div
-            className='h-[6px] w-[6px] rounded-[2px]'
-            style={{ backgroundColor: 'var(--terminal-status-info-color)' }}
-          />
-          <span className='flex-1'>Info</span>
-        </PopoverItem>
-
-        {uniqueBlocks.length > 0 && (
-          <>
-            <PopoverDivider className='my-[4px]' />
-            <PopoverSection className='!mt-0'>Blocks</PopoverSection>
-            <PopoverScrollArea className='max-h-[100px]'>
-              {uniqueBlocks.map((block) => {
-                const BlockIcon = getBlockIcon(block.blockType)
-                const isSelected = filters.blockIds.has(block.blockId)
-
-                return (
-                  <PopoverItem
-                    key={block.blockId}
-                    active={isSelected}
-                    showCheck={isSelected}
-                    onClick={() => toggleBlock(block.blockId)}
-                  >
-                    {BlockIcon && <BlockIcon className='h-3 w-3' />}
-                    <span className='flex-1'>{block.blockName}</span>
-                  </PopoverItem>
-                )
-              })}
-            </PopoverScrollArea>
-          </>
-        )}
-      </PopoverContent>
-    </Popover>
-  )
-})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/index.ts

@@ -1 +0,0 @@
-export { FilterPopover, type FilterPopoverProps } from './filter-popover'

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

@@ -1,5 +1,2 @@
-export { FilterPopover, type FilterPopoverProps } from './filter-popover'
-export { LogRowContextMenu, type LogRowContextMenuProps } from './log-row-context-menu'
-export { OutputPanel, type OutputPanelProps } from './output-panel'
-export { RunningBadge, StatusDisplay, type StatusDisplayProps } from './status-display'
-export { ToggleButton, type ToggleButtonProps } from './toggle-button'
+export { LogRowContextMenu } from './log-row-context-menu'
+export { OutputContextMenu } from './output-context-menu'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/log-row-context-menu.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, type RefObject } from 'react'
+import type { RefObject } from 'react'
 import {
   Popover,
   PopoverAnchor,
@@ -8,13 +8,20 @@ import {
   PopoverDivider,
   PopoverItem,
 } from '@/components/emcn'
-import type {
-  ContextMenuPosition,
-  TerminalFilters,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
 import type { ConsoleEntry } from '@/stores/terminal'
 
-export interface LogRowContextMenuProps {
+interface ContextMenuPosition {
+  x: number
+  y: number
+}
+
+interface TerminalFilters {
+  blockIds: Set<string>
+  statuses: Set<'error' | 'info'>
+  runIds: Set<string>
+}
+
+interface LogRowContextMenuProps {
   isOpen: boolean
   position: ContextMenuPosition
   menuRef: RefObject<HTMLDivElement | null>
@@ -23,16 +30,19 @@ export interface LogRowContextMenuProps {
   filters: TerminalFilters
   onFilterByBlock: (blockId: string) => void
   onFilterByStatus: (status: 'error' | 'info') => void
+  onFilterByRunId: (runId: string) => void
   onCopyRunId: (runId: string) => void
+  onClearFilters: () => void
   onClearConsole: () => void
   onFixInCopilot: (entry: ConsoleEntry) => void
+  hasActiveFilters: boolean
 }
 
 /**
  * Context menu for terminal log rows (left side).
  * Displays filtering options based on the selected row's properties.
  */
-export const LogRowContextMenu = memo(function LogRowContextMenu({
+export function LogRowContextMenu({
   isOpen,
   position,
   menuRef,
@@ -41,15 +51,19 @@ export const LogRowContextMenu = memo(function LogRowContextMenu({
   filters,
   onFilterByBlock,
   onFilterByStatus,
+  onFilterByRunId,
   onCopyRunId,
+  onClearFilters,
   onClearConsole,
   onFixInCopilot,
+  hasActiveFilters,
 }: LogRowContextMenuProps) {
   const hasRunId = entry?.executionId != null
 
   const isBlockFiltered = entry ? filters.blockIds.has(entry.blockId) : false
   const entryStatus = entry?.success ? 'info' : 'error'
   const isStatusFiltered = entry ? filters.statuses.has(entryStatus) : false
+  const isRunIdFiltered = entry?.executionId ? filters.runIds.has(entry.executionId) : false
 
   return (
     <Popover
@@ -120,11 +134,34 @@ export const LogRowContextMenu = memo(function LogRowContextMenu({
             >
               Filter by Status
             </PopoverItem>
+            {hasRunId && (
+              <PopoverItem
+                showCheck={isRunIdFiltered}
+                onClick={() => {
+                  onFilterByRunId(entry.executionId!)
+                  onClose()
+                }}
+              >
+                Filter by Run ID
+              </PopoverItem>
+            )}
           </>
         )}
 
+        {/* Clear filters */}
+        {hasActiveFilters && (
+          <PopoverItem
+            onClick={() => {
+              onClearFilters()
+              onClose()
+            }}
+          >
+            Clear All Filters
+          </PopoverItem>
+        )}
+
         {/* Destructive action */}
-        {entry && <PopoverDivider />}
+        {(entry || hasActiveFilters) && <PopoverDivider />}
         <PopoverItem
           onClick={() => {
             onClearConsole()
@@ -136,4 +173,4 @@ export const LogRowContextMenu = memo(function LogRowContextMenu({
       </PopoverContent>
     </Popover>
   )
-})
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/log-row-context-menu/index.ts

@@ -1 +0,0 @@
-export { LogRowContextMenu, type LogRowContextMenuProps } from './log-row-context-menu'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-context-menu.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, type RefObject } from 'react'
+import type { RefObject } from 'react'
 import {
   Popover,
   PopoverAnchor,
@@ -8,9 +8,13 @@ import {
   PopoverDivider,
   PopoverItem,
 } from '@/components/emcn'
-import type { ContextMenuPosition } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
 
-export interface OutputContextMenuProps {
+interface ContextMenuPosition {
+  x: number
+  y: number
+}
+
+interface OutputContextMenuProps {
   isOpen: boolean
   position: ContextMenuPosition
   menuRef: RefObject<HTMLDivElement | null>
@@ -18,8 +22,6 @@ export interface OutputContextMenuProps {
   onCopySelection: () => void
   onCopyAll: () => void
   onSearch: () => void
-  structuredView: boolean
-  onToggleStructuredView: () => void
   wrapText: boolean
   onToggleWrap: () => void
   openOnRun: boolean
@@ -32,7 +34,7 @@ export interface OutputContextMenuProps {
  * Context menu for terminal output panel (right side).
  * Displays copy, search, and display options for the code viewer.
  */
-export const OutputContextMenu = memo(function OutputContextMenu({
+export function OutputContextMenu({
   isOpen,
   position,
   menuRef,
@@ -40,8 +42,6 @@ export const OutputContextMenu = memo(function OutputContextMenu({
   onCopySelection,
   onCopyAll,
   onSearch,
-  structuredView,
-  onToggleStructuredView,
   wrapText,
   onToggleWrap,
   openOnRun,
@@ -96,9 +96,6 @@ export const OutputContextMenu = memo(function OutputContextMenu({
 
         {/* Display settings - toggles don't close menu */}
         <PopoverDivider />
-        <PopoverItem showCheck={structuredView} onClick={onToggleStructuredView}>
-          Structured View
-        </PopoverItem>
         <PopoverItem showCheck={wrapText} onClick={onToggleWrap}>
           Wrap Text
         </PopoverItem>
@@ -119,4 +116,4 @@ export const OutputContextMenu = memo(function OutputContextMenu({
       </PopoverContent>
     </Popover>
   )
-})
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx

@@ -1,913 +0,0 @@
-'use client'
-
-import type React from 'react'
-import {
-  createContext,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { List, type RowComponentProps, useListRef } from 'react-window'
-import { Badge, ChevronDown } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-
-type ValueType = 'null' | 'undefined' | 'array' | 'string' | 'number' | 'boolean' | 'object'
-type BadgeVariant = 'green' | 'blue' | 'orange' | 'purple' | 'gray' | 'red'
-
-interface NodeEntry {
-  key: string
-  value: unknown
-  path: string
-}
-
-/**
- * Search context for structured output tree.
- */
-interface SearchContextValue {
-  query: string
-  pathToMatchIndices: Map<string, number[]>
-}
-
-const SearchContext = createContext<SearchContextValue | null>(null)
-
-/**
- * Configuration for virtualized rendering.
- */
-const CONFIG = {
-  ROW_HEIGHT: 22,
-  INDENT_PER_LEVEL: 12,
-  BASE_PADDING: 20,
-  MAX_SEARCH_DEPTH: 100,
-  OVERSCAN_COUNT: 10,
-  VIRTUALIZATION_THRESHOLD: 200,
-} as const
-
-const BADGE_VARIANTS: Record<ValueType, BadgeVariant> = {
-  string: 'green',
-  number: 'blue',
-  boolean: 'orange',
-  array: 'purple',
-  null: 'gray',
-  undefined: 'gray',
-  object: 'gray',
-} as const
-
-/**
- * Styling constants matching the original non-virtualized implementation.
- */
-const STYLES = {
-  row: 'group flex min-h-[22px] cursor-pointer items-center gap-[6px] rounded-[8px] px-[6px] -mx-[6px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
-  chevron:
-    'h-[8px] w-[8px] flex-shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]',
-  keyName:
-    'font-medium text-[13px] text-[var(--text-primary)] group-hover:text-[var(--text-primary)]',
-  badge: 'rounded-[4px] px-[4px] py-[0px] text-[11px]',
-  summary: 'text-[12px] text-[var(--text-tertiary)]',
-  indent:
-    'mt-[2px] ml-[3px] flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[9px]',
-  value: 'min-w-0 py-[2px] text-[13px] text-[var(--text-primary)]',
-  emptyValue: 'py-[2px] text-[13px] text-[var(--text-tertiary)]',
-  matchHighlight: 'bg-yellow-200/60 dark:bg-yellow-500/40',
-  currentMatchHighlight: 'bg-orange-400',
-} as const
-
-const EMPTY_MATCH_INDICES: number[] = []
-
-function getTypeLabel(value: unknown): ValueType {
-  if (value === null) return 'null'
-  if (value === undefined) return 'undefined'
-  if (Array.isArray(value)) return 'array'
-  return typeof value as ValueType
-}
-
-function formatPrimitive(value: unknown): string {
-  if (value === null) return 'null'
-  if (value === undefined) return 'undefined'
-  return String(value)
-}
-
-function isPrimitive(value: unknown): value is null | undefined | string | number | boolean {
-  return value === null || value === undefined || typeof value !== 'object'
-}
-
-function isEmpty(value: unknown): boolean {
-  if (Array.isArray(value)) return value.length === 0
-  if (typeof value === 'object' && value !== null) return Object.keys(value).length === 0
-  return false
-}
-
-function extractErrorMessage(data: unknown): string {
-  if (typeof data === 'string') return data
-  if (data instanceof Error) return data.message
-  if (typeof data === 'object' && data !== null && 'message' in data) {
-    return String((data as { message: unknown }).message)
-  }
-  return JSON.stringify(data, null, 2)
-}
-
-function buildEntries(value: unknown, basePath: string): NodeEntry[] {
-  if (Array.isArray(value)) {
-    return value.map((item, i) => ({ key: String(i), value: item, path: `${basePath}[${i}]` }))
-  }
-  return Object.entries(value as Record<string, unknown>).map(([k, v]) => ({
-    key: k,
-    value: v,
-    path: `${basePath}.${k}`,
-  }))
-}
-
-function getCollapsedSummary(value: unknown): string | null {
-  if (Array.isArray(value)) {
-    const len = value.length
-    return `${len} item${len !== 1 ? 's' : ''}`
-  }
-  if (typeof value === 'object' && value !== null) {
-    const count = Object.keys(value).length
-    return `${count} key${count !== 1 ? 's' : ''}`
-  }
-  return null
-}
-
-function computeInitialPaths(data: unknown, isError: boolean): Set<string> {
-  if (isError) return new Set(['root.error'])
-  if (!data || typeof data !== 'object') return new Set()
-  const entries = Array.isArray(data)
-    ? data.map((_, i) => `root[${i}]`)
-    : Object.keys(data).map((k) => `root.${k}`)
-  return new Set(entries)
-}
-
-function getAncestorPaths(path: string): string[] {
-  const ancestors: string[] = []
-  let current = path
-
-  while (current.includes('.') || current.includes('[')) {
-    const splitPoint = Math.max(current.lastIndexOf('.'), current.lastIndexOf('['))
-    if (splitPoint <= 0) break
-    current = current.slice(0, splitPoint)
-    if (current !== 'root') ancestors.push(current)
-  }
-
-  return ancestors
-}
-
-function findTextMatches(text: string, query: string): Array<[number, number]> {
-  if (!query) return []
-
-  const matches: Array<[number, number]> = []
-  const lowerText = text.toLowerCase()
-  const lowerQuery = query.toLowerCase()
-  let pos = 0
-
-  while (pos < lowerText.length) {
-    const idx = lowerText.indexOf(lowerQuery, pos)
-    if (idx === -1) break
-    matches.push([idx, idx + query.length])
-    pos = idx + 1
-  }
-
-  return matches
-}
-
-function addPrimitiveMatches(value: unknown, path: string, query: string, matches: string[]): void {
-  const text = formatPrimitive(value)
-  const count = findTextMatches(text, query).length
-  for (let i = 0; i < count; i++) {
-    matches.push(path)
-  }
-}
-
-function collectAllMatchPaths(data: unknown, query: string, basePath: string, depth = 0): string[] {
-  if (!query || depth > CONFIG.MAX_SEARCH_DEPTH) return []
-
-  const matches: string[] = []
-
-  if (isPrimitive(data)) {
-    addPrimitiveMatches(data, `${basePath}.value`, query, matches)
-    return matches
-  }
-
-  for (const entry of buildEntries(data, basePath)) {
-    if (isPrimitive(entry.value)) {
-      addPrimitiveMatches(entry.value, entry.path, query, matches)
-    } else {
-      matches.push(...collectAllMatchPaths(entry.value, query, entry.path, depth + 1))
-    }
-  }
-
-  return matches
-}
-
-function buildPathToIndicesMap(matchPaths: string[]): Map<string, number[]> {
-  const map = new Map<string, number[]>()
-  matchPaths.forEach((path, globalIndex) => {
-    const existing = map.get(path)
-    if (existing) {
-      existing.push(globalIndex)
-    } else {
-      map.set(path, [globalIndex])
-    }
-  })
-  return map
-}
-
-/**
- * Renders text with search highlights using segments.
- */
-function renderHighlightedSegments(
-  text: string,
-  query: string,
-  matchIndices: number[],
-  currentMatchIndex: number,
-  path: string
-): React.ReactNode {
-  if (!query || matchIndices.length === 0) return text
-
-  const textMatches = findTextMatches(text, query)
-  if (textMatches.length === 0) return text
-
-  const segments: React.ReactNode[] = []
-  let lastEnd = 0
-
-  textMatches.forEach(([start, end], i) => {
-    const globalIndex = matchIndices[i]
-    const isCurrent = globalIndex === currentMatchIndex
-
-    if (start > lastEnd) {
-      segments.push(<span key={`t-${path}-${start}`}>{text.slice(lastEnd, start)}</span>)
-    }
-
-    segments.push(
-      <mark
-        key={`m-${path}-${start}`}
-        data-search-match
-        data-match-index={globalIndex}
-        className={cn(
-          'rounded-sm',
-          isCurrent ? STYLES.currentMatchHighlight : STYLES.matchHighlight
-        )}
-      >
-        {text.slice(start, end)}
-      </mark>
-    )
-    lastEnd = end
-  })
-
-  if (lastEnd < text.length) {
-    segments.push(<span key={`t-${path}-${lastEnd}`}>{text.slice(lastEnd)}</span>)
-  }
-
-  return <>{segments}</>
-}
-
-interface HighlightedTextProps {
-  text: string
-  matchIndices: number[]
-  path: string
-  currentMatchIndex: number
-}
-
-/**
- * Renders text with search highlights for non-virtualized mode.
- * Accepts currentMatchIndex as prop to ensure re-render when it changes.
- */
-const HighlightedText = memo(function HighlightedText({
-  text,
-  matchIndices,
-  path,
-  currentMatchIndex,
-}: HighlightedTextProps) {
-  const searchContext = useContext(SearchContext)
-
-  if (!searchContext || matchIndices.length === 0) return <>{text}</>
-
-  return (
-    <>
-      {renderHighlightedSegments(text, searchContext.query, matchIndices, currentMatchIndex, path)}
-    </>
-  )
-})
-
-interface StructuredNodeProps {
-  name: string
-  value: unknown
-  path: string
-  expandedPaths: Set<string>
-  onToggle: (path: string) => void
-  wrapText: boolean
-  currentMatchIndex: number
-  isError?: boolean
-}
-
-/**
- * Recursive node component for non-virtualized rendering.
- * Preserves exact original styling with border-left tree lines.
- */
-const StructuredNode = memo(function StructuredNode({
-  name,
-  value,
-  path,
-  expandedPaths,
-  onToggle,
-  wrapText,
-  currentMatchIndex,
-  isError = false,
-}: StructuredNodeProps) {
-  const searchContext = useContext(SearchContext)
-  const type = getTypeLabel(value)
-  const isPrimitiveValue = isPrimitive(value)
-  const isEmptyValue = !isPrimitiveValue && isEmpty(value)
-  const isExpanded = expandedPaths.has(path)
-
-  const handleToggle = useCallback(() => onToggle(path), [onToggle, path])
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault()
-        handleToggle()
-      }
-    },
-    [handleToggle]
-  )
-
-  const childEntries = useMemo(
-    () => (isPrimitiveValue || isEmptyValue ? [] : buildEntries(value, path)),
-    [value, isPrimitiveValue, isEmptyValue, path]
-  )
-
-  const collapsedSummary = useMemo(
-    () => (isPrimitiveValue ? null : getCollapsedSummary(value)),
-    [value, isPrimitiveValue]
-  )
-
-  const badgeVariant = isError ? 'red' : BADGE_VARIANTS[type]
-  const valueText = isPrimitiveValue ? formatPrimitive(value) : ''
-  const matchIndices = searchContext?.pathToMatchIndices.get(path) ?? EMPTY_MATCH_INDICES
-
-  return (
-    <div className='flex min-w-0 flex-col'>
-      <div
-        className={STYLES.row}
-        onClick={handleToggle}
-        onKeyDown={handleKeyDown}
-        role='button'
-        tabIndex={0}
-        aria-expanded={isExpanded}
-      >
-        <span className={cn(STYLES.keyName, isError && 'text-[var(--text-error)]')}>{name}</span>
-        <Badge variant={badgeVariant} className={STYLES.badge}>
-          {type}
-        </Badge>
-        {!isExpanded && collapsedSummary && (
-          <span className={STYLES.summary}>{collapsedSummary}</span>
-        )}
-        <ChevronDown className={cn(STYLES.chevron, !isExpanded && '-rotate-90')} />
-      </div>
-
-      {isExpanded && (
-        <div className={STYLES.indent}>
-          {isPrimitiveValue ? (
-            <div
-              className={cn(
-                STYLES.value,
-                wrapText ? '[word-break:break-word]' : 'whitespace-nowrap'
-              )}
-            >
-              <HighlightedText
-                text={valueText}
-                matchIndices={matchIndices}
-                path={path}
-                currentMatchIndex={currentMatchIndex}
-              />
-            </div>
-          ) : isEmptyValue ? (
-            <div className={STYLES.emptyValue}>{Array.isArray(value) ? '[]' : '{}'}</div>
-          ) : (
-            childEntries.map((entry) => (
-              <StructuredNode
-                key={entry.path}
-                name={entry.key}
-                value={entry.value}
-                path={entry.path}
-                expandedPaths={expandedPaths}
-                onToggle={onToggle}
-                wrapText={wrapText}
-                currentMatchIndex={currentMatchIndex}
-              />
-            ))
-          )}
-        </div>
-      )}
-    </div>
-  )
-})
-
-/**
- * Flattened row for virtualization.
- */
-interface FlatRow {
-  path: string
-  key: string
-  value: unknown
-  depth: number
-  type: 'header' | 'value' | 'empty'
-  valueType: ValueType
-  isExpanded: boolean
-  isError: boolean
-  collapsedSummary: string | null
-  displayText: string
-  matchIndices: number[]
-}
-
-/**
- * Flattens the tree into rows for virtualization.
- */
-function flattenTree(
-  data: unknown,
-  expandedPaths: Set<string>,
-  pathToMatchIndices: Map<string, number[]>,
-  isError: boolean
-): FlatRow[] {
-  const rows: FlatRow[] = []
-
-  if (isError) {
-    const errorText = extractErrorMessage(data)
-    const isExpanded = expandedPaths.has('root.error')
-
-    rows.push({
-      path: 'root.error',
-      key: 'error',
-      value: errorText,
-      depth: 0,
-      type: 'header',
-      valueType: 'string',
-      isExpanded,
-      isError: true,
-      collapsedSummary: null,
-      displayText: '',
-      matchIndices: [],
-    })
-
-    if (isExpanded) {
-      rows.push({
-        path: 'root.error.value',
-        key: '',
-        value: errorText,
-        depth: 1,
-        type: 'value',
-        valueType: 'string',
-        isExpanded: false,
-        isError: true,
-        collapsedSummary: null,
-        displayText: errorText,
-        matchIndices: pathToMatchIndices.get('root.error') ?? [],
-      })
-    }
-
-    return rows
-  }
-
-  function processNode(key: string, value: unknown, path: string, depth: number): void {
-    const valueType = getTypeLabel(value)
-    const isPrimitiveValue = isPrimitive(value)
-    const isEmptyValue = !isPrimitiveValue && isEmpty(value)
-    const isExpanded = expandedPaths.has(path)
-    const collapsedSummary = isPrimitiveValue ? null : getCollapsedSummary(value)
-
-    rows.push({
-      path,
-      key,
-      value,
-      depth,
-      type: 'header',
-      valueType,
-      isExpanded,
-      isError: false,
-      collapsedSummary,
-      displayText: '',
-      matchIndices: [],
-    })
-
-    if (isExpanded) {
-      if (isPrimitiveValue) {
-        rows.push({
-          path: `${path}.value`,
-          key: '',
-          value,
-          depth: depth + 1,
-          type: 'value',
-          valueType,
-          isExpanded: false,
-          isError: false,
-          collapsedSummary: null,
-          displayText: formatPrimitive(value),
-          matchIndices: pathToMatchIndices.get(path) ?? [],
-        })
-      } else if (isEmptyValue) {
-        rows.push({
-          path: `${path}.empty`,
-          key: '',
-          value,
-          depth: depth + 1,
-          type: 'empty',
-          valueType,
-          isExpanded: false,
-          isError: false,
-          collapsedSummary: null,
-          displayText: Array.isArray(value) ? '[]' : '{}',
-          matchIndices: [],
-        })
-      } else {
-        for (const entry of buildEntries(value, path)) {
-          processNode(entry.key, entry.value, entry.path, depth + 1)
-        }
-      }
-    }
-  }
-
-  if (isPrimitive(data)) {
-    processNode('value', data, 'root.value', 0)
-  } else if (data && typeof data === 'object') {
-    for (const entry of buildEntries(data, 'root')) {
-      processNode(entry.key, entry.value, entry.path, 0)
-    }
-  }
-
-  return rows
-}
-
-/**
- * Counts total visible rows for determining virtualization threshold.
- */
-function countVisibleRows(data: unknown, expandedPaths: Set<string>, isError: boolean): number {
-  if (isError) return expandedPaths.has('root.error') ? 2 : 1
-
-  let count = 0
-
-  function countNode(value: unknown, path: string): void {
-    count++
-    if (!expandedPaths.has(path)) return
-
-    if (isPrimitive(value) || isEmpty(value)) {
-      count++
-    } else {
-      for (const entry of buildEntries(value, path)) {
-        countNode(entry.value, entry.path)
-      }
-    }
-  }
-
-  if (isPrimitive(data)) {
-    countNode(data, 'root.value')
-  } else if (data && typeof data === 'object') {
-    for (const entry of buildEntries(data, 'root')) {
-      countNode(entry.value, entry.path)
-    }
-  }
-
-  return count
-}
-
-interface VirtualizedRowProps {
-  rows: FlatRow[]
-  onToggle: (path: string) => void
-  wrapText: boolean
-  searchQuery: string
-  currentMatchIndex: number
-}
-
-/**
- * Virtualized row component for large data sets.
- */
-function VirtualizedRow({ index, style, ...props }: RowComponentProps<VirtualizedRowProps>) {
-  const { rows, onToggle, wrapText, searchQuery, currentMatchIndex } = props
-  const row = rows[index]
-  const paddingLeft = CONFIG.BASE_PADDING + row.depth * CONFIG.INDENT_PER_LEVEL
-
-  if (row.type === 'header') {
-    const badgeVariant = row.isError ? 'red' : BADGE_VARIANTS[row.valueType]
-
-    return (
-      <div style={{ ...style, paddingLeft }} data-row-index={index}>
-        <div
-          className={STYLES.row}
-          onClick={() => onToggle(row.path)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              onToggle(row.path)
-            }
-          }}
-          role='button'
-          tabIndex={0}
-          aria-expanded={row.isExpanded}
-        >
-          <span className={cn(STYLES.keyName, row.isError && 'text-[var(--text-error)]')}>
-            {row.key}
-          </span>
-          <Badge variant={badgeVariant} className={STYLES.badge}>
-            {row.valueType}
-          </Badge>
-          {!row.isExpanded && row.collapsedSummary && (
-            <span className={STYLES.summary}>{row.collapsedSummary}</span>
-          )}
-          <ChevronDown className={cn(STYLES.chevron, !row.isExpanded && '-rotate-90')} />
-        </div>
-      </div>
-    )
-  }
-
-  if (row.type === 'empty') {
-    return (
-      <div style={{ ...style, paddingLeft }} data-row-index={index}>
-        <div className={STYLES.emptyValue}>{row.displayText}</div>
-      </div>
-    )
-  }
-
-  return (
-    <div style={{ ...style, paddingLeft }} data-row-index={index}>
-      <div
-        className={cn(
-          STYLES.value,
-          row.isError && 'text-[var(--text-error)]',
-          wrapText ? '[word-break:break-word]' : 'whitespace-nowrap'
-        )}
-      >
-        {renderHighlightedSegments(
-          row.displayText,
-          searchQuery,
-          row.matchIndices,
-          currentMatchIndex,
-          row.path
-        )}
-      </div>
-    </div>
-  )
-}
-
-export interface StructuredOutputProps {
-  data: unknown
-  wrapText?: boolean
-  isError?: boolean
-  isRunning?: boolean
-  className?: string
-  searchQuery?: string
-  currentMatchIndex?: number
-  onMatchCountChange?: (count: number) => void
-  contentRef?: React.RefObject<HTMLDivElement | null>
-}
-
-/**
- * Renders structured data as nested collapsible blocks.
- * Uses virtualization for large data sets (>200 visible rows) while
- * preserving exact original styling for smaller data sets.
- */
-export const StructuredOutput = memo(function StructuredOutput({
-  data,
-  wrapText = true,
-  isError = false,
-  isRunning = false,
-  className,
-  searchQuery,
-  currentMatchIndex = 0,
-  onMatchCountChange,
-  contentRef,
-}: StructuredOutputProps) {
-  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() =>
-    computeInitialPaths(data, isError)
-  )
-  const prevDataRef = useRef(data)
-  const prevIsErrorRef = useRef(isError)
-  const internalRef = useRef<HTMLDivElement>(null)
-  const listRef = useListRef(null)
-  const [containerHeight, setContainerHeight] = useState(400)
-
-  const setContainerRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      ;(internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node
-      if (contentRef) {
-        ;(contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node
-      }
-    },
-    [contentRef]
-  )
-
-  // Measure container height
-  useEffect(() => {
-    const container = internalRef.current?.parentElement
-    if (!container) return
-
-    const updateHeight = () => setContainerHeight(container.clientHeight)
-    updateHeight()
-
-    const resizeObserver = new ResizeObserver(updateHeight)
-    resizeObserver.observe(container)
-    return () => resizeObserver.disconnect()
-  }, [])
-
-  // Reset expanded paths when data changes
-  useEffect(() => {
-    if (prevDataRef.current !== data || prevIsErrorRef.current !== isError) {
-      prevDataRef.current = data
-      prevIsErrorRef.current = isError
-      setExpandedPaths(computeInitialPaths(data, isError))
-    }
-  }, [data, isError])
-
-  const allMatchPaths = useMemo(() => {
-    if (!searchQuery) return []
-    if (isError) {
-      const errorText = extractErrorMessage(data)
-      const count = findTextMatches(errorText, searchQuery).length
-      return Array(count).fill('root.error') as string[]
-    }
-    return collectAllMatchPaths(data, searchQuery, 'root')
-  }, [data, searchQuery, isError])
-
-  useEffect(() => {
-    onMatchCountChange?.(allMatchPaths.length)
-  }, [allMatchPaths.length, onMatchCountChange])
-
-  const pathToMatchIndices = useMemo(() => buildPathToIndicesMap(allMatchPaths), [allMatchPaths])
-
-  // Auto-expand to current match
-  useEffect(() => {
-    if (
-      allMatchPaths.length === 0 ||
-      currentMatchIndex < 0 ||
-      currentMatchIndex >= allMatchPaths.length
-    ) {
-      return
-    }
-
-    const currentPath = allMatchPaths[currentMatchIndex]
-    const pathsToExpand = [currentPath, ...getAncestorPaths(currentPath)]
-
-    setExpandedPaths((prev) => {
-      if (pathsToExpand.every((p) => prev.has(p))) return prev
-      const next = new Set(prev)
-      pathsToExpand.forEach((p) => next.add(p))
-      return next
-    })
-  }, [currentMatchIndex, allMatchPaths])
-
-  const handleToggle = useCallback((path: string) => {
-    setExpandedPaths((prev) => {
-      const next = new Set(prev)
-      if (next.has(path)) {
-        next.delete(path)
-      } else {
-        next.add(path)
-      }
-      return next
-    })
-  }, [])
-
-  const rootEntries = useMemo<NodeEntry[]>(() => {
-    if (isPrimitive(data)) return [{ key: 'value', value: data, path: 'root.value' }]
-    return buildEntries(data, 'root')
-  }, [data])
-
-  const searchContextValue = useMemo<SearchContextValue | null>(() => {
-    if (!searchQuery) return null
-    return { query: searchQuery, pathToMatchIndices }
-  }, [searchQuery, pathToMatchIndices])
-
-  const visibleRowCount = useMemo(
-    () => countVisibleRows(data, expandedPaths, isError),
-    [data, expandedPaths, isError]
-  )
-  const useVirtualization = visibleRowCount > CONFIG.VIRTUALIZATION_THRESHOLD
-
-  const flatRows = useMemo(() => {
-    if (!useVirtualization) return []
-    return flattenTree(data, expandedPaths, pathToMatchIndices, isError)
-  }, [data, expandedPaths, pathToMatchIndices, isError, useVirtualization])
-
-  // Scroll to match (virtualized)
-  useEffect(() => {
-    if (!useVirtualization || allMatchPaths.length === 0 || !listRef.current) return
-
-    const currentPath = allMatchPaths[currentMatchIndex]
-    const targetPath = currentPath.endsWith('.value') ? currentPath : `${currentPath}.value`
-    const rowIndex = flatRows.findIndex((r) => r.path === targetPath || r.path === currentPath)
-
-    if (rowIndex !== -1) {
-      listRef.current.scrollToRow({ index: rowIndex, align: 'center' })
-    }
-  }, [currentMatchIndex, allMatchPaths, flatRows, listRef, useVirtualization])
-
-  // Scroll to match (non-virtualized)
-  useEffect(() => {
-    if (useVirtualization || allMatchPaths.length === 0) return
-
-    const rafId = requestAnimationFrame(() => {
-      const match = internalRef.current?.querySelector(
-        `[data-match-index="${currentMatchIndex}"]`
-      ) as HTMLElement | null
-      match?.scrollIntoView({ block: 'center', behavior: 'smooth' })
-    })
-
-    return () => cancelAnimationFrame(rafId)
-  }, [currentMatchIndex, allMatchPaths.length, expandedPaths, useVirtualization])
-
-  const containerClass = cn('flex flex-col pl-[20px]', wrapText && 'overflow-x-hidden', className)
-  const virtualizedContainerClass = cn('relative', wrapText && 'overflow-x-hidden', className)
-  const listClass = wrapText ? 'overflow-x-hidden' : 'overflow-x-auto'
-
-  // Running state
-  if (isRunning && data === undefined) {
-    return (
-      <div ref={setContainerRef} className={containerClass}>
-        <div className={STYLES.row}>
-          <span className={STYLES.keyName}>running</span>
-          <Badge variant='green' className={STYLES.badge}>
-            Running
-          </Badge>
-        </div>
-      </div>
-    )
-  }
-
-  // Empty state
-  if (rootEntries.length === 0 && !isError) {
-    return (
-      <div ref={setContainerRef} className={containerClass}>
-        <span className={STYLES.emptyValue}>null</span>
-      </div>
-    )
-  }
-
-  // Virtualized rendering
-  if (useVirtualization) {
-    return (
-      <div
-        ref={setContainerRef}
-        className={virtualizedContainerClass}
-        style={{ height: containerHeight }}
-      >
-        <List
-          listRef={listRef}
-          defaultHeight={containerHeight}
-          rowCount={flatRows.length}
-          rowHeight={CONFIG.ROW_HEIGHT}
-          rowComponent={VirtualizedRow}
-          rowProps={{
-            rows: flatRows,
-            onToggle: handleToggle,
-            wrapText,
-            searchQuery: searchQuery ?? '',
-            currentMatchIndex,
-          }}
-          overscanCount={CONFIG.OVERSCAN_COUNT}
-          className={listClass}
-        />
-      </div>
-    )
-  }
-
-  // Non-virtualized rendering (preserves exact original styling)
-  if (isError) {
-    return (
-      <SearchContext.Provider value={searchContextValue}>
-        <div ref={setContainerRef} className={containerClass}>
-          <StructuredNode
-            name='error'
-            value={extractErrorMessage(data)}
-            path='root.error'
-            expandedPaths={expandedPaths}
-            onToggle={handleToggle}
-            wrapText={wrapText}
-            currentMatchIndex={currentMatchIndex}
-            isError
-          />
-        </div>
-      </SearchContext.Provider>
-    )
-  }
-
-  return (
-    <SearchContext.Provider value={searchContextValue}>
-      <div ref={setContainerRef} className={containerClass}>
-        {rootEntries.map((entry) => (
-          <StructuredNode
-            key={entry.path}
-            name={entry.key}
-            value={entry.value}
-            path={entry.path}
-            expandedPaths={expandedPaths}
-            onToggle={handleToggle}
-            wrapText={wrapText}
-            currentMatchIndex={currentMatchIndex}
-          />
-        ))}
-      </div>
-    </SearchContext.Provider>
-  )
-})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/index.ts

@@ -1,4 +0,0 @@
-export { OutputContextMenu, type OutputContextMenuProps } from './components/output-context-menu'
-export { StructuredOutput, type StructuredOutputProps } from './components/structured-output'
-export type { OutputPanelProps } from './output-panel'
-export { OutputPanel } from './output-panel'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx

@@ -1,643 +0,0 @@
-'use client'
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import clsx from 'clsx'
-import {
-  ArrowDown,
-  ArrowDownToLine,
-  ArrowUp,
-  Check,
-  Clipboard,
-  Database,
-  MoreHorizontal,
-  Palette,
-  Pause,
-  Search,
-  Trash2,
-  X,
-} from 'lucide-react'
-import Link from 'next/link'
-import {
-  Button,
-  Code,
-  Input,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
-  Tooltip,
-} from '@/components/emcn'
-import { FilterPopover } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover'
-import { OutputContextMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/output-context-menu'
-import { StructuredOutput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output'
-import { ToggleButton } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button'
-import type {
-  BlockInfo,
-  TerminalFilters,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
-import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
-import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
-import type { ConsoleEntry } from '@/stores/terminal'
-import { useTerminalStore } from '@/stores/terminal'
-
-interface OutputCodeContentProps {
-  code: string
-  language: 'javascript' | 'json'
-  wrapText: boolean
-  searchQuery: string | undefined
-  currentMatchIndex: number
-  onMatchCountChange: (count: number) => void
-  contentRef: React.RefObject<HTMLDivElement | null>
-}
-
-const OutputCodeContent = React.memo(function OutputCodeContent({
-  code,
-  language,
-  wrapText,
-  searchQuery,
-  currentMatchIndex,
-  onMatchCountChange,
-  contentRef,
-}: OutputCodeContentProps) {
-  return (
-    <Code.Viewer
-      code={code}
-      showGutter
-      language={language}
-      className='m-0 min-h-full rounded-none border-0 bg-[var(--surface-1)] dark:bg-[var(--surface-1)]'
-      paddingLeft={8}
-      gutterStyle={{ backgroundColor: 'transparent' }}
-      wrapText={wrapText}
-      searchQuery={searchQuery}
-      currentMatchIndex={currentMatchIndex}
-      onMatchCountChange={onMatchCountChange}
-      contentRef={contentRef}
-      virtualized
-      showCollapseColumn={language === 'json'}
-    />
-  )
-})
-
-/**
- * Props for the OutputPanel component
- * Store-backed settings (wrapText, openOnRun, structuredView, outputPanelWidth)
- * are accessed directly from useTerminalStore to reduce prop drilling.
- */
-export interface OutputPanelProps {
-  selectedEntry: ConsoleEntry
-  handleOutputPanelResizeMouseDown: (e: React.MouseEvent) => void
-  handleHeaderClick: () => void
-  isExpanded: boolean
-  expandToLastHeight: () => void
-  showInput: boolean
-  setShowInput: (show: boolean) => void
-  hasInputData: boolean
-  isPlaygroundEnabled: boolean
-  shouldShowTrainingButton: boolean
-  isTraining: boolean
-  handleTrainingClick: (e: React.MouseEvent) => void
-  showCopySuccess: boolean
-  handleCopy: () => void
-  filteredEntries: ConsoleEntry[]
-  handleExportConsole: (e: React.MouseEvent) => void
-  hasActiveFilters: boolean
-  handleClearConsole: (e: React.MouseEvent) => void
-  shouldShowCodeDisplay: boolean
-  outputDataStringified: string
-  outputData: unknown
-  handleClearConsoleFromMenu: () => void
-  filters: TerminalFilters
-  toggleBlock: (blockId: string) => void
-  toggleStatus: (status: 'error' | 'info') => void
-  uniqueBlocks: BlockInfo[]
-}
-
-/**
- * Output panel component that manages its own search state.
- * Accesses store-backed settings directly to reduce prop drilling.
- */
-export const OutputPanel = React.memo(function OutputPanel({
-  selectedEntry,
-  handleOutputPanelResizeMouseDown,
-  handleHeaderClick,
-  isExpanded,
-  expandToLastHeight,
-  showInput,
-  setShowInput,
-  hasInputData,
-  isPlaygroundEnabled,
-  shouldShowTrainingButton,
-  isTraining,
-  handleTrainingClick,
-  showCopySuccess,
-  handleCopy,
-  filteredEntries,
-  handleExportConsole,
-  hasActiveFilters,
-  handleClearConsole,
-  shouldShowCodeDisplay,
-  outputDataStringified,
-  outputData,
-  handleClearConsoleFromMenu,
-  filters,
-  toggleBlock,
-  toggleStatus,
-  uniqueBlocks,
-}: OutputPanelProps) {
-  // Access store-backed settings directly to reduce prop drilling
-  const outputPanelWidth = useTerminalStore((state) => state.outputPanelWidth)
-  const wrapText = useTerminalStore((state) => state.wrapText)
-  const setWrapText = useTerminalStore((state) => state.setWrapText)
-  const openOnRun = useTerminalStore((state) => state.openOnRun)
-  const setOpenOnRun = useTerminalStore((state) => state.setOpenOnRun)
-  const structuredView = useTerminalStore((state) => state.structuredView)
-  const setStructuredView = useTerminalStore((state) => state.setStructuredView)
-
-  const outputContentRef = useRef<HTMLDivElement>(null)
-  const [filtersOpen, setFiltersOpen] = useState(false)
-  const [outputOptionsOpen, setOutputOptionsOpen] = useState(false)
-  const {
-    isSearchActive: isOutputSearchActive,
-    searchQuery: outputSearchQuery,
-    setSearchQuery: setOutputSearchQuery,
-    matchCount,
-    currentMatchIndex,
-    activateSearch: activateOutputSearch,
-    closeSearch: closeOutputSearch,
-    goToNextMatch,
-    goToPreviousMatch,
-    handleMatchCountChange,
-    searchInputRef: outputSearchInputRef,
-  } = useCodeViewerFeatures({
-    contentRef: outputContentRef,
-    externalWrapText: wrapText,
-    onWrapTextChange: setWrapText,
-  })
-
-  // Context menu state for output panel
-  const [hasSelection, setHasSelection] = useState(false)
-  const [storedSelectionText, setStoredSelectionText] = useState('')
-  const {
-    isOpen: isOutputMenuOpen,
-    position: outputMenuPosition,
-    menuRef: outputMenuRef,
-    handleContextMenu: handleOutputContextMenu,
-    closeMenu: closeOutputMenu,
-  } = useContextMenu()
-
-  const handleOutputPanelContextMenu = useCallback(
-    (e: React.MouseEvent) => {
-      const selection = window.getSelection()
-      const selectionText = selection?.toString() || ''
-      setStoredSelectionText(selectionText)
-      setHasSelection(selectionText.length > 0)
-      handleOutputContextMenu(e)
-    },
-    [handleOutputContextMenu]
-  )
-
-  const handleCopySelection = useCallback(() => {
-    if (storedSelectionText) {
-      navigator.clipboard.writeText(storedSelectionText)
-    }
-  }, [storedSelectionText])
-
-  // Memoized callbacks to avoid inline arrow functions
-  const handleToggleStructuredView = useCallback(() => {
-    setStructuredView(!structuredView)
-  }, [structuredView, setStructuredView])
-
-  const handleToggleWrapText = useCallback(() => {
-    setWrapText(!wrapText)
-  }, [wrapText, setWrapText])
-
-  const handleToggleOpenOnRun = useCallback(() => {
-    setOpenOnRun(!openOnRun)
-  }, [openOnRun, setOpenOnRun])
-
-  const handleCopyClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      handleCopy()
-    },
-    [handleCopy]
-  )
-
-  const handleSearchClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      activateOutputSearch()
-    },
-    [activateOutputSearch]
-  )
-
-  const handleCloseSearchClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      closeOutputSearch()
-    },
-    [closeOutputSearch]
-  )
-
-  const handleOutputButtonClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      if (!isExpanded) {
-        expandToLastHeight()
-      }
-      if (showInput) setShowInput(false)
-    },
-    [isExpanded, expandToLastHeight, showInput, setShowInput]
-  )
-
-  const handleInputButtonClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      if (!isExpanded) {
-        expandToLastHeight()
-      }
-      setShowInput(true)
-    },
-    [isExpanded, expandToLastHeight, setShowInput]
-  )
-
-  const handleToggleButtonClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation()
-      handleHeaderClick()
-    },
-    [handleHeaderClick]
-  )
-
-  /**
-   * Track text selection state for context menu.
-   * Skip updates when the context menu is open to prevent the selection
-   * state from changing mid-click (which would disable the copy button).
-   */
-  useEffect(() => {
-    const handleSelectionChange = () => {
-      if (isOutputMenuOpen) return
-
-      const selection = window.getSelection()
-      setHasSelection(Boolean(selection && selection.toString().length > 0))
-    }
-
-    document.addEventListener('selectionchange', handleSelectionChange)
-    return () => document.removeEventListener('selectionchange', handleSelectionChange)
-  }, [isOutputMenuOpen])
-
-  // Memoize the search query for structured output to avoid re-renders
-  const structuredSearchQuery = useMemo(
-    () => (isOutputSearchActive ? outputSearchQuery : undefined),
-    [isOutputSearchActive, outputSearchQuery]
-  )
-
-  return (
-    <>
-      <div
-        className='absolute top-0 right-0 bottom-0 flex flex-col border-[var(--border)] border-l bg-[var(--surface-1)]'
-        style={{ width: `${outputPanelWidth}px` }}
-      >
-        {/* Horizontal Resize Handle */}
-        <div
-          className='-ml-[4px] absolute top-0 bottom-0 left-0 z-20 w-[8px] cursor-ew-resize'
-          onMouseDown={handleOutputPanelResizeMouseDown}
-          role='separator'
-          aria-label='Resize output panel'
-          aria-orientation='vertical'
-        />
-
-        {/* Header */}
-        <div
-          className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--surface-1)] pr-[16px] pl-[10px]'
-          onClick={handleHeaderClick}
-        >
-          <div className='flex items-center'>
-            <Button
-              variant='ghost'
-              className={clsx(
-                'px-[8px] py-[6px] text-[12px]',
-                !showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-tertiary)]'
-              )}
-              onClick={handleOutputButtonClick}
-              aria-label='Show output'
-            >
-              Output
-            </Button>
-            {hasInputData && (
-              <Button
-                variant='ghost'
-                className={clsx(
-                  'px-[8px] py-[6px] text-[12px]',
-                  showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-tertiary)]'
-                )}
-                onClick={handleInputButtonClick}
-                aria-label='Show input'
-              >
-                Input
-              </Button>
-            )}
-          </div>
-          <div className='flex flex-shrink-0 items-center gap-[8px]'>
-            {/* Unified filter popover */}
-            {filteredEntries.length > 0 && (
-              <FilterPopover
-                open={filtersOpen}
-                onOpenChange={setFiltersOpen}
-                filters={filters}
-                toggleStatus={toggleStatus}
-                toggleBlock={toggleBlock}
-                uniqueBlocks={uniqueBlocks}
-                hasActiveFilters={hasActiveFilters}
-              />
-            )}
-
-            {isOutputSearchActive ? (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    onClick={handleCloseSearchClick}
-                    aria-label='Close search'
-                    className='!p-1.5 -m-1.5'
-                  >
-                    <X className='h-[12px] w-[12px]' />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <span>Close search</span>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            ) : (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    onClick={handleSearchClick}
-                    aria-label='Search in output'
-                    className='!p-1.5 -m-1.5'
-                  >
-                    <Search className='h-[12px] w-[12px]' />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <span>Search</span>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            )}
-
-            {isPlaygroundEnabled && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Link href='/playground'>
-                    <Button
-                      variant='ghost'
-                      aria-label='Component Playground'
-                      className='!p-1.5 -m-1.5'
-                    >
-                      <Palette className='h-[12px] w-[12px]' />
-                    </Button>
-                  </Link>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <span>Component Playground</span>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            )}
-
-            {shouldShowTrainingButton && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    onClick={handleTrainingClick}
-                    aria-label={isTraining ? 'Stop training' : 'Train Copilot'}
-                    className={clsx(
-                      '!p-1.5 -m-1.5',
-                      isTraining && 'text-orange-600 dark:text-orange-400'
-                    )}
-                  >
-                    {isTraining ? (
-                      <Pause className='h-[12px] w-[12px]' />
-                    ) : (
-                      <Database className='h-[12px] w-[12px]' />
-                    )}
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <span>{isTraining ? 'Stop Training' : 'Train Copilot'}</span>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            )}
-
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  onClick={handleCopyClick}
-                  aria-label='Copy output'
-                  className='!p-1.5 -m-1.5'
-                >
-                  {showCopySuccess ? (
-                    <Check className='h-[12px] w-[12px]' />
-                  ) : (
-                    <Clipboard className='h-[12px] w-[12px]' />
-                  )}
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content>
-                <span>{showCopySuccess ? 'Copied' : 'Copy output'}</span>
-              </Tooltip.Content>
-            </Tooltip.Root>
-            {filteredEntries.length > 0 && (
-              <>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      variant='ghost'
-                      onClick={handleExportConsole}
-                      aria-label='Download console CSV'
-                      className='!p-1.5 -m-1.5'
-                    >
-                      <ArrowDownToLine className='h-3 w-3' />
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content>
-                    <span>Download CSV</span>
-                  </Tooltip.Content>
-                </Tooltip.Root>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      variant='ghost'
-                      onClick={handleClearConsole}
-                      aria-label='Clear console'
-                      className='!p-1.5 -m-1.5'
-                    >
-                      <Trash2 className='h-3 w-3' />
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content>
-                    <Tooltip.Shortcut keys='⌘D'>Clear console</Tooltip.Shortcut>
-                  </Tooltip.Content>
-                </Tooltip.Root>
-              </>
-            )}
-            <Popover open={outputOptionsOpen} onOpenChange={setOutputOptionsOpen} size='sm'>
-              <PopoverTrigger asChild>
-                <Button
-                  variant='ghost'
-                  onClick={(e) => e.stopPropagation()}
-                  aria-label='Terminal options'
-                  className='!p-1.5 -m-1.5'
-                >
-                  <MoreHorizontal className='h-3.5 w-3.5' />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent
-                side='bottom'
-                align='end'
-                sideOffset={4}
-                collisionPadding={0}
-                onClick={(e) => e.stopPropagation()}
-                style={{ minWidth: '140px', maxWidth: '160px' }}
-                className='gap-[2px]'
-              >
-                <PopoverItem
-                  active={structuredView}
-                  showCheck={structuredView}
-                  onClick={handleToggleStructuredView}
-                >
-                  <span>Structured view</span>
-                </PopoverItem>
-                <PopoverItem active={wrapText} showCheck={wrapText} onClick={handleToggleWrapText}>
-                  <span>Wrap text</span>
-                </PopoverItem>
-                <PopoverItem
-                  active={openOnRun}
-                  showCheck={openOnRun}
-                  onClick={handleToggleOpenOnRun}
-                >
-                  <span>Open on run</span>
-                </PopoverItem>
-              </PopoverContent>
-            </Popover>
-            <ToggleButton isExpanded={isExpanded} onClick={handleToggleButtonClick} />
-          </div>
-        </div>
-
-        {/* Search Overlay */}
-        {isOutputSearchActive && (
-          <div
-            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-[6px] rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--surface-1)] px-[6px] shadow-sm'
-            onClick={(e) => e.stopPropagation()}
-            data-toolbar-root
-            data-search-active='true'
-          >
-            <Input
-              ref={outputSearchInputRef}
-              type='text'
-              value={outputSearchQuery}
-              onChange={(e) => setOutputSearchQuery(e.target.value)}
-              placeholder='Search...'
-              className='mr-[2px] h-[23px] w-[94px] text-[12px]'
-            />
-            <span
-              className={clsx(
-                'w-[58px] font-medium text-[11px]',
-                matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-              )}
-            >
-              {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : 'No results'}
-            </span>
-            <Button
-              variant='ghost'
-              onClick={goToPreviousMatch}
-              aria-label='Previous match'
-              className='!p-1.5 -m-1.5'
-              disabled={matchCount === 0}
-            >
-              <ArrowUp className='h-[12px] w-[12px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              onClick={goToNextMatch}
-              aria-label='Next match'
-              className='!p-1.5 -m-1.5'
-              disabled={matchCount === 0}
-            >
-              <ArrowDown className='h-[12px] w-[12px]' />
-            </Button>
-            <Button
-              variant='ghost'
-              onClick={closeOutputSearch}
-              aria-label='Close search'
-              className='!p-1.5 -m-1.5'
-            >
-              <X className='h-[12px] w-[12px]' />
-            </Button>
-          </div>
-        )}
-
-        {/* Content */}
-        <div
-          className={clsx('flex-1 overflow-y-auto', !wrapText && 'overflow-x-auto')}
-          onContextMenu={handleOutputPanelContextMenu}
-        >
-          {shouldShowCodeDisplay ? (
-            <OutputCodeContent
-              code={selectedEntry.input.code}
-              language={(selectedEntry.input.language as 'javascript' | 'json') || 'javascript'}
-              wrapText={wrapText}
-              searchQuery={structuredSearchQuery}
-              currentMatchIndex={currentMatchIndex}
-              onMatchCountChange={handleMatchCountChange}
-              contentRef={outputContentRef}
-            />
-          ) : structuredView ? (
-            <StructuredOutput
-              data={outputData}
-              wrapText={wrapText}
-              isError={!showInput && Boolean(selectedEntry.error)}
-              isRunning={!showInput && Boolean(selectedEntry.isRunning)}
-              className='min-h-full'
-              searchQuery={structuredSearchQuery}
-              currentMatchIndex={currentMatchIndex}
-              onMatchCountChange={handleMatchCountChange}
-              contentRef={outputContentRef}
-            />
-          ) : (
-            <OutputCodeContent
-              code={outputDataStringified}
-              language='json'
-              wrapText={wrapText}
-              searchQuery={structuredSearchQuery}
-              currentMatchIndex={currentMatchIndex}
-              onMatchCountChange={handleMatchCountChange}
-              contentRef={outputContentRef}
-            />
-          )}
-        </div>
-      </div>
-
-      {/* Output Panel Context Menu */}
-      <OutputContextMenu
-        isOpen={isOutputMenuOpen}
-        position={outputMenuPosition}
-        menuRef={outputMenuRef}
-        onClose={closeOutputMenu}
-        onCopySelection={handleCopySelection}
-        onCopyAll={handleCopy}
-        onSearch={activateOutputSearch}
-        structuredView={structuredView}
-        onToggleStructuredView={handleToggleStructuredView}
-        wrapText={wrapText}
-        onToggleWrap={handleToggleWrapText}
-        openOnRun={openOnRun}
-        onToggleOpenOnRun={handleToggleOpenOnRun}
-        onClearConsole={handleClearConsoleFromMenu}
-        hasSelection={hasSelection}
-      />
-    </>
-  )
-})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/status-display/index.ts

@@ -1 +0,0 @@
-export { RunningBadge, StatusDisplay, type StatusDisplayProps } from './status-display'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/status-display/status-display.tsx

@@ -1,43 +0,0 @@
-'use client'
-
-import { memo } from 'react'
-import { Badge } from '@/components/emcn'
-import { BADGE_STYLE } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
-
-/**
- * Running badge component - displays a consistent "Running" indicator
- */
-export const RunningBadge = memo(function RunningBadge() {
-  return (
-    <Badge variant='green' className={BADGE_STYLE}>
-      Running
-    </Badge>
-  )
-})
-
-/**
- * Props for StatusDisplay component
- */
-export interface StatusDisplayProps {
-  isRunning: boolean
-  isCanceled: boolean
-  formattedDuration: string
-}
-
-/**
- * Reusable status display for terminal rows.
- * Shows Running badge, 'canceled' text, or formatted duration.
- */
-export const StatusDisplay = memo(function StatusDisplay({
-  isRunning,
-  isCanceled,
-  formattedDuration,
-}: StatusDisplayProps) {
-  if (isRunning) {
-    return <RunningBadge />
-  }
-  if (isCanceled) {
-    return <>canceled</>
-  }
-  return <>{formattedDuration}</>
-})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/index.ts

@@ -1 +0,0 @@
-export { ToggleButton, type ToggleButtonProps } from './toggle-button'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/toggle-button/toggle-button.tsx

@@ -1,33 +0,0 @@
-'use client'
-
-import type React from 'react'
-import { memo } from 'react'
-import clsx from 'clsx'
-import { ChevronDown } from 'lucide-react'
-import { Button } from '@/components/emcn'
-
-export interface ToggleButtonProps {
-  isExpanded: boolean
-  onClick: (e: React.MouseEvent) => void
-}
-
-/**
- * Toggle button component for terminal expand/collapse
- */
-export const ToggleButton = memo(function ToggleButton({ isExpanded, onClick }: ToggleButtonProps) {
-  return (
-    <Button
-      variant='ghost'
-      className='!p-1.5 -m-1.5'
-      onClick={onClick}
-      aria-label='Toggle terminal'
-    >
-      <ChevronDown
-        className={clsx(
-          'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
-          !isExpanded && 'rotate-180'
-        )}
-      />
-    </Button>
-  )
-})

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/index.ts

@@ -1,4 +1,3 @@
-export type { SortConfig, SortDirection, SortField, TerminalFilters } from '../types'
 export { useOutputPanelResize } from './use-output-panel-resize'
 export { useTerminalFilters } from './use-terminal-filters'
 export { useTerminalResize } from './use-terminal-resize'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-output-panel-resize.ts

@@ -1,7 +1,9 @@
 import { useCallback, useEffect, useState } from 'react'
-import { OUTPUT_PANEL_WIDTH, TERMINAL_BLOCK_COLUMN_WIDTH } from '@/stores/constants'
+import { OUTPUT_PANEL_WIDTH } from '@/stores/constants'
 import { useTerminalStore } from '@/stores/terminal'
 
+const BLOCK_COLUMN_WIDTH = 240
+
 export function useOutputPanelResize() {
   const setOutputPanelWidth = useTerminalStore((state) => state.setOutputPanelWidth)
   const [isResizing, setIsResizing] = useState(false)
@@ -23,7 +25,7 @@ export function useOutputPanelResize() {
 
       const newWidth = window.innerWidth - e.clientX - panelWidth
       const terminalWidth = window.innerWidth - sidebarWidth - panelWidth
-      const maxWidth = terminalWidth - TERMINAL_BLOCK_COLUMN_WIDTH
+      const maxWidth = terminalWidth - BLOCK_COLUMN_WIDTH
       const clampedWidth = Math.max(OUTPUT_PANEL_WIDTH.MIN, Math.min(newWidth, maxWidth))
 
       setOutputPanelWidth(clampedWidth)

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-filters.ts

@@ -1,10 +1,26 @@
 import { useCallback, useMemo, useState } from 'react'
-import type {
-  SortConfig,
-  TerminalFilters,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types'
 import type { ConsoleEntry } from '@/stores/terminal'
 
+/**
+ * Sort configuration
+ */
+export type SortField = 'timestamp'
+export type SortDirection = 'asc' | 'desc'
+
+export interface SortConfig {
+  field: SortField
+  direction: SortDirection
+}
+
+/**
+ * Filter configuration state
+ */
+export interface TerminalFilters {
+  blockIds: Set<string>
+  statuses: Set<'error' | 'info'>
+  runIds: Set<string>
+}
+
 /**
  * Custom hook to manage terminal filters and sorting.
  * Provides filter state, sort state, and filtering/sorting logic for console entries.
@@ -15,6 +31,7 @@ export function useTerminalFilters() {
   const [filters, setFilters] = useState<TerminalFilters>({
     blockIds: new Set(),
     statuses: new Set(),
+    runIds: new Set(),
   })
 
   const [sortConfig, setSortConfig] = useState<SortConfig>({
@@ -52,6 +69,21 @@ export function useTerminalFilters() {
     })
   }, [])
 
+  /**
+   * Toggles a run ID filter
+   */
+  const toggleRunId = useCallback((runId: string) => {
+    setFilters((prev) => {
+      const newRunIds = new Set(prev.runIds)
+      if (newRunIds.has(runId)) {
+        newRunIds.delete(runId)
+      } else {
+        newRunIds.add(runId)
+      }
+      return { ...prev, runIds: newRunIds }
+    })
+  }, [])
+
   /**
    * Toggles sort direction between ascending and descending
    */
@@ -69,6 +101,7 @@ export function useTerminalFilters() {
     setFilters({
       blockIds: new Set(),
       statuses: new Set(),
+      runIds: new Set(),
     })
   }, [])
 
@@ -76,7 +109,7 @@ export function useTerminalFilters() {
    * Checks if any filters are active
    */
   const hasActiveFilters = useMemo(() => {
-    return filters.blockIds.size > 0 || filters.statuses.size > 0
+    return filters.blockIds.size > 0 || filters.statuses.size > 0 || filters.runIds.size > 0
   }, [filters])
 
   /**
@@ -101,6 +134,14 @@ export function useTerminalFilters() {
             if (!hasStatus) return false
           }
 
+          // Run ID filter
+          if (
+            filters.runIds.size > 0 &&
+            (!entry.executionId || !filters.runIds.has(entry.executionId))
+          ) {
+            return false
+          }
+
           return true
         })
       }
@@ -123,6 +164,7 @@ export function useTerminalFilters() {
     sortConfig,
     toggleBlock,
     toggleStatus,
+    toggleRunId,
     toggleSort,
     clearFilters,
     hasActiveFilters,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts

@@ -1,64 +0,0 @@
-/**
- * Terminal filter configuration state
- */
-export interface TerminalFilters {
-  blockIds: Set<string>
-  statuses: Set<'error' | 'info'>
-}
-
-/**
- * Context menu position for positioning floating menus
- */
-export interface ContextMenuPosition {
-  x: number
-  y: number
-}
-
-/**
- * Sort field options for terminal entries
- */
-export type SortField = 'timestamp'
-
-/**
- * Sort direction options
- */
-export type SortDirection = 'asc' | 'desc'
-
-/**
- * Sort configuration for terminal entries
- */
-export interface SortConfig {
-  field: SortField
-  direction: SortDirection
-}
-
-/**
- * Status type for console entries
- */
-export type EntryStatus = 'error' | 'info'
-
-/**
- * Block information for filters
- */
-export interface BlockInfo {
-  blockId: string
-  blockName: string
-  blockType: string
-}
-
-/**
- * Common row styling classes for terminal components
- */
-export const ROW_STYLES = {
-  base: 'group flex cursor-pointer items-center justify-between gap-[8px] rounded-[8px] px-[6px]',
-  selected: 'bg-[var(--surface-6)] dark:bg-[var(--surface-5)]',
-  hover: 'hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
-  nested:
-    'mt-[2px] ml-[3px] flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[9px]',
-  iconButton: '!p-1.5 -m-1.5',
-} as const
-
-/**
- * Common badge styling for status badges
- */
-export const BADGE_STYLE = 'rounded-[4px] px-[4px] py-[0px] text-[11px]'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/utils.ts

@@ -1,452 +0,0 @@
-import type React from 'react'
-import { RepeatIcon, SplitIcon } from 'lucide-react'
-import { getBlock } from '@/blocks'
-import { TERMINAL_BLOCK_COLUMN_WIDTH } from '@/stores/constants'
-import type { ConsoleEntry } from '@/stores/terminal'
-
-/**
- * Subflow colors matching the subflow tool configs
- */
-const SUBFLOW_COLORS = {
-  loop: '#2FB3FF',
-  parallel: '#FEE12B',
-} as const
-
-/**
- * Retrieves the icon component for a given block type
- */
-export function getBlockIcon(
-  blockType: string
-): React.ComponentType<{ className?: string }> | null {
-  const blockConfig = getBlock(blockType)
-
-  if (blockConfig?.icon) {
-    return blockConfig.icon
-  }
-
-  if (blockType === 'loop') {
-    return RepeatIcon
-  }
-
-  if (blockType === 'parallel') {
-    return SplitIcon
-  }
-
-  return null
-}
-
-/**
- * Gets the background color for a block type
- */
-export function getBlockColor(blockType: string): string {
-  const blockConfig = getBlock(blockType)
-  if (blockConfig?.bgColor) {
-    return blockConfig.bgColor
-  }
-  // Use proper subflow colors matching the toolbar configs
-  if (blockType === 'loop') {
-    return SUBFLOW_COLORS.loop
-  }
-  if (blockType === 'parallel') {
-    return SUBFLOW_COLORS.parallel
-  }
-  return '#6b7280'
-}
-
-/**
- * Formats duration from milliseconds to readable format
- */
-export function formatDuration(ms?: number): string {
-  if (ms === undefined || ms === null) return '-'
-  if (ms < 1000) return `${ms}ms`
-  return `${(ms / 1000).toFixed(2)}s`
-}
-
-/**
- * Determines if a keyboard event originated from a text-editable element
- */
-export function isEventFromEditableElement(e: KeyboardEvent): boolean {
-  const target = e.target as HTMLElement | null
-  if (!target) return false
-
-  const isEditable = (el: HTMLElement | null): boolean => {
-    if (!el) return false
-    if (el instanceof HTMLInputElement) return true
-    if (el instanceof HTMLTextAreaElement) return true
-    if ((el as HTMLElement).isContentEditable) return true
-    const role = el.getAttribute('role')
-    if (role === 'textbox' || role === 'combobox') return true
-    return false
-  }
-
-  let el: HTMLElement | null = target
-  while (el) {
-    if (isEditable(el)) return true
-    el = el.parentElement
-  }
-  return false
-}
-
-/**
- * Checks if a block type is a subflow (loop or parallel)
- */
-export function isSubflowBlockType(blockType: string): boolean {
-  const lower = blockType?.toLowerCase() || ''
-  return lower === 'loop' || lower === 'parallel'
-}
-
-/**
- * Node type for the tree structure
- */
-export type EntryNodeType = 'block' | 'subflow' | 'iteration'
-
-/**
- * Entry node for tree structure - represents a block, subflow, or iteration
- */
-export interface EntryNode {
-  /** The console entry (for blocks) or synthetic entry (for subflows/iterations) */
-  entry: ConsoleEntry
-  /** Child nodes */
-  children: EntryNode[]
-  /** Node type */
-  nodeType: EntryNodeType
-  /** Iteration info for iteration nodes */
-  iterationInfo?: {
-    current: number
-    total?: number
-  }
-}
-
-/**
- * Execution group interface for grouping entries by execution
- */
-export interface ExecutionGroup {
-  executionId: string
-  startTime: string
-  endTime: string
-  startTimeMs: number
-  endTimeMs: number
-  duration: number
-  status: 'success' | 'error'
-  /** Flat list of entries (legacy, kept for filters) */
-  entries: ConsoleEntry[]
-  /** Tree structure of entry nodes for nested display */
-  entryTree: EntryNode[]
-}
-
-/**
- * Iteration group for grouping blocks within the same iteration
- */
-interface IterationGroup {
-  iterationType: string
-  iterationCurrent: number
-  iterationTotal?: number
-  blocks: ConsoleEntry[]
-  startTimeMs: number
-}
-
-/**
- * Builds a tree structure from flat entries.
- * Groups iteration entries by (iterationType, iterationCurrent), showing all blocks
- * that executed within each iteration.
- * Sorts by start time to ensure chronological order.
- */
-function buildEntryTree(entries: ConsoleEntry[]): EntryNode[] {
-  // Separate regular blocks from iteration entries
-  const regularBlocks: ConsoleEntry[] = []
-  const iterationEntries: ConsoleEntry[] = []
-
-  for (const entry of entries) {
-    if (entry.iterationType && entry.iterationCurrent !== undefined) {
-      iterationEntries.push(entry)
-    } else {
-      regularBlocks.push(entry)
-    }
-  }
-
-  // Group iteration entries by (iterationType, iterationCurrent)
-  const iterationGroupsMap = new Map<string, IterationGroup>()
-  for (const entry of iterationEntries) {
-    const key = `${entry.iterationType}-${entry.iterationCurrent}`
-    let group = iterationGroupsMap.get(key)
-    const entryStartMs = new Date(entry.startedAt || entry.timestamp).getTime()
-
-    if (!group) {
-      group = {
-        iterationType: entry.iterationType!,
-        iterationCurrent: entry.iterationCurrent!,
-        iterationTotal: entry.iterationTotal,
-        blocks: [],
-        startTimeMs: entryStartMs,
-      }
-      iterationGroupsMap.set(key, group)
-    } else {
-      // Update start time to earliest
-      if (entryStartMs < group.startTimeMs) {
-        group.startTimeMs = entryStartMs
-      }
-      // Update total if available
-      if (entry.iterationTotal !== undefined) {
-        group.iterationTotal = entry.iterationTotal
-      }
-    }
-    group.blocks.push(entry)
-  }
-
-  // Sort blocks within each iteration by start time ascending (oldest first, top-down)
-  for (const group of iterationGroupsMap.values()) {
-    group.blocks.sort((a, b) => {
-      const aStart = new Date(a.startedAt || a.timestamp).getTime()
-      const bStart = new Date(b.startedAt || b.timestamp).getTime()
-      return aStart - bStart
-    })
-  }
-
-  // Group iterations by iterationType to create subflow parents
-  const subflowGroups = new Map<string, IterationGroup[]>()
-  for (const group of iterationGroupsMap.values()) {
-    const type = group.iterationType
-    let groups = subflowGroups.get(type)
-    if (!groups) {
-      groups = []
-      subflowGroups.set(type, groups)
-    }
-    groups.push(group)
-  }
-
-  // Sort iterations within each subflow by iteration number
-  for (const groups of subflowGroups.values()) {
-    groups.sort((a, b) => a.iterationCurrent - b.iterationCurrent)
-  }
-
-  // Build subflow nodes with iteration children
-  const subflowNodes: EntryNode[] = []
-  for (const [iterationType, iterationGroups] of subflowGroups.entries()) {
-    // Calculate subflow timing from all its iterations
-    const firstIteration = iterationGroups[0]
-    const allBlocks = iterationGroups.flatMap((g) => g.blocks)
-    const subflowStartMs = Math.min(
-      ...allBlocks.map((b) => new Date(b.startedAt || b.timestamp).getTime())
-    )
-    const subflowEndMs = Math.max(
-      ...allBlocks.map((b) => new Date(b.endedAt || b.timestamp).getTime())
-    )
-    const totalDuration = allBlocks.reduce((sum, b) => sum + (b.durationMs || 0), 0)
-
-    // Create synthetic subflow parent entry
-    const syntheticSubflow: ConsoleEntry = {
-      id: `subflow-${iterationType}-${firstIteration.blocks[0]?.executionId || 'unknown'}`,
-      timestamp: new Date(subflowStartMs).toISOString(),
-      workflowId: firstIteration.blocks[0]?.workflowId || '',
-      blockId: `${iterationType}-container`,
-      blockName: iterationType.charAt(0).toUpperCase() + iterationType.slice(1),
-      blockType: iterationType,
-      executionId: firstIteration.blocks[0]?.executionId,
-      startedAt: new Date(subflowStartMs).toISOString(),
-      endedAt: new Date(subflowEndMs).toISOString(),
-      durationMs: totalDuration,
-      success: !allBlocks.some((b) => b.error),
-    }
-
-    // Build iteration child nodes
-    const iterationNodes: EntryNode[] = iterationGroups.map((iterGroup) => {
-      // Create synthetic iteration entry
-      const iterBlocks = iterGroup.blocks
-      const iterStartMs = Math.min(
-        ...iterBlocks.map((b) => new Date(b.startedAt || b.timestamp).getTime())
-      )
-      const iterEndMs = Math.max(
-        ...iterBlocks.map((b) => new Date(b.endedAt || b.timestamp).getTime())
-      )
-      const iterDuration = iterBlocks.reduce((sum, b) => sum + (b.durationMs || 0), 0)
-
-      const syntheticIteration: ConsoleEntry = {
-        id: `iteration-${iterationType}-${iterGroup.iterationCurrent}-${iterBlocks[0]?.executionId || 'unknown'}`,
-        timestamp: new Date(iterStartMs).toISOString(),
-        workflowId: iterBlocks[0]?.workflowId || '',
-        blockId: `iteration-${iterGroup.iterationCurrent}`,
-        blockName: `Iteration ${iterGroup.iterationCurrent}${iterGroup.iterationTotal !== undefined ? ` / ${iterGroup.iterationTotal}` : ''}`,
-        blockType: iterationType,
-        executionId: iterBlocks[0]?.executionId,
-        startedAt: new Date(iterStartMs).toISOString(),
-        endedAt: new Date(iterEndMs).toISOString(),
-        durationMs: iterDuration,
-        success: !iterBlocks.some((b) => b.error),
-        iterationCurrent: iterGroup.iterationCurrent,
-        iterationTotal: iterGroup.iterationTotal,
-        iterationType: iterationType as 'loop' | 'parallel',
-      }
-
-      // Block nodes within this iteration
-      const blockNodes: EntryNode[] = iterBlocks.map((block) => ({
-        entry: block,
-        children: [],
-        nodeType: 'block' as const,
-      }))
-
-      return {
-        entry: syntheticIteration,
-        children: blockNodes,
-        nodeType: 'iteration' as const,
-        iterationInfo: {
-          current: iterGroup.iterationCurrent,
-          total: iterGroup.iterationTotal,
-        },
-      }
-    })
-
-    subflowNodes.push({
-      entry: syntheticSubflow,
-      children: iterationNodes,
-      nodeType: 'subflow' as const,
-    })
-  }
-
-  // Build nodes for regular blocks
-  const regularNodes: EntryNode[] = regularBlocks.map((entry) => ({
-    entry,
-    children: [],
-    nodeType: 'block' as const,
-  }))
-
-  // Combine all nodes and sort by start time ascending (oldest first, top-down)
-  const allNodes = [...subflowNodes, ...regularNodes]
-  allNodes.sort((a, b) => {
-    const aStart = new Date(a.entry.startedAt || a.entry.timestamp).getTime()
-    const bStart = new Date(b.entry.startedAt || b.entry.timestamp).getTime()
-    return aStart - bStart
-  })
-
-  return allNodes
-}
-
-/**
- * Groups console entries by execution ID and builds a tree structure.
- * Pre-computes timestamps for efficient sorting.
- */
-export function groupEntriesByExecution(entries: ConsoleEntry[]): ExecutionGroup[] {
-  const groups = new Map<
-    string,
-    { meta: Omit<ExecutionGroup, 'entryTree'>; entries: ConsoleEntry[] }
-  >()
-
-  for (const entry of entries) {
-    const execId = entry.executionId || entry.id
-
-    const entryStartTime = entry.startedAt || entry.timestamp
-    const entryEndTime = entry.endedAt || entry.timestamp
-    const entryStartMs = new Date(entryStartTime).getTime()
-    const entryEndMs = new Date(entryEndTime).getTime()
-
-    let group = groups.get(execId)
-
-    if (!group) {
-      group = {
-        meta: {
-          executionId: execId,
-          startTime: entryStartTime,
-          endTime: entryEndTime,
-          startTimeMs: entryStartMs,
-          endTimeMs: entryEndMs,
-          duration: 0,
-          status: 'success',
-          entries: [],
-        },
-        entries: [],
-      }
-      groups.set(execId, group)
-    } else {
-      // Update timing bounds
-      if (entryStartMs < group.meta.startTimeMs) {
-        group.meta.startTime = entryStartTime
-        group.meta.startTimeMs = entryStartMs
-      }
-      if (entryEndMs > group.meta.endTimeMs) {
-        group.meta.endTime = entryEndTime
-        group.meta.endTimeMs = entryEndMs
-      }
-    }
-
-    // Check for errors
-    if (entry.error) {
-      group.meta.status = 'error'
-    }
-
-    group.entries.push(entry)
-  }
-
-  // Build tree structure for each group
-  const result: ExecutionGroup[] = []
-  for (const group of groups.values()) {
-    group.meta.duration = group.meta.endTimeMs - group.meta.startTimeMs
-    group.meta.entries = group.entries
-    result.push({
-      ...group.meta,
-      entryTree: buildEntryTree(group.entries),
-    })
-  }
-
-  // Sort by start time descending (newest first)
-  result.sort((a, b) => b.startTimeMs - a.startTimeMs)
-
-  return result
-}
-
-/**
- * Flattens entry tree into display order for keyboard navigation
- */
-export function flattenEntryTree(nodes: EntryNode[]): ConsoleEntry[] {
-  const result: ConsoleEntry[] = []
-  for (const node of nodes) {
-    result.push(node.entry)
-    if (node.children.length > 0) {
-      result.push(...flattenEntryTree(node.children))
-    }
-  }
-  return result
-}
-
-/**
- * Block entry with parent tracking for navigation
- */
-export interface NavigableBlockEntry {
-  entry: ConsoleEntry
-  executionId: string
-  /** IDs of parent nodes (subflows, iterations) that contain this block */
-  parentNodeIds: string[]
-}
-
-/**
- * Flattens entry tree to only include actual block entries (not subflows/iterations).
- * Also tracks parent node IDs for auto-expanding when navigating.
- */
-export function flattenBlockEntriesOnly(
-  nodes: EntryNode[],
-  executionId: string,
-  parentIds: string[] = []
-): NavigableBlockEntry[] {
-  const result: NavigableBlockEntry[] = []
-  for (const node of nodes) {
-    if (node.nodeType === 'block') {
-      result.push({
-        entry: node.entry,
-        executionId,
-        parentNodeIds: parentIds,
-      })
-    }
-    if (node.children.length > 0) {
-      const newParentIds = node.nodeType !== 'block' ? [...parentIds, node.entry.id] : parentIds
-      result.push(...flattenBlockEntriesOnly(node.children, executionId, newParentIds))
-    }
-  }
-  return result
-}
-
-/**
- * Terminal height configuration constants
- */
-export const TERMINAL_CONFIG = {
-  NEAR_MIN_THRESHOLD: 40,
-  BLOCK_COLUMN_WIDTH_PX: TERMINAL_BLOCK_COLUMN_WIDTH,
-  HEADER_TEXT_CLASS: 'font-medium text-[var(--text-tertiary)] text-[12px]',
-} as const

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution.ts

@@ -81,8 +81,7 @@ export function useWorkflowExecution() {
   const queryClient = useQueryClient()
   const currentWorkflow = useCurrentWorkflow()
   const { activeWorkflowId, workflows } = useWorkflowRegistry()
-  const { toggleConsole, addConsole, updateConsole, cancelRunningEntries } =
-    useTerminalConsoleStore()
+  const { toggleConsole, addConsole } = useTerminalConsoleStore()
   const { getAllVariables } = useEnvironmentStore()
   const { getVariablesByWorkflowId, variables } = useVariablesStore()
   const {
@@ -868,8 +867,6 @@ export function useWorkflowExecution() {
     if (activeWorkflowId) {
       logger.info('Using server-side executor')
 
-      const executionId = uuidv4()
-
       let executionResult: ExecutionResult = {
         success: false,
         output: {},
@@ -913,27 +910,6 @@ export function useWorkflowExecution() {
               incomingEdges.forEach((edge) => {
                 setEdgeRunStatus(edge.id, 'success')
               })
-
-              // Add entry to terminal immediately with isRunning=true
-              const startedAt = new Date().toISOString()
-              addConsole({
-                input: {},
-                output: undefined,
-                success: undefined,
-                durationMs: undefined,
-                startedAt,
-                endedAt: undefined,
-                workflowId: activeWorkflowId,
-                blockId: data.blockId,
-                executionId,
-                blockName: data.blockName || 'Unknown Block',
-                blockType: data.blockType || 'unknown',
-                isRunning: true,
-                // Pass through iteration context for subflow grouping
-                iterationCurrent: data.iterationCurrent,
-                iterationTotal: data.iterationTotal,
-                iterationType: data.iterationType,
-              })
             },
 
             onBlockCompleted: (data) => {
@@ -964,23 +940,24 @@ export function useWorkflowExecution() {
                 endedAt,
               })
 
-              // Update existing console entry (created in onBlockStarted) with completion data
-              updateConsole(
-                data.blockId,
-                {
-                  input: data.input || {},
-                  replaceOutput: data.output,
-                  success: true,
-                  durationMs: data.durationMs,
-                  endedAt,
-                  isRunning: false,
-                  // Pass through iteration context for subflow grouping
-                  iterationCurrent: data.iterationCurrent,
-                  iterationTotal: data.iterationTotal,
-                  iterationType: data.iterationType,
-                },
-                executionId
-              )
+              // Add to console
+              addConsole({
+                input: data.input || {},
+                output: data.output,
+                success: true,
+                durationMs: data.durationMs,
+                startedAt,
+                endedAt,
+                workflowId: activeWorkflowId,
+                blockId: data.blockId,
+                executionId: executionId || uuidv4(),
+                blockName: data.blockName || 'Unknown Block',
+                blockType: data.blockType || 'unknown',
+                // Pass through iteration context for console pills
+                iterationCurrent: data.iterationCurrent,
+                iterationTotal: data.iterationTotal,
+                iterationType: data.iterationType,
+              })
 
               // Call onBlockComplete callback if provided
               if (onBlockComplete) {
@@ -1015,24 +992,25 @@ export function useWorkflowExecution() {
                 endedAt,
               })
 
-              // Update existing console entry (created in onBlockStarted) with error data
-              updateConsole(
-                data.blockId,
-                {
-                  input: data.input || {},
-                  replaceOutput: {},
-                  success: false,
-                  error: data.error,
-                  durationMs: data.durationMs,
-                  endedAt,
-                  isRunning: false,
-                  // Pass through iteration context for subflow grouping
-                  iterationCurrent: data.iterationCurrent,
-                  iterationTotal: data.iterationTotal,
-                  iterationType: data.iterationType,
-                },
-                executionId
-              )
+              // Add error to console
+              addConsole({
+                input: data.input || {},
+                output: {},
+                success: false,
+                error: data.error,
+                durationMs: data.durationMs,
+                startedAt,
+                endedAt,
+                workflowId: activeWorkflowId,
+                blockId: data.blockId,
+                executionId: executionId || uuidv4(),
+                blockName: data.blockName,
+                blockType: data.blockType,
+                // Pass through iteration context for console pills
+                iterationCurrent: data.iterationCurrent,
+                iterationTotal: data.iterationTotal,
+                iterationType: data.iterationType,
+              })
             },
 
             onStreamChunk: (data) => {
@@ -1111,7 +1089,7 @@ export function useWorkflowExecution() {
                   endedAt: new Date().toISOString(),
                   workflowId: activeWorkflowId,
                   blockId: 'validation',
-                  executionId,
+                  executionId: executionId || uuidv4(),
                   blockName: 'Workflow Validation',
                   blockType: 'validation',
                 })
@@ -1380,11 +1358,6 @@ export function useWorkflowExecution() {
     // Mark current chat execution as superseded so its cleanup won't affect new executions
     currentChatExecutionIdRef.current = null
 
-    // Mark all running entries as canceled in the terminal
-    if (activeWorkflowId) {
-      cancelRunningEntries(activeWorkflowId)
-    }
-
     // Reset execution state - this triggers chat stream cleanup via useEffect in chat.tsx
     setIsExecuting(false)
     setIsDebugging(false)
@@ -1401,8 +1374,6 @@ export function useWorkflowExecution() {
     setIsExecuting,
     setIsDebugging,
     setActiveBlocks,
-    activeWorkflowId,
-    cancelRunningEntries,
   ])
 
   return {

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

@@ -1141,17 +1141,15 @@ function PreviewEditorContent({
     <div className='relative flex h-full w-80 flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
       {/* Header - styled like editor */}
       <div className='mx-[-1px] flex flex-shrink-0 items-center gap-[8px] rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-[12px] py-[6px]'>
-        {block.type !== 'note' && (
-          <div
-            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
-            style={{ backgroundColor: blockConfig.bgColor }}
-          >
-            <IconComponent
-              icon={blockConfig.icon}
-              className='h-[12px] w-[12px] text-[var(--white)]'
-            />
-          </div>
-        )}
+        <div
+          className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+          style={{ backgroundColor: blockConfig.bgColor }}
+        >
+          <IconComponent
+            icon={blockConfig.icon}
+            className='h-[12px] w-[12px] text-[var(--white)]'
+          />
+        </div>
         <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
           {block.name || blockConfig.name}
         </span>

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

@@ -411,9 +411,8 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
 
   const IconComponent = blockConfig.icon
   const isStarterOrTrigger = blockConfig.category === 'triggers' || type === 'starter' || isTrigger
-  const isNoteBlock = type === 'note'
 
-  const shouldShowDefaultHandles = !isStarterOrTrigger && !isNoteBlock
+  const shouldShowDefaultHandles = !isStarterOrTrigger
   const hasSubBlocks = visibleSubBlocks.length > 0
   const hasContentBelowHeader =
     type === 'condition'
@@ -575,8 +574,8 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
         </>
       )}
 
-      {/* Source and error handles for non-condition/router/note blocks */}
-      {type !== 'condition' && type !== 'router_v2' && type !== 'response' && !isNoteBlock && (
+      {/* Source and error handles for non-condition/router blocks */}
+      {type !== 'condition' && type !== 'router_v2' && type !== 'response' && (
         <>
           <Handle
             type='source'

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

@@ -406,11 +406,9 @@ export function PreviewWorkflow({
         }
       }
 
-      const nodeType = block.type === 'note' ? 'noteBlock' : 'workflowBlock'
-
       nodeArray.push({
         id: blockId,
-        type: nodeType,
+        type: 'workflowBlock',
         position: absolutePosition,
         draggable: false,
         zIndex: block.data?.parentId ? 10 : undefined,

apps/sim/components/emcn/components/code/code.css

@@ -37,7 +37,7 @@
 .code-editor-theme .token.char,
 .code-editor-theme .token.builtin,
 .code-editor-theme .token.inserted {
-  color: #b45309 !important;
+  color: #dc2626 !important;
 }
 
 .code-editor-theme .token.operator,
@@ -49,7 +49,7 @@
 .code-editor-theme .token.atrule,
 .code-editor-theme .token.attr-value,
 .code-editor-theme .token.keyword {
-  color: #2f55ff !important;
+  color: #2563eb !important;
 }
 
 .code-editor-theme .token.function,
@@ -119,7 +119,7 @@
 .dark .code-editor-theme .token.atrule,
 .dark .code-editor-theme .token.attr-value,
 .dark .code-editor-theme .token.keyword {
-  color: #2fa1ff !important;
+  color: #4db8ff !important;
 }
 
 .dark .code-editor-theme .token.function,

apps/sim/hooks/queries/deployments.ts

@@ -348,6 +348,210 @@ export function useUndeployWorkflow() {
   })
 }
 
+/**
+ * Variables for update deployment version mutation
+ */
+interface UpdateDeploymentVersionVariables {
+  workflowId: string
+  version: number
+  name?: string
+  description?: string | null
+}
+
+/**
+ * Response from update deployment version mutation
+ */
+interface UpdateDeploymentVersionResult {
+  name: string | null
+  description: string | null
+}
+
+/**
+ * Mutation hook for updating a deployment version's name or description.
+ * Invalidates versions query on success.
+ */
+export function useUpdateDeploymentVersion() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({
+      workflowId,
+      version,
+      name,
+      description,
+    }: UpdateDeploymentVersionVariables): Promise<UpdateDeploymentVersionResult> => {
+      const response = await fetch(`/api/workflows/${workflowId}/deployments/${version}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ name, description }),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Failed to update deployment version')
+      }
+
+      return response.json()
+    },
+    onSuccess: (_, variables) => {
+      logger.info('Deployment version updated', {
+        workflowId: variables.workflowId,
+        version: variables.version,
+      })
+
+      queryClient.invalidateQueries({
+        queryKey: deploymentKeys.versions(variables.workflowId),
+      })
+    },
+    onError: (error) => {
+      logger.error('Failed to update deployment version', { error })
+    },
+  })
+}
+
+/**
+ * Variables for generating a version description
+ */
+interface GenerateVersionDescriptionVariables {
+  workflowId: string
+  version: number
+  onStreamChunk?: (accumulated: string) => void
+}
+
+const VERSION_DESCRIPTION_SYSTEM_PROMPT = `You are a technical writer generating concise deployment version descriptions.
+
+Given a diff of changes between two workflow versions, write a brief, factual description (1-2 sentences, under 300 characters) that states ONLY what changed.
+
+RULES:
+- State specific values when provided (e.g. "model changed from X to Y")
+- Do NOT wrap your response in quotes
+- Do NOT add filler phrases like "streamlining the workflow", "for improved efficiency"
+- Do NOT use markdown formatting
+- Do NOT include version numbers
+- Do NOT start with "This version" or similar phrases
+
+Good examples:
+- Changes model in Agent 1 from gpt-4o to claude-sonnet-4-20250514.
+- Adds Slack notification block. Updates webhook URL to production endpoint.
+- Removes Function block and its connection to Router.
+
+Bad examples:
+- "Changes model..." (NO - don't wrap in quotes)
+- Changes model, streamlining the workflow. (NO - don't add filler)
+
+Respond with ONLY the plain text description.`
+
+/**
+ * Hook for generating a version description using AI based on workflow diff
+ */
+export function useGenerateVersionDescription() {
+  return useMutation({
+    mutationFn: async ({
+      workflowId,
+      version,
+      onStreamChunk,
+    }: GenerateVersionDescriptionVariables): Promise<string> => {
+      const { generateWorkflowDiffSummary, formatDiffSummaryForDescription } = await import(
+        '@/lib/workflows/comparison/compare'
+      )
+
+      const currentResponse = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
+      if (!currentResponse.ok) {
+        throw new Error('Failed to fetch current version state')
+      }
+      const currentData = await currentResponse.json()
+      const currentState = currentData.deployedState
+
+      let previousState = null
+      if (version > 1) {
+        const previousResponse = await fetch(
+          `/api/workflows/${workflowId}/deployments/${version - 1}`
+        )
+        if (previousResponse.ok) {
+          const previousData = await previousResponse.json()
+          previousState = previousData.deployedState
+        }
+      }
+
+      const diffSummary = generateWorkflowDiffSummary(currentState, previousState)
+      const diffText = formatDiffSummaryForDescription(diffSummary)
+
+      const wandResponse = await fetch('/api/wand', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-cache, no-transform',
+        },
+        body: JSON.stringify({
+          prompt: `Generate a deployment version description based on these changes:\n\n${diffText}`,
+          systemPrompt: VERSION_DESCRIPTION_SYSTEM_PROMPT,
+          stream: true,
+          workflowId,
+        }),
+        cache: 'no-store',
+      })
+
+      if (!wandResponse.ok) {
+        const errorText = await wandResponse.text()
+        throw new Error(errorText || 'Failed to generate description')
+      }
+
+      if (!wandResponse.body) {
+        throw new Error('Response body is null')
+      }
+
+      const reader = wandResponse.body.getReader()
+      const decoder = new TextDecoder()
+      let accumulatedContent = ''
+
+      try {
+        while (true) {
+          const { done, value } = await reader.read()
+          if (done) break
+
+          const chunk = decoder.decode(value)
+          const lines = chunk.split('\n\n')
+
+          for (const line of lines) {
+            if (line.startsWith('data: ')) {
+              const lineData = line.substring(6)
+              if (lineData === '[DONE]') continue
+
+              try {
+                const data = JSON.parse(lineData)
+                if (data.error) throw new Error(data.error)
+                if (data.chunk) {
+                  accumulatedContent += data.chunk
+                  onStreamChunk?.(accumulatedContent)
+                }
+                if (data.done) break
+              } catch {
+                // Skip unparseable lines
+              }
+            }
+          }
+        }
+      } finally {
+        reader.releaseLock()
+      }
+
+      if (!accumulatedContent) {
+        throw new Error('Failed to generate description')
+      }
+
+      return accumulatedContent.trim()
+    },
+    onSuccess: (content) => {
+      logger.info('Generated version description', { length: content.length })
+    },
+    onError: (error) => {
+      logger.error('Failed to generate version description', { error })
+    },
+  })
+}
+
 /**
  * Variables for activate version mutation
  */

apps/sim/lib/workflows/comparison/compare.test.ts

@@ -7,7 +7,11 @@ import {
 } from '@sim/testing'
 import { describe, expect, it } from 'vitest'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
-import { hasWorkflowChanged } from './compare'
+import {
+  formatDiffSummaryForDescription,
+  generateWorkflowDiffSummary,
+  hasWorkflowChanged,
+} from './compare'
 
 /**
  * Type helper for converting test workflow state to app workflow state.
@@ -2735,3 +2739,299 @@ describe('hasWorkflowChanged', () => {
     })
   })
 })
+
+describe('generateWorkflowDiffSummary', () => {
+  describe('Basic Cases', () => {
+    it.concurrent('should return hasChanges=true when previousState is null', () => {
+      const currentState = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+      })
+      const result = generateWorkflowDiffSummary(currentState, null)
+      expect(result.hasChanges).toBe(true)
+      expect(result.addedBlocks).toHaveLength(1)
+      expect(result.addedBlocks[0].id).toBe('block1')
+    })
+
+    it.concurrent('should return hasChanges=false for identical states', () => {
+      const state = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+      })
+      const result = generateWorkflowDiffSummary(state, state)
+      expect(result.hasChanges).toBe(false)
+      expect(result.addedBlocks).toHaveLength(0)
+      expect(result.removedBlocks).toHaveLength(0)
+      expect(result.modifiedBlocks).toHaveLength(0)
+    })
+  })
+
+  describe('Block Changes', () => {
+    it.concurrent('should detect added blocks', () => {
+      const previousState = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+      })
+      const currentState = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1'),
+          block2: createBlock('block2'),
+        },
+      })
+      const result = generateWorkflowDiffSummary(currentState, previousState)
+      expect(result.hasChanges).toBe(true)
+      expect(result.addedBlocks).toHaveLength(1)
+      expect(result.addedBlocks[0].id).toBe('block2')
+    })
+
+    it.concurrent('should detect removed blocks', () => {
+      const previousState = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1'),
+          block2: createBlock('block2'),
+        },
+      })
+      const currentState = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+      })
+      const result = generateWorkflowDiffSummary(currentState, previousState)
+      expect(result.hasChanges).toBe(true)
+      expect(result.removedBlocks).toHaveLength(1)
+      expect(result.removedBlocks[0].id).toBe('block2')
+    })
+
+    it.concurrent('should detect modified blocks with field changes', () => {
+      const previousState = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1', {
+            subBlocks: { model: { id: 'model', type: 'dropdown', value: 'gpt-4o' } },
+          }),
+        },
+      })
+      const currentState = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1', {
+            subBlocks: { model: { id: 'model', type: 'dropdown', value: 'claude-sonnet' } },
+          }),
+        },
+      })
+      const result = generateWorkflowDiffSummary(currentState, previousState)
+      expect(result.hasChanges).toBe(true)
+      expect(result.modifiedBlocks).toHaveLength(1)
+      expect(result.modifiedBlocks[0].id).toBe('block1')
+      expect(result.modifiedBlocks[0].changes.length).toBeGreaterThan(0)
+      const modelChange = result.modifiedBlocks[0].changes.find((c) => c.field === 'model')
+      expect(modelChange).toBeDefined()
+      expect(modelChange?.oldValue).toBe('gpt-4o')
+      expect(modelChange?.newValue).toBe('claude-sonnet')
+    })
+  })
+
+  describe('Edge Changes', () => {
+    it.concurrent('should detect added edges', () => {
+      const previousState = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1'),
+          block2: createBlock('block2'),
+        },
+        edges: [],
+      })
+      const currentState = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1'),
+          block2: createBlock('block2'),
+        },
+        edges: [{ id: 'e1', source: 'block1', target: 'block2' }],
+      })
+      const result = generateWorkflowDiffSummary(currentState, previousState)
+      expect(result.hasChanges).toBe(true)
+      expect(result.edgeChanges.added).toBe(1)
+      expect(result.edgeChanges.removed).toBe(0)
+    })
+
+    it.concurrent('should detect removed edges', () => {
+      const previousState = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1'),
+          block2: createBlock('block2'),
+        },
+        edges: [{ id: 'e1', source: 'block1', target: 'block2' }],
+      })
+      const currentState = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1'),
+          block2: createBlock('block2'),
+        },
+        edges: [],
+      })
+      const result = generateWorkflowDiffSummary(currentState, previousState)
+      expect(result.hasChanges).toBe(true)
+      expect(result.edgeChanges.added).toBe(0)
+      expect(result.edgeChanges.removed).toBe(1)
+    })
+  })
+
+  describe('Variable Changes', () => {
+    it.concurrent('should detect added variables', () => {
+      const previousState = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+        variables: {},
+      })
+      const currentState = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+        variables: { var1: { id: 'var1', name: 'test', type: 'string', value: 'hello' } },
+      })
+      const result = generateWorkflowDiffSummary(currentState, previousState)
+      expect(result.hasChanges).toBe(true)
+      expect(result.variableChanges.added).toBe(1)
+    })
+
+    it.concurrent('should detect modified variables', () => {
+      const previousState = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+        variables: { var1: { id: 'var1', name: 'test', type: 'string', value: 'hello' } },
+      })
+      const currentState = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+        variables: { var1: { id: 'var1', name: 'test', type: 'string', value: 'world' } },
+      })
+      const result = generateWorkflowDiffSummary(currentState, previousState)
+      expect(result.hasChanges).toBe(true)
+      expect(result.variableChanges.modified).toBe(1)
+    })
+  })
+
+  describe('Consistency with hasWorkflowChanged', () => {
+    it.concurrent('hasChanges should match hasWorkflowChanged result', () => {
+      const state1 = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+      })
+      const state2 = createWorkflowState({
+        blocks: {
+          block1: createBlock('block1', {
+            subBlocks: { prompt: { id: 'prompt', type: 'long-input', value: 'new value' } },
+          }),
+        },
+      })
+
+      const diffResult = generateWorkflowDiffSummary(state2, state1)
+      const hasChangedResult = hasWorkflowChanged(state2, state1)
+
+      expect(diffResult.hasChanges).toBe(hasChangedResult)
+    })
+
+    it.concurrent('should return same result as hasWorkflowChanged for no changes', () => {
+      const state = createWorkflowState({
+        blocks: { block1: createBlock('block1') },
+      })
+
+      const diffResult = generateWorkflowDiffSummary(state, state)
+      const hasChangedResult = hasWorkflowChanged(state, state)
+
+      expect(diffResult.hasChanges).toBe(hasChangedResult)
+      expect(diffResult.hasChanges).toBe(false)
+    })
+  })
+})
+
+describe('formatDiffSummaryForDescription', () => {
+  it.concurrent('should return no changes message when hasChanges is false', () => {
+    const summary = {
+      addedBlocks: [],
+      removedBlocks: [],
+      modifiedBlocks: [],
+      edgeChanges: { added: 0, removed: 0 },
+      loopChanges: { added: 0, removed: 0 },
+      parallelChanges: { added: 0, removed: 0 },
+      variableChanges: { added: 0, removed: 0, modified: 0 },
+      hasChanges: false,
+    }
+    const result = formatDiffSummaryForDescription(summary)
+    expect(result).toContain('No structural changes')
+  })
+
+  it.concurrent('should format added blocks', () => {
+    const summary = {
+      addedBlocks: [{ id: 'block1', type: 'agent', name: 'My Agent' }],
+      removedBlocks: [],
+      modifiedBlocks: [],
+      edgeChanges: { added: 0, removed: 0 },
+      loopChanges: { added: 0, removed: 0 },
+      parallelChanges: { added: 0, removed: 0 },
+      variableChanges: { added: 0, removed: 0, modified: 0 },
+      hasChanges: true,
+    }
+    const result = formatDiffSummaryForDescription(summary)
+    expect(result).toContain('Added block: My Agent (agent)')
+  })
+
+  it.concurrent('should format removed blocks', () => {
+    const summary = {
+      addedBlocks: [],
+      removedBlocks: [{ id: 'block1', type: 'function', name: 'Old Function' }],
+      modifiedBlocks: [],
+      edgeChanges: { added: 0, removed: 0 },
+      loopChanges: { added: 0, removed: 0 },
+      parallelChanges: { added: 0, removed: 0 },
+      variableChanges: { added: 0, removed: 0, modified: 0 },
+      hasChanges: true,
+    }
+    const result = formatDiffSummaryForDescription(summary)
+    expect(result).toContain('Removed block: Old Function (function)')
+  })
+
+  it.concurrent('should format modified blocks with field changes', () => {
+    const summary = {
+      addedBlocks: [],
+      removedBlocks: [],
+      modifiedBlocks: [
+        {
+          id: 'block1',
+          type: 'agent',
+          name: 'Agent 1',
+          changes: [{ field: 'model', oldValue: 'gpt-4o', newValue: 'claude-sonnet' }],
+        },
+      ],
+      edgeChanges: { added: 0, removed: 0 },
+      loopChanges: { added: 0, removed: 0 },
+      parallelChanges: { added: 0, removed: 0 },
+      variableChanges: { added: 0, removed: 0, modified: 0 },
+      hasChanges: true,
+    }
+    const result = formatDiffSummaryForDescription(summary)
+    expect(result).toContain('Modified Agent 1')
+    expect(result).toContain('model')
+    expect(result).toContain('gpt-4o')
+    expect(result).toContain('claude-sonnet')
+  })
+
+  it.concurrent('should format edge changes', () => {
+    const summary = {
+      addedBlocks: [],
+      removedBlocks: [],
+      modifiedBlocks: [],
+      edgeChanges: { added: 2, removed: 1 },
+      loopChanges: { added: 0, removed: 0 },
+      parallelChanges: { added: 0, removed: 0 },
+      variableChanges: { added: 0, removed: 0, modified: 0 },
+      hasChanges: true,
+    }
+    const result = formatDiffSummaryForDescription(summary)
+    expect(result).toContain('Added 2 connection(s)')
+    expect(result).toContain('Removed 1 connection(s)')
+  })
+
+  it.concurrent('should format variable changes', () => {
+    const summary = {
+      addedBlocks: [],
+      removedBlocks: [],
+      modifiedBlocks: [],
+      edgeChanges: { added: 0, removed: 0 },
+      loopChanges: { added: 0, removed: 0 },
+      parallelChanges: { added: 0, removed: 0 },
+      variableChanges: { added: 1, removed: 0, modified: 2 },
+      hasChanges: true,
+    }
+    const result = formatDiffSummaryForDescription(summary)
+    expect(result).toContain('Variables:')
+    expect(result).toContain('1 added')
+    expect(result).toContain('2 modified')
+  })
+})

apps/sim/lib/workflows/comparison/compare.ts

@@ -10,7 +10,6 @@ import {
   sanitizeInputFormat,
   sanitizeTools,
   sanitizeVariable,
-  sortEdges,
 } from './normalize'
 
 /** Block with optional diff markers added by copilot */
@@ -28,60 +27,109 @@ type SubBlockWithDiffMarker = {
 }
 
 /**
- * Compare the current workflow state with the deployed state to detect meaningful changes
- * @param currentState - The current workflow state
- * @param deployedState - The deployed workflow state
- * @returns True if there are meaningful changes, false if only position changes or no changes
+ * Compare the current workflow state with the deployed state to detect meaningful changes.
+ * Uses generateWorkflowDiffSummary internally to ensure consistent change detection.
  */
 export function hasWorkflowChanged(
   currentState: WorkflowState,
   deployedState: WorkflowState | null
 ): boolean {
-  // If no deployed state exists, then the workflow has changed
-  if (!deployedState) return true
+  return generateWorkflowDiffSummary(currentState, deployedState).hasChanges
+}
 
-  // 1. Compare edges (connections between blocks)
-  const currentEdges = currentState.edges || []
-  const deployedEdges = deployedState.edges || []
+/**
+ * Represents a single field change with old and new values
+ */
+export interface FieldChange {
+  field: string
+  oldValue: unknown
+  newValue: unknown
+}
 
-  const normalizedCurrentEdges = sortEdges(currentEdges.map(normalizeEdge))
-  const normalizedDeployedEdges = sortEdges(deployedEdges.map(normalizeEdge))
+/**
+ * Result of workflow diff analysis between two workflow states
+ */
+export interface WorkflowDiffSummary {
+  addedBlocks: Array<{ id: string; type: string; name?: string }>
+  removedBlocks: Array<{ id: string; type: string; name?: string }>
+  modifiedBlocks: Array<{ id: string; type: string; name?: string; changes: FieldChange[] }>
+  edgeChanges: { added: number; removed: number }
+  loopChanges: { added: number; removed: number }
+  parallelChanges: { added: number; removed: number }
+  variableChanges: { added: number; removed: number; modified: number }
+  hasChanges: boolean
+}
 
-  if (
-    normalizedStringify(normalizedCurrentEdges) !== normalizedStringify(normalizedDeployedEdges)
-  ) {
-    return true
+/**
+ * Generate a detailed diff summary between two workflow states
+ */
+export function generateWorkflowDiffSummary(
+  currentState: WorkflowState,
+  previousState: WorkflowState | null
+): WorkflowDiffSummary {
+  const result: WorkflowDiffSummary = {
+    addedBlocks: [],
+    removedBlocks: [],
+    modifiedBlocks: [],
+    edgeChanges: { added: 0, removed: 0 },
+    loopChanges: { added: 0, removed: 0 },
+    parallelChanges: { added: 0, removed: 0 },
+    variableChanges: { added: 0, removed: 0, modified: 0 },
+    hasChanges: false,
   }
 
-  // 2. Compare blocks and their configurations
-  const currentBlockIds = Object.keys(currentState.blocks || {}).sort()
-  const deployedBlockIds = Object.keys(deployedState.blocks || {}).sort()
-
-  if (
-    currentBlockIds.length !== deployedBlockIds.length ||
-    normalizedStringify(currentBlockIds) !== normalizedStringify(deployedBlockIds)
-  ) {
-    return true
+  if (!previousState) {
+    const currentBlocks = currentState.blocks || {}
+    for (const [id, block] of Object.entries(currentBlocks)) {
+      result.addedBlocks.push({
+        id,
+        type: block.type,
+        name: block.name,
+      })
+    }
+    result.edgeChanges.added = (currentState.edges || []).length
+    result.loopChanges.added = Object.keys(currentState.loops || {}).length
+    result.parallelChanges.added = Object.keys(currentState.parallels || {}).length
+    result.variableChanges.added = Object.keys(currentState.variables || {}).length
+    result.hasChanges = true
+    return result
   }
 
-  // 3. Build normalized representations of blocks for comparison
-  const normalizedCurrentBlocks: Record<string, unknown> = {}
-  const normalizedDeployedBlocks: Record<string, unknown> = {}
+  const currentBlocks = currentState.blocks || {}
+  const previousBlocks = previousState.blocks || {}
+  const currentBlockIds = new Set(Object.keys(currentBlocks))
+  const previousBlockIds = new Set(Object.keys(previousBlocks))
 
-  for (const blockId of currentBlockIds) {
-    const currentBlock = currentState.blocks[blockId]
-    const deployedBlock = deployedState.blocks[blockId]
+  for (const id of currentBlockIds) {
+    if (!previousBlockIds.has(id)) {
+      const block = currentBlocks[id]
+      result.addedBlocks.push({
+        id,
+        type: block.type,
+        name: block.name,
+      })
+    }
+  }
 
-    // Destructure and exclude non-functional fields:
-    // - position: visual positioning only
-    // - subBlocks: handled separately below
-    // - layout: contains measuredWidth/measuredHeight from autolayout
-    // - height: block height measurement from autolayout
-    // - outputs: derived from subBlocks (e.g., inputFormat), already compared via subBlocks
-    // - is_diff, field_diffs: diff markers from copilot edits
-    const currentBlockWithDiff = currentBlock as BlockWithDiffMarkers
-    const deployedBlockWithDiff = deployedBlock as BlockWithDiffMarkers
+  for (const id of previousBlockIds) {
+    if (!currentBlockIds.has(id)) {
+      const block = previousBlocks[id]
+      result.removedBlocks.push({
+        id,
+        type: block.type,
+        name: block.name,
+      })
+    }
+  }
 
+  for (const id of currentBlockIds) {
+    if (!previousBlockIds.has(id)) continue
+
+    const currentBlock = currentBlocks[id] as BlockWithDiffMarkers
+    const previousBlock = previousBlocks[id] as BlockWithDiffMarkers
+    const changes: FieldChange[] = []
+
+    // Compare block-level properties (excluding visual-only fields)
     const {
       position: _currentPos,
       subBlocks: currentSubBlocks = {},
@@ -91,187 +139,308 @@ export function hasWorkflowChanged(
       is_diff: _currentIsDiff,
       field_diffs: _currentFieldDiffs,
       ...currentRest
-    } = currentBlockWithDiff
+    } = currentBlock
 
     const {
-      position: _deployedPos,
-      subBlocks: deployedSubBlocks = {},
-      layout: _deployedLayout,
-      height: _deployedHeight,
-      outputs: _deployedOutputs,
-      is_diff: _deployedIsDiff,
-      field_diffs: _deployedFieldDiffs,
-      ...deployedRest
-    } = deployedBlockWithDiff
+      position: _previousPos,
+      subBlocks: previousSubBlocks = {},
+      layout: _previousLayout,
+      height: _previousHeight,
+      outputs: _previousOutputs,
+      is_diff: _previousIsDiff,
+      field_diffs: _previousFieldDiffs,
+      ...previousRest
+    } = previousBlock
 
-    // Also exclude width/height from data object (container dimensions from autolayout)
-    const {
-      width: _currentDataWidth,
-      height: _currentDataHeight,
-      ...currentDataRest
-    } = currentRest.data || {}
-    const {
-      width: _deployedDataWidth,
-      height: _deployedDataHeight,
-      ...deployedDataRest
-    } = deployedRest.data || {}
+    // Exclude width/height from data object (container dimensions from autolayout)
+    const { width: _cw, height: _ch, ...currentDataRest } = currentRest.data || {}
+    const { width: _pw, height: _ph, ...previousDataRest } = previousRest.data || {}
 
-    normalizedCurrentBlocks[blockId] = {
-      ...currentRest,
-      data: currentDataRest,
+    const normalizedCurrentBlock = { ...currentRest, data: currentDataRest, subBlocks: undefined }
+    const normalizedPreviousBlock = {
+      ...previousRest,
+      data: previousDataRest,
       subBlocks: undefined,
     }
 
-    normalizedDeployedBlocks[blockId] = {
-      ...deployedRest,
-      data: deployedDataRest,
-      subBlocks: undefined,
+    if (
+      normalizedStringify(normalizedCurrentBlock) !== normalizedStringify(normalizedPreviousBlock)
+    ) {
+      if (currentBlock.type !== previousBlock.type) {
+        changes.push({ field: 'type', oldValue: previousBlock.type, newValue: currentBlock.type })
+      }
+      if (currentBlock.name !== previousBlock.name) {
+        changes.push({ field: 'name', oldValue: previousBlock.name, newValue: currentBlock.name })
+      }
+      if (currentBlock.enabled !== previousBlock.enabled) {
+        changes.push({
+          field: 'enabled',
+          oldValue: previousBlock.enabled,
+          newValue: currentBlock.enabled,
+        })
+      }
+      // Check other block properties
+      const blockFields = ['horizontalHandles', 'advancedMode', 'triggerMode'] as const
+      for (const field of blockFields) {
+        if (currentBlock[field] !== previousBlock[field]) {
+          changes.push({
+            field,
+            oldValue: previousBlock[field],
+            newValue: currentBlock[field],
+          })
+        }
+      }
+      if (normalizedStringify(currentDataRest) !== normalizedStringify(previousDataRest)) {
+        changes.push({ field: 'data', oldValue: previousDataRest, newValue: currentDataRest })
+      }
     }
 
-    // Get all subBlock IDs from both states, excluding runtime metadata and UI-only elements
+    // Compare subBlocks
     const allSubBlockIds = [
-      ...new Set([...Object.keys(currentSubBlocks), ...Object.keys(deployedSubBlocks)]),
+      ...new Set([...Object.keys(currentSubBlocks), ...Object.keys(previousSubBlocks)]),
     ]
       .filter(
-        (id) => !TRIGGER_RUNTIME_SUBBLOCK_IDS.includes(id) && !SYSTEM_SUBBLOCK_IDS.includes(id)
+        (subId) =>
+          !TRIGGER_RUNTIME_SUBBLOCK_IDS.includes(subId) && !SYSTEM_SUBBLOCK_IDS.includes(subId)
       )
       .sort()
 
-    // Normalize and compare each subBlock
-    for (const subBlockId of allSubBlockIds) {
-      // If the subBlock doesn't exist in either state, there's a difference
-      if (!currentSubBlocks[subBlockId] || !deployedSubBlocks[subBlockId]) {
-        return true
+    for (const subId of allSubBlockIds) {
+      const currentSub = currentSubBlocks[subId]
+      const previousSub = previousSubBlocks[subId]
+
+      if (!currentSub || !previousSub) {
+        changes.push({
+          field: subId,
+          oldValue: previousSub?.value ?? null,
+          newValue: currentSub?.value ?? null,
+        })
+        continue
       }
 
-      // Get values with special handling for null/undefined
-      // Using unknown type since sanitization functions return different types
-      let currentValue: unknown = currentSubBlocks[subBlockId].value ?? null
-      let deployedValue: unknown = deployedSubBlocks[subBlockId].value ?? null
+      // Compare subBlock values with sanitization
+      let currentValue: unknown = currentSub.value ?? null
+      let previousValue: unknown = previousSub.value ?? null
 
-      if (subBlockId === 'tools' && Array.isArray(currentValue) && Array.isArray(deployedValue)) {
+      if (subId === 'tools' && Array.isArray(currentValue) && Array.isArray(previousValue)) {
         currentValue = sanitizeTools(currentValue)
-        deployedValue = sanitizeTools(deployedValue)
+        previousValue = sanitizeTools(previousValue)
       }
 
-      if (
-        subBlockId === 'inputFormat' &&
-        Array.isArray(currentValue) &&
-        Array.isArray(deployedValue)
-      ) {
+      if (subId === 'inputFormat' && Array.isArray(currentValue) && Array.isArray(previousValue)) {
         currentValue = sanitizeInputFormat(currentValue)
-        deployedValue = sanitizeInputFormat(deployedValue)
+        previousValue = sanitizeInputFormat(previousValue)
       }
 
       // For string values, compare directly to catch even small text changes
-      if (typeof currentValue === 'string' && typeof deployedValue === 'string') {
-        if (currentValue !== deployedValue) {
-          return true
+      if (typeof currentValue === 'string' && typeof previousValue === 'string') {
+        if (currentValue !== previousValue) {
+          changes.push({ field: subId, oldValue: previousSub.value, newValue: currentSub.value })
         }
       } else {
-        // For other types, use normalized comparison
-        const normalizedCurrentValue = normalizeValue(currentValue)
-        const normalizedDeployedValue = normalizeValue(deployedValue)
-
-        if (
-          normalizedStringify(normalizedCurrentValue) !==
-          normalizedStringify(normalizedDeployedValue)
-        ) {
-          return true
+        const normalizedCurrent = normalizeValue(currentValue)
+        const normalizedPrevious = normalizeValue(previousValue)
+        if (normalizedStringify(normalizedCurrent) !== normalizedStringify(normalizedPrevious)) {
+          changes.push({ field: subId, oldValue: previousSub.value, newValue: currentSub.value })
         }
       }
 
-      // Compare type and other properties (excluding diff markers and value)
-      const currentSubBlockWithDiff = currentSubBlocks[subBlockId] as SubBlockWithDiffMarker
-      const deployedSubBlockWithDiff = deployedSubBlocks[subBlockId] as SubBlockWithDiffMarker
-      const { value: _cv, is_diff: _cd, ...currentSubBlockRest } = currentSubBlockWithDiff
-      const { value: _dv, is_diff: _dd, ...deployedSubBlockRest } = deployedSubBlockWithDiff
+      // Compare subBlock REST properties (type, id, etc. - excluding value and is_diff)
+      const currentSubWithDiff = currentSub as SubBlockWithDiffMarker
+      const previousSubWithDiff = previousSub as SubBlockWithDiffMarker
+      const { value: _cv, is_diff: _cd, ...currentSubRest } = currentSubWithDiff
+      const { value: _pv, is_diff: _pd, ...previousSubRest } = previousSubWithDiff
 
-      if (normalizedStringify(currentSubBlockRest) !== normalizedStringify(deployedSubBlockRest)) {
-        return true
+      if (normalizedStringify(currentSubRest) !== normalizedStringify(previousSubRest)) {
+        changes.push({
+          field: `${subId}.properties`,
+          oldValue: previousSubRest,
+          newValue: currentSubRest,
+        })
       }
     }
 
-    const blocksEqual =
-      normalizedStringify(normalizedCurrentBlocks[blockId]) ===
-      normalizedStringify(normalizedDeployedBlocks[blockId])
-
-    if (!blocksEqual) {
-      return true
+    if (changes.length > 0) {
+      result.modifiedBlocks.push({
+        id,
+        type: currentBlock.type,
+        name: currentBlock.name,
+        changes,
+      })
     }
   }
 
-  // 4. Compare loops
+  const currentEdges = (currentState.edges || []).map(normalizeEdge)
+  const previousEdges = (previousState.edges || []).map(normalizeEdge)
+  const currentEdgeSet = new Set(currentEdges.map(normalizedStringify))
+  const previousEdgeSet = new Set(previousEdges.map(normalizedStringify))
+
+  for (const edge of currentEdgeSet) {
+    if (!previousEdgeSet.has(edge)) result.edgeChanges.added++
+  }
+  for (const edge of previousEdgeSet) {
+    if (!currentEdgeSet.has(edge)) result.edgeChanges.removed++
+  }
+
   const currentLoops = currentState.loops || {}
-  const deployedLoops = deployedState.loops || {}
+  const previousLoops = previousState.loops || {}
+  const currentLoopIds = Object.keys(currentLoops)
+  const previousLoopIds = Object.keys(previousLoops)
 
-  const currentLoopIds = Object.keys(currentLoops).sort()
-  const deployedLoopIds = Object.keys(deployedLoops).sort()
-
-  if (
-    currentLoopIds.length !== deployedLoopIds.length ||
-    normalizedStringify(currentLoopIds) !== normalizedStringify(deployedLoopIds)
-  ) {
-    return true
+  for (const id of currentLoopIds) {
+    if (!previousLoopIds.includes(id)) {
+      result.loopChanges.added++
+    } else {
+      const normalizedCurrent = normalizeValue(normalizeLoop(currentLoops[id]))
+      const normalizedPrevious = normalizeValue(normalizeLoop(previousLoops[id]))
+      if (normalizedStringify(normalizedCurrent) !== normalizedStringify(normalizedPrevious)) {
+        result.loopChanges.added++
+        result.loopChanges.removed++
+      }
+    }
   }
-
-  for (const loopId of currentLoopIds) {
-    const normalizedCurrentLoop = normalizeValue(normalizeLoop(currentLoops[loopId]))
-    const normalizedDeployedLoop = normalizeValue(normalizeLoop(deployedLoops[loopId]))
-
-    if (
-      normalizedStringify(normalizedCurrentLoop) !== normalizedStringify(normalizedDeployedLoop)
-    ) {
-      return true
+  for (const id of previousLoopIds) {
+    if (!currentLoopIds.includes(id)) {
+      result.loopChanges.removed++
     }
   }
 
-  // 5. Compare parallels
   const currentParallels = currentState.parallels || {}
-  const deployedParallels = deployedState.parallels || {}
+  const previousParallels = previousState.parallels || {}
+  const currentParallelIds = Object.keys(currentParallels)
+  const previousParallelIds = Object.keys(previousParallels)
 
-  const currentParallelIds = Object.keys(currentParallels).sort()
-  const deployedParallelIds = Object.keys(deployedParallels).sort()
-
-  if (
-    currentParallelIds.length !== deployedParallelIds.length ||
-    normalizedStringify(currentParallelIds) !== normalizedStringify(deployedParallelIds)
-  ) {
-    return true
+  for (const id of currentParallelIds) {
+    if (!previousParallelIds.includes(id)) {
+      result.parallelChanges.added++
+    } else {
+      const normalizedCurrent = normalizeValue(normalizeParallel(currentParallels[id]))
+      const normalizedPrevious = normalizeValue(normalizeParallel(previousParallels[id]))
+      if (normalizedStringify(normalizedCurrent) !== normalizedStringify(normalizedPrevious)) {
+        result.parallelChanges.added++
+        result.parallelChanges.removed++
+      }
+    }
   }
-
-  for (const parallelId of currentParallelIds) {
-    const normalizedCurrentParallel = normalizeValue(
-      normalizeParallel(currentParallels[parallelId])
-    )
-    const normalizedDeployedParallel = normalizeValue(
-      normalizeParallel(deployedParallels[parallelId])
-    )
-
-    if (
-      normalizedStringify(normalizedCurrentParallel) !==
-      normalizedStringify(normalizedDeployedParallel)
-    ) {
-      return true
+  for (const id of previousParallelIds) {
+    if (!currentParallelIds.includes(id)) {
+      result.parallelChanges.removed++
     }
   }
 
-  // 6. Compare variables
-  const currentVariables = normalizeVariables(currentState.variables)
-  const deployedVariables = normalizeVariables(deployedState.variables)
+  const currentVars = normalizeVariables(currentState.variables)
+  const previousVars = normalizeVariables(previousState.variables)
+  const currentVarIds = Object.keys(currentVars)
+  const previousVarIds = Object.keys(previousVars)
 
-  const normalizedCurrentVars = normalizeValue(
-    Object.fromEntries(Object.entries(currentVariables).map(([id, v]) => [id, sanitizeVariable(v)]))
-  )
-  const normalizedDeployedVars = normalizeValue(
-    Object.fromEntries(
-      Object.entries(deployedVariables).map(([id, v]) => [id, sanitizeVariable(v)])
-    )
-  )
+  result.variableChanges.added = currentVarIds.filter((id) => !previousVarIds.includes(id)).length
+  result.variableChanges.removed = previousVarIds.filter((id) => !currentVarIds.includes(id)).length
 
-  if (normalizedStringify(normalizedCurrentVars) !== normalizedStringify(normalizedDeployedVars)) {
-    return true
+  for (const id of currentVarIds) {
+    if (!previousVarIds.includes(id)) continue
+    const currentVar = normalizeValue(sanitizeVariable(currentVars[id]))
+    const previousVar = normalizeValue(sanitizeVariable(previousVars[id]))
+    if (normalizedStringify(currentVar) !== normalizedStringify(previousVar)) {
+      result.variableChanges.modified++
+    }
   }
 
-  return false
+  result.hasChanges =
+    result.addedBlocks.length > 0 ||
+    result.removedBlocks.length > 0 ||
+    result.modifiedBlocks.length > 0 ||
+    result.edgeChanges.added > 0 ||
+    result.edgeChanges.removed > 0 ||
+    result.loopChanges.added > 0 ||
+    result.loopChanges.removed > 0 ||
+    result.parallelChanges.added > 0 ||
+    result.parallelChanges.removed > 0 ||
+    result.variableChanges.added > 0 ||
+    result.variableChanges.removed > 0 ||
+    result.variableChanges.modified > 0
+
+  return result
+}
+
+function formatValueForDisplay(value: unknown): string {
+  if (value === null || value === undefined) return '(none)'
+  if (typeof value === 'string') {
+    if (value.length > 50) return `${value.slice(0, 50)}...`
+    return value || '(empty)'
+  }
+  if (typeof value === 'boolean') return value ? 'enabled' : 'disabled'
+  if (typeof value === 'number') return String(value)
+  if (Array.isArray(value)) return `[${value.length} items]`
+  if (typeof value === 'object') return `${JSON.stringify(value).slice(0, 50)}...`
+  return String(value)
+}
+
+/**
+ * Convert a WorkflowDiffSummary to a human-readable string for AI description generation
+ */
+export function formatDiffSummaryForDescription(summary: WorkflowDiffSummary): string {
+  if (!summary.hasChanges) {
+    return 'No structural changes detected (configuration may have changed)'
+  }
+
+  const changes: string[] = []
+
+  for (const block of summary.addedBlocks) {
+    const name = block.name || block.type
+    changes.push(`Added block: ${name} (${block.type})`)
+  }
+
+  for (const block of summary.removedBlocks) {
+    const name = block.name || block.type
+    changes.push(`Removed block: ${name} (${block.type})`)
+  }
+
+  for (const block of summary.modifiedBlocks) {
+    const name = block.name || block.type
+    for (const change of block.changes.slice(0, 3)) {
+      const oldStr = formatValueForDisplay(change.oldValue)
+      const newStr = formatValueForDisplay(change.newValue)
+      changes.push(`Modified ${name}: ${change.field} changed from "${oldStr}" to "${newStr}"`)
+    }
+    if (block.changes.length > 3) {
+      changes.push(`  ...and ${block.changes.length - 3} more changes in ${name}`)
+    }
+  }
+
+  if (summary.edgeChanges.added > 0) {
+    changes.push(`Added ${summary.edgeChanges.added} connection(s)`)
+  }
+  if (summary.edgeChanges.removed > 0) {
+    changes.push(`Removed ${summary.edgeChanges.removed} connection(s)`)
+  }
+
+  if (summary.loopChanges.added > 0) {
+    changes.push(`Added ${summary.loopChanges.added} loop(s)`)
+  }
+  if (summary.loopChanges.removed > 0) {
+    changes.push(`Removed ${summary.loopChanges.removed} loop(s)`)
+  }
+
+  if (summary.parallelChanges.added > 0) {
+    changes.push(`Added ${summary.parallelChanges.added} parallel group(s)`)
+  }
+  if (summary.parallelChanges.removed > 0) {
+    changes.push(`Removed ${summary.parallelChanges.removed} parallel group(s)`)
+  }
+
+  const varChanges: string[] = []
+  if (summary.variableChanges.added > 0) {
+    varChanges.push(`${summary.variableChanges.added} added`)
+  }
+  if (summary.variableChanges.removed > 0) {
+    varChanges.push(`${summary.variableChanges.removed} removed`)
+  }
+  if (summary.variableChanges.modified > 0) {
+    varChanges.push(`${summary.variableChanges.modified} modified`)
+  }
+  if (varChanges.length > 0) {
+    changes.push(`Variables: ${varChanges.join(', ')}`)
+  }
+
+  return changes.join('\n')
 }

apps/sim/lib/workflows/persistence/utils.ts

@@ -27,6 +27,7 @@ export interface WorkflowDeploymentVersionResponse {
   id: string
   version: number
   name?: string | null
+  description?: string | null
   isActive: boolean
   createdAt: string
   createdBy?: string | null

apps/sim/stores/constants.ts

@@ -36,7 +36,7 @@ export const PANEL_WIDTH = {
 
 /** Terminal height constraints */
 export const TERMINAL_HEIGHT = {
-  DEFAULT: 206,
+  DEFAULT: 155,
   MIN: 30,
   /** Maximum is 70% of viewport, enforced dynamically */
   MAX_PERCENTAGE: 0.7,
@@ -58,9 +58,6 @@ export const EDITOR_CONNECTIONS_HEIGHT = {
 
 /** Output panel (terminal execution results) width constraints */
 export const OUTPUT_PANEL_WIDTH = {
-  DEFAULT: 560,
-  MIN: 280,
+  DEFAULT: 440,
+  MIN: 440,
 } as const
-
-/** Terminal block column width - minimum width for the logs column */
-export const TERMINAL_BLOCK_COLUMN_WIDTH = 240 as const

apps/sim/stores/terminal/console/store.ts

@@ -339,49 +339,12 @@ export const useTerminalConsoleStore = create<ConsoleStore>()(
                     : update.input
               }
 
-              if (update.isRunning !== undefined) {
-                updatedEntry.isRunning = update.isRunning
-              }
-
-              if (update.isCanceled !== undefined) {
-                updatedEntry.isCanceled = update.isCanceled
-              }
-
-              if (update.iterationCurrent !== undefined) {
-                updatedEntry.iterationCurrent = update.iterationCurrent
-              }
-
-              if (update.iterationTotal !== undefined) {
-                updatedEntry.iterationTotal = update.iterationTotal
-              }
-
-              if (update.iterationType !== undefined) {
-                updatedEntry.iterationType = update.iterationType
-              }
-
               return updatedEntry
             })
 
             return { entries: updatedEntries }
           })
         },
-
-        cancelRunningEntries: (workflowId: string) => {
-          set((state) => {
-            const updatedEntries = state.entries.map((entry) => {
-              if (entry.workflowId === workflowId && entry.isRunning) {
-                return {
-                  ...entry,
-                  isRunning: false,
-                  isCanceled: true,
-                  endedAt: new Date().toISOString(),
-                }
-              }
-              return entry
-            })
-            return { entries: updatedEntries }
-          })
-        },
       }),
       {
         name: 'terminal-console-store',

apps/sim/stores/terminal/console/types.ts

@@ -20,10 +20,6 @@ export interface ConsoleEntry {
   iterationCurrent?: number
   iterationTotal?: number
   iterationType?: SubflowType
-  /** Whether this block is currently running */
-  isRunning?: boolean
-  /** Whether this block execution was canceled */
-  isCanceled?: boolean
 }
 
 export interface ConsoleUpdate {
@@ -36,14 +32,6 @@ export interface ConsoleUpdate {
   endedAt?: string
   durationMs?: number
   input?: any
-  /** Whether this block is currently running */
-  isRunning?: boolean
-  /** Whether this block execution was canceled */
-  isCanceled?: boolean
-  /** Iteration context for subflow blocks */
-  iterationCurrent?: number
-  iterationTotal?: number
-  iterationType?: SubflowType
 }
 
 export interface ConsoleStore {
@@ -55,7 +43,6 @@ export interface ConsoleStore {
   getWorkflowEntries: (workflowId: string) => ConsoleEntry[]
   toggleConsole: () => void
   updateConsole: (blockId: string, update: string | ConsoleUpdate, executionId?: string) => void
-  cancelRunningEntries: (workflowId: string) => void
   _hasHydrated: boolean
   setHasHydrated: (hasHydrated: boolean) => void
 }

apps/sim/stores/terminal/store.ts

@@ -69,15 +69,6 @@ export const useTerminalStore = create<TerminalState>()(
       setWrapText: (wrap) => {
         set({ wrapText: wrap })
       },
-      structuredView: true,
-      /**
-       * Enables or disables structured view mode in the output panel.
-       *
-       * @param structured - Whether output should be displayed as nested blocks.
-       */
-      setStructuredView: (structured) => {
-        set({ structuredView: structured })
-      },
       /**
        * Indicates whether the terminal store has finished client-side hydration.
        */

apps/sim/stores/terminal/types.ts

@@ -19,8 +19,6 @@ export interface TerminalState {
   setOpenOnRun: (open: boolean) => void
   wrapText: boolean
   setWrapText: (wrap: boolean) => void
-  structuredView: boolean
-  setStructuredView: (structured: boolean) => void
   /**
    * Indicates whether the terminal is currently being resized via mouse drag.
    *

helm/sim/examples/values-azure.yaml

@@ -4,9 +4,8 @@
 # Global configuration
 global:
   imageRegistry: "ghcr.io"
-  # Use "managed-csi-premium" for Premium SSD, "managed-csi" for Standard SSD
-  # IMPORTANT: For production, use a StorageClass with reclaimPolicy: Retain
-  # to protect database volumes from accidental deletion.
+  # Use "managed-csi-premium" for Premium SSD (requires Premium storage-capable VMs like Standard_DS*)
+  # Use "managed-csi" for Standard SSD (works with all VM types)
   storageClass: "managed-csi"
 
 # Main application

helm/sim/examples/values-production.yaml

@@ -4,7 +4,6 @@
 # Global configuration
 global:
   imageRegistry: "ghcr.io"
-  # For production, use a StorageClass with reclaimPolicy: Retain
   storageClass: "managed-csi-premium"
 
 # Main application

helm/sim/templates/certificate-postgresql.yaml

@@ -11,12 +11,12 @@ spec:
   duration: {{ .Values.postgresql.tls.duration | default "87600h" }}  # Default: 10 years
   renewBefore: {{ .Values.postgresql.tls.renewBefore | default "2160h" }}  # Default: 90 days before expiry
   isCA: false
+  {{- if .Values.postgresql.tls.rotationPolicy }}
+  rotationPolicy: {{ .Values.postgresql.tls.rotationPolicy }}
+  {{- end }}
   privateKey:
     algorithm: {{ .Values.postgresql.tls.privateKey.algorithm | default "RSA" }}
     size: {{ .Values.postgresql.tls.privateKey.size | default 4096 }}
-    {{- if .Values.postgresql.tls.rotationPolicy }}
-    rotationPolicy: {{ .Values.postgresql.tls.rotationPolicy }}
-    {{- end }}
   usages:
     - server auth
     - client auth

helm/sim/templates/configmap-branding.yaml

@@ -1,4 +1,4 @@
-{{- if and .Values.branding.enabled (or .Values.branding.files .Values.branding.binaryFiles) }}
+{{- if .Values.branding.enabled }}
 ---
 # Branding ConfigMap
 # Mounts custom branding assets (logos, CSS, etc.) into the application

helm/sim/templates/deployment-app.yaml

@@ -110,10 +110,9 @@ spec:
           {{- end }}
           {{- include "sim.resources" .Values.app | nindent 10 }}
           {{- include "sim.securityContext" .Values.app | nindent 10 }}
-          {{- $hasBranding := and .Values.branding.enabled (or .Values.branding.files .Values.branding.binaryFiles) }}
-          {{- if or $hasBranding .Values.extraVolumeMounts .Values.app.extraVolumeMounts }}
+          {{- if or .Values.branding.enabled .Values.extraVolumeMounts .Values.app.extraVolumeMounts }}
           volumeMounts:
-            {{- if $hasBranding }}
+            {{- if .Values.branding.enabled }}
             - name: branding
               mountPath: {{ .Values.branding.mountPath | default "/app/public/branding" }}
               readOnly: true
@@ -125,10 +124,9 @@ spec:
             {{- toYaml . | nindent 12 }}
             {{- end }}
           {{- end }}
-      {{- $hasBranding := and .Values.branding.enabled (or .Values.branding.files .Values.branding.binaryFiles) }}
-      {{- if or $hasBranding .Values.extraVolumes .Values.app.extraVolumes }}
+      {{- if or .Values.branding.enabled .Values.extraVolumes .Values.app.extraVolumes }}
       volumes:
-        {{- if $hasBranding }}
+        {{- if .Values.branding.enabled }}
         - name: branding
           configMap:
             name: {{ include "sim.fullname" . }}-branding

packages/db/migrations/0148_aberrant_venom.sql

@@ -0,0 +1 @@
+ALTER TABLE "workflow_deployment_version" ADD COLUMN "description" text;

packages/db/migrations/meta/_journal.json

@@ -1030,6 +1030,13 @@
       "when": 1769134350805,
       "tag": "0147_rare_firebrand",
       "breakpoints": true
+    },
+    {
+      "idx": 148,
+      "version": "7",
+      "when": 1769626313827,
+      "tag": "0148_aberrant_venom",
+      "breakpoints": true
     }
   ]
 }

packages/db/schema.ts

@@ -1634,6 +1634,7 @@ export const workflowDeploymentVersion = pgTable(
       .references(() => workflow.id, { onDelete: 'cascade' }),
     version: integer('version').notNull(),
     name: text('name'),
+    description: text('description'),
     state: json('state').notNull(),
     isActive: boolean('is_active').notNull().default(false),
     createdAt: timestamp('created_at').notNull().defaultNow(),