improvement(code): addressed comments

* feat(code): undo-redo state

* address greptile

* address bugbot comments

* fix debounce flush

* inc debounce time

* fix wand case

* address comments

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

@@ -39,6 +39,8 @@ import { normalizeName } from '@/executor/constants'
 import { createEnvVarPattern, createReferencePattern } from '@/executor/utils/reference-validation'
 import { useTagSelection } from '@/hooks/kb/use-tag-selection'
 import { createShouldHighlightEnvVar, useAvailableEnvVarKeys } from '@/hooks/use-available-env-vars'
+import { useCodeUndoRedo } from '@/hooks/use-code-undo-redo'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('Code')
 
@@ -212,7 +214,6 @@ export const Code = memo(function Code({
   const handleStreamStartRef = useRef<() => void>(() => {})
   const handleGeneratedContentRef = useRef<(generatedCode: string) => void>(() => {})
   const handleStreamChunkRef = useRef<(chunk: string) => void>(() => {})
-  const hasEditedSinceFocusRef = useRef(false)
   const codeRef = useRef(code)
   codeRef.current = code
 
@@ -220,8 +221,12 @@ export const Code = memo(function Code({
   const emitTagSelection = useTagSelection(blockId, subBlockId)
   const [languageValue] = useSubBlockValue<string>(blockId, 'language')
   const availableEnvVars = useAvailableEnvVarKeys(workspaceId)
+  const blockType = useWorkflowStore(
+    useCallback((state) => state.blocks?.[blockId]?.type, [blockId])
+  )
 
   const effectiveLanguage = (languageValue as 'javascript' | 'python' | 'json') || language
+  const isFunctionCode = blockType === 'function' && subBlockId === 'code'
 
   const trimmedCode = code.trim()
   const containsReferencePlaceholders =
@@ -296,6 +301,15 @@ export const Code = memo(function Code({
   const updatePromptValue = wandHook?.updatePromptValue || (() => {})
   const cancelGeneration = wandHook?.cancelGeneration || (() => {})
 
+  const { recordChange, recordReplace, flushPending, startSession, undo, redo } = useCodeUndoRedo({
+    blockId,
+    subBlockId,
+    value: code,
+    enabled: isFunctionCode,
+    isReadOnly: readOnly || disabled || isPreview,
+    isStreaming: isAiStreaming,
+  })
+
   const [storeValue, setStoreValue] = useSubBlockValue(blockId, subBlockId, false, {
     isStreaming: isAiStreaming,
     onStreamingEnd: () => {
@@ -347,9 +361,10 @@ export const Code = memo(function Code({
       setCode(generatedCode)
       if (!isPreview && !disabled) {
         setStoreValue(generatedCode)
+        recordReplace(generatedCode)
       }
     }
-  }, [isPreview, disabled, setStoreValue])
+  }, [disabled, isPreview, recordReplace, setStoreValue])
 
   useEffect(() => {
     if (!editorRef.current) return
@@ -492,7 +507,7 @@ export const Code = memo(function Code({
 
       setCode(newValue)
       setStoreValue(newValue)
-      hasEditedSinceFocusRef.current = true
+      recordChange(newValue)
       const newCursorPosition = dropPosition + 1
       setCursorPosition(newCursorPosition)
 
@@ -521,7 +536,7 @@ export const Code = memo(function Code({
     if (!isPreview && !readOnly) {
       setCode(newValue)
       emitTagSelection(newValue)
-      hasEditedSinceFocusRef.current = true
+      recordChange(newValue)
     }
     setShowTags(false)
     setActiveSourceBlockId(null)
@@ -539,7 +554,7 @@ export const Code = memo(function Code({
     if (!isPreview && !readOnly) {
       setCode(newValue)
       emitTagSelection(newValue)
-      hasEditedSinceFocusRef.current = true
+      recordChange(newValue)
     }
     setShowEnvVars(false)
 
@@ -625,9 +640,9 @@ export const Code = memo(function Code({
   const handleValueChange = useCallback(
     (newCode: string) => {
       if (!isAiStreaming && !isPreview && !disabled && !readOnly) {
-        hasEditedSinceFocusRef.current = true
         setCode(newCode)
         setStoreValue(newCode)
+        recordChange(newCode)
 
         const textarea = editorRef.current?.querySelector('textarea')
         if (textarea) {
@@ -646,7 +661,7 @@ export const Code = memo(function Code({
         }
       }
     },
-    [isAiStreaming, isPreview, disabled, readOnly, setStoreValue]
+    [isAiStreaming, isPreview, disabled, readOnly, recordChange, setStoreValue]
   )
 
   const handleKeyDown = useCallback(
@@ -657,21 +672,39 @@ export const Code = memo(function Code({
       }
       if (isAiStreaming) {
         e.preventDefault()
+        return
       }
-      if (e.key === 'z' && (e.metaKey || e.ctrlKey) && !hasEditedSinceFocusRef.current) {
+      if (!isFunctionCode) return
+      const isUndo = (e.key === 'z' || e.key === 'Z') && (e.metaKey || e.ctrlKey) && !e.shiftKey
+      const isRedo =
+        ((e.key === 'z' || e.key === 'Z') && (e.metaKey || e.ctrlKey) && e.shiftKey) ||
+        (e.key === 'y' && (e.metaKey || e.ctrlKey))
+      if (isUndo) {
         e.preventDefault()
+        e.stopPropagation()
+        undo()
+        return
+      }
+      if (isRedo) {
+        e.preventDefault()
+        e.stopPropagation()
+        redo()
       }
     },
-    [isAiStreaming]
+    [isAiStreaming, isFunctionCode, redo, undo]
   )
 
   const handleEditorFocus = useCallback(() => {
-    hasEditedSinceFocusRef.current = false
+    startSession(codeRef.current)
     if (!isPreview && !disabled && !readOnly && codeRef.current.trim() === '') {
       setShowTags(true)
       setCursorPosition(0)
     }
-  }, [isPreview, disabled, readOnly])
+  }, [disabled, isPreview, readOnly, startSession])
+
+  const handleEditorBlur = useCallback(() => {
+    flushPending()
+  }, [flushPending])
 
   /**
    * Renders the line numbers, aligned with wrapped visual lines and highlighting the active line.
@@ -791,6 +824,7 @@ export const Code = memo(function Code({
             onValueChange={handleValueChange}
             onKeyDown={handleKeyDown}
             onFocus={handleEditorFocus}
+            onBlur={handleEditorBlur}
             highlight={highlightCode}
             {...getCodeEditorProps({ isStreaming: isAiStreaming, isPreview, disabled })}
           />

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

@@ -1,2 +1,2 @@
 export { LogRowContextMenu } from './log-row-context-menu'
-export { OutputContextMenu } from './output-context-menu'
+export { OutputPanel } from './output-panel'

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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,601 @@
+'use client'
+
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
+import {
+  ArrowDown,
+  ArrowDownToLine,
+  ArrowUp,
+  Check,
+  ChevronDown,
+  Clipboard,
+  Database,
+  FilterX,
+  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 { OutputContextMenu } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/output-context-menu'
+import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
+import type { ConsoleEntry } 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'}
+    />
+  )
+})
+
+/**
+ * Reusable toggle button component
+ */
+const ToggleButton = ({
+  isExpanded,
+  onClick,
+}: {
+  isExpanded: boolean
+  onClick: (e: React.MouseEvent) => void
+}) => (
+  <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>
+)
+
+/**
+ * Props for the OutputPanel component
+ */
+export interface OutputPanelProps {
+  selectedEntry: ConsoleEntry
+  outputPanelWidth: number
+  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
+  clearFilters: () => void
+  handleClearConsole: (e: React.MouseEvent) => void
+  wrapText: boolean
+  setWrapText: (wrap: boolean) => void
+  openOnRun: boolean
+  setOpenOnRun: (open: boolean) => void
+  outputOptionsOpen: boolean
+  setOutputOptionsOpen: (open: boolean) => void
+  shouldShowCodeDisplay: boolean
+  outputDataStringified: string
+  handleClearConsoleFromMenu: () => void
+}
+
+/**
+ * Output panel component that manages its own search state.
+ */
+export const OutputPanel = React.memo(function OutputPanel({
+  selectedEntry,
+  outputPanelWidth,
+  handleOutputPanelResizeMouseDown,
+  handleHeaderClick,
+  isExpanded,
+  expandToLastHeight,
+  showInput,
+  setShowInput,
+  hasInputData,
+  isPlaygroundEnabled,
+  shouldShowTrainingButton,
+  isTraining,
+  handleTrainingClick,
+  showCopySuccess,
+  handleCopy,
+  filteredEntries,
+  handleExportConsole,
+  hasActiveFilters,
+  clearFilters,
+  handleClearConsole,
+  wrapText,
+  setWrapText,
+  openOnRun,
+  setOpenOnRun,
+  outputOptionsOpen,
+  setOutputOptionsOpen,
+  shouldShowCodeDisplay,
+  outputDataStringified,
+  handleClearConsoleFromMenu,
+}: OutputPanelProps) {
+  const outputContentRef = useRef<HTMLDivElement>(null)
+  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])
+
+  /**
+   * 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])
+
+  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={(e) => {
+                e.stopPropagation()
+                if (!isExpanded) {
+                  expandToLastHeight()
+                }
+                if (showInput) setShowInput(false)
+              }}
+              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={(e) => {
+                  e.stopPropagation()
+                  if (!isExpanded) {
+                    expandToLastHeight()
+                  }
+                  setShowInput(true)
+                }}
+                aria-label='Show input'
+              >
+                Input
+              </Button>
+            )}
+          </div>
+          <div className='flex flex-shrink-0 items-center gap-[8px]'>
+            {isOutputSearchActive ? (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      closeOutputSearch()
+                    }}
+                    aria-label='Search in output'
+                    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={(e) => {
+                      e.stopPropagation()
+                      activateOutputSearch()
+                    }}
+                    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={(e) => {
+                    e.stopPropagation()
+                    handleCopy()
+                  }}
+                  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>
+            )}
+            {hasActiveFilters && (
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      clearFilters()
+                    }}
+                    aria-label='Clear filters'
+                    className='!p-1.5 -m-1.5'
+                  >
+                    <FilterX className='h-3 w-3' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Clear filters</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            )}
+            {filteredEntries.length > 0 && (
+              <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={wrapText}
+                  showCheck={wrapText}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setWrapText(!wrapText)
+                  }}
+                >
+                  <span>Wrap text</span>
+                </PopoverItem>
+                <PopoverItem
+                  active={openOnRun}
+                  showCheck={openOnRun}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    setOpenOnRun(!openOnRun)
+                  }}
+                >
+                  <span>Open on run</span>
+                </PopoverItem>
+              </PopoverContent>
+            </Popover>
+            <ToggleButton
+              isExpanded={isExpanded}
+              onClick={(e) => {
+                e.stopPropagation()
+                handleHeaderClick()
+              }}
+            />
+          </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={isOutputSearchActive ? outputSearchQuery : undefined}
+              currentMatchIndex={currentMatchIndex}
+              onMatchCountChange={handleMatchCountChange}
+              contentRef={outputContentRef}
+            />
+          ) : (
+            <OutputCodeContent
+              code={outputDataStringified}
+              language='json'
+              wrapText={wrapText}
+              searchQuery={isOutputSearchActive ? outputSearchQuery : undefined}
+              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}
+        wrapText={wrapText}
+        onToggleWrap={() => setWrapText(!wrapText)}
+        openOnRun={openOnRun}
+        onToggleOpenOnRun={() => setOpenOnRun(!openOnRun)}
+        onClearConsole={handleClearConsoleFromMenu}
+        hasSelection={hasSelection}
+      />
+    </>
+  )
+})

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

@@ -1,14 +1,13 @@
 'use client'
 
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type React from 'react'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
 import {
   ArrowDown,
   ArrowDownToLine,
   ArrowUp,
-  Check,
   ChevronDown,
-  Clipboard,
   Database,
   Filter,
   FilterX,
@@ -16,18 +15,14 @@ import {
   Palette,
   Pause,
   RepeatIcon,
-  Search,
   SplitIcon,
   Trash2,
-  X,
 } from 'lucide-react'
 import Link from 'next/link'
 import { useShallow } from 'zustand/react/shallow'
 import {
   Badge,
   Button,
-  Code,
-  Input,
   Popover,
   PopoverContent,
   PopoverItem,
@@ -41,7 +36,7 @@ import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/provide
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
 import {
   LogRowContextMenu,
-  OutputContextMenu,
+  OutputPanel,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components'
 import {
   useOutputPanelResize,
@@ -51,7 +46,6 @@ import {
 import { useContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
 import { getBlock } from '@/blocks'
 import { useShowTrainingControls } from '@/hooks/queries/general-settings'
-import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { OUTPUT_PANEL_WIDTH, TERMINAL_HEIGHT } from '@/stores/constants'
 import { useCopilotTrainingStore } from '@/stores/copilot-training/store'
 import { openCopilotWithMessage } from '@/stores/notifications/utils'
@@ -235,551 +229,6 @@ const isEventFromEditableElement = (e: KeyboardEvent): boolean => {
   return false
 }
 
-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
-    />
-  )
-})
-
-/**
- * Props for the OutputPanel component
- */
-interface OutputPanelProps {
-  selectedEntry: ConsoleEntry
-  outputPanelWidth: number
-  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
-  clearFilters: () => void
-  handleClearConsole: (e: React.MouseEvent) => void
-  wrapText: boolean
-  setWrapText: (wrap: boolean) => void
-  openOnRun: boolean
-  setOpenOnRun: (open: boolean) => void
-  outputOptionsOpen: boolean
-  setOutputOptionsOpen: (open: boolean) => void
-  shouldShowCodeDisplay: boolean
-  outputDataStringified: string
-  handleClearConsoleFromMenu: () => void
-}
-
-/**
- * Output panel component that manages its own search state.
- */
-const OutputPanel = React.memo(function OutputPanel({
-  selectedEntry,
-  outputPanelWidth,
-  handleOutputPanelResizeMouseDown,
-  handleHeaderClick,
-  isExpanded,
-  expandToLastHeight,
-  showInput,
-  setShowInput,
-  hasInputData,
-  isPlaygroundEnabled,
-  shouldShowTrainingButton,
-  isTraining,
-  handleTrainingClick,
-  showCopySuccess,
-  handleCopy,
-  filteredEntries,
-  handleExportConsole,
-  hasActiveFilters,
-  clearFilters,
-  handleClearConsole,
-  wrapText,
-  setWrapText,
-  openOnRun,
-  setOpenOnRun,
-  outputOptionsOpen,
-  setOutputOptionsOpen,
-  shouldShowCodeDisplay,
-  outputDataStringified,
-  handleClearConsoleFromMenu,
-}: OutputPanelProps) {
-  const outputContentRef = useRef<HTMLDivElement>(null)
-  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])
-
-  /**
-   * 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])
-
-  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={(e) => {
-                e.stopPropagation()
-                if (!isExpanded) {
-                  expandToLastHeight()
-                }
-                if (showInput) setShowInput(false)
-              }}
-              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={(e) => {
-                  e.stopPropagation()
-                  if (!isExpanded) {
-                    expandToLastHeight()
-                  }
-                  setShowInput(true)
-                }}
-                aria-label='Show input'
-              >
-                Input
-              </Button>
-            )}
-          </div>
-          <div className='flex flex-shrink-0 items-center gap-[8px]'>
-            {isOutputSearchActive ? (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      closeOutputSearch()
-                    }}
-                    aria-label='Search in output'
-                    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={(e) => {
-                      e.stopPropagation()
-                      activateOutputSearch()
-                    }}
-                    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={(e) => {
-                    e.stopPropagation()
-                    handleCopy()
-                  }}
-                  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>
-            )}
-            {hasActiveFilters && (
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      clearFilters()
-                    }}
-                    aria-label='Clear filters'
-                    className='!p-1.5 -m-1.5'
-                  >
-                    <FilterX className='h-3 w-3' />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content>
-                  <span>Clear filters</span>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            )}
-            {filteredEntries.length > 0 && (
-              <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={wrapText}
-                  showCheck={wrapText}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setWrapText(!wrapText)
-                  }}
-                >
-                  <span>Wrap text</span>
-                </PopoverItem>
-                <PopoverItem
-                  active={openOnRun}
-                  showCheck={openOnRun}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    setOpenOnRun(!openOnRun)
-                  }}
-                >
-                  <span>Open on run</span>
-                </PopoverItem>
-              </PopoverContent>
-            </Popover>
-            <ToggleButton
-              isExpanded={isExpanded}
-              onClick={(e) => {
-                e.stopPropagation()
-                handleHeaderClick()
-              }}
-            />
-          </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={isOutputSearchActive ? outputSearchQuery : undefined}
-              currentMatchIndex={currentMatchIndex}
-              onMatchCountChange={handleMatchCountChange}
-              contentRef={outputContentRef}
-            />
-          ) : (
-            <OutputCodeContent
-              code={outputDataStringified}
-              language='json'
-              wrapText={wrapText}
-              searchQuery={isOutputSearchActive ? outputSearchQuery : undefined}
-              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}
-        wrapText={wrapText}
-        onToggleWrap={() => setWrapText(!wrapText)}
-        openOnRun={openOnRun}
-        onToggleOpenOnRun={() => setOpenOnRun(!openOnRun)}
-        onClearConsole={handleClearConsoleFromMenu}
-        hasSelection={hasSelection}
-      />
-    </>
-  )
-})
-
 /**
  * Terminal component with resizable height that persists across page refreshes.
  *
@@ -1371,7 +820,7 @@ export const Terminal = memo(function Terminal() {
   }, [expandToLastHeight, selectedEntry, showInput, hasInputData, isExpanded])
 
   /**
-   * Handle Escape to unselect entry (search close is handled by useCodeViewerFeatures)
+   * Handle Escape to unselect entry (search close is handled by OutputPanel internally)
    * Check if the focused element is in the search overlay to avoid conflicting with search close.
    */
   useEffect(() => {

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/workflow-mcp-servers/workflow-mcp-servers.tsx

@@ -185,6 +185,16 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
         return `claude mcp add "${safeName}" --url "${mcpServerUrl}" --header "X-API-Key:$SIM_API_KEY"`
       }
 
+      // Cursor supports direct URL configuration (no mcp-remote needed)
+      if (client === 'cursor') {
+        const cursorConfig = isPublic
+          ? { url: mcpServerUrl }
+          : { url: mcpServerUrl, headers: { 'X-API-Key': '$SIM_API_KEY' } }
+
+        return JSON.stringify({ mcpServers: { [safeName]: cursorConfig } }, null, 2)
+      }
+
+      // Claude Desktop and VS Code still use mcp-remote (stdio transport)
       const mcpRemoteArgs = isPublic
         ? ['-y', 'mcp-remote', mcpServerUrl]
         : ['-y', 'mcp-remote', mcpServerUrl, '--header', 'X-API-Key:$SIM_API_KEY']
@@ -265,14 +275,8 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
         .replace(/[^a-z0-9-]/g, '')
 
       const config = isPublic
-        ? {
-            command: 'npx',
-            args: ['-y', 'mcp-remote', mcpServerUrl],
-          }
-        : {
-            command: 'npx',
-            args: ['-y', 'mcp-remote', mcpServerUrl, '--header', 'X-API-Key:$SIM_API_KEY'],
-          }
+        ? { url: mcpServerUrl }
+        : { url: mcpServerUrl, headers: { 'X-API-Key': '$SIM_API_KEY' } }
 
       const base64Config = btoa(JSON.stringify(config))
       return `cursor://anysphere.cursor-deeplink/mcp/install?name=${encodeURIComponent(safeName)}&config=${encodeURIComponent(base64Config)}`

apps/sim/blocks/blocks/human_in_the_loop.ts

@@ -162,9 +162,5 @@ export const HumanInTheLoopBlock: BlockConfig<ResponseBlockOutput> = {
       type: 'string',
       description: 'Resume API endpoint URL for direct curl requests',
     },
-    response: { type: 'json', description: 'Display data shown to the approver' },
-    submission: { type: 'json', description: 'Form submission data from the approver' },
-    resumeInput: { type: 'json', description: 'Raw input data submitted when resuming' },
-    submittedAt: { type: 'string', description: 'ISO timestamp when the workflow was resumed' },
   },
 }

apps/sim/executor/execution/block-executor.ts

@@ -12,6 +12,7 @@ import {
   EDGE,
   isSentinelBlockType,
   isTriggerBehavior,
+  isWorkflowBlockType,
 } from '@/executor/constants'
 import type { DAGNode } from '@/executor/dag/builder'
 import { ChildWorkflowError } from '@/executor/errors/child-workflow-error'
@@ -154,8 +155,8 @@ export class BlockExecutor {
       this.state.setBlockOutput(node.id, normalizedOutput, duration)
 
       if (!isSentinel) {
-        const filteredOutput = this.filterOutputForLog(block, normalizedOutput)
-        this.callOnBlockComplete(ctx, node, block, resolvedInputs, filteredOutput, duration)
+        const displayOutput = this.filterOutputForDisplay(block, normalizedOutput)
+        this.callOnBlockComplete(ctx, node, block, resolvedInputs, displayOutput, duration)
       }
 
       return normalizedOutput
@@ -245,7 +246,8 @@ export class BlockExecutor {
     )
 
     if (!isSentinel) {
-      this.callOnBlockComplete(ctx, node, block, input, errorOutput, duration)
+      const displayOutput = this.filterOutputForDisplay(block, errorOutput)
+      this.callOnBlockComplete(ctx, node, block, input, displayOutput, duration)
     }
 
     const hasErrorPort = this.hasErrorPortEdge(node)
@@ -337,7 +339,9 @@ export class BlockExecutor {
     block: SerializedBlock,
     output: NormalizedBlockOutput
   ): NormalizedBlockOutput {
-    if (block.metadata?.id === BlockType.HUMAN_IN_THE_LOOP) {
+    const blockType = block.metadata?.id
+
+    if (blockType === BlockType.HUMAN_IN_THE_LOOP) {
       const filtered: NormalizedBlockOutput = {}
       for (const [key, value] of Object.entries(output)) {
         if (key.startsWith('_')) continue
@@ -360,6 +364,22 @@ export class BlockExecutor {
     return output
   }
 
+  private filterOutputForDisplay(
+    block: SerializedBlock,
+    output: NormalizedBlockOutput
+  ): NormalizedBlockOutput {
+    const filtered = this.filterOutputForLog(block, output)
+
+    if (isWorkflowBlockType(block.metadata?.id)) {
+      const { childTraceSpans: _, ...displayOutput } = filtered as {
+        childTraceSpans?: unknown
+      } & Record<string, unknown>
+      return displayOutput
+    }
+
+    return filtered
+  }
+
   private callOnBlockStart(ctx: ExecutionContext, node: DAGNode, block: SerializedBlock): void {
     const blockId = node.id
     const blockName = block.metadata?.name ?? blockId

apps/sim/hooks/use-code-undo-redo.ts

@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { createLogger } from '@sim/logger'
+import { useShallow } from 'zustand/react/shallow'
+import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
+import { useCodeUndoRedoStore } from '@/stores/undo-redo'
+import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
+
+const logger = createLogger('CodeUndoRedo')
+
+interface UseCodeUndoRedoOptions {
+  blockId: string
+  subBlockId: string
+  value: string
+  enabled?: boolean
+  isReadOnly?: boolean
+  isStreaming?: boolean
+  debounceMs?: number
+}
+
+export function useCodeUndoRedo({
+  blockId,
+  subBlockId,
+  value,
+  enabled = true,
+  isReadOnly = false,
+  isStreaming = false,
+  debounceMs = 500,
+}: UseCodeUndoRedoOptions) {
+  const { collaborativeSetSubblockValue } = useCollaborativeWorkflow()
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
+  const { isShowingDiff, hasActiveDiff } = useWorkflowDiffStore(
+    useShallow((state) => ({
+      isShowingDiff: state.isShowingDiff,
+      hasActiveDiff: state.hasActiveDiff,
+    }))
+  )
+
+  const isBaselineView = hasActiveDiff && !isShowingDiff
+  const isEnabled = useMemo(
+    () => Boolean(enabled && activeWorkflowId && !isReadOnly && !isStreaming && !isBaselineView),
+    [enabled, activeWorkflowId, isReadOnly, isStreaming, isBaselineView]
+  )
+  const isReplaceEnabled = useMemo(
+    () => Boolean(enabled && activeWorkflowId && !isReadOnly && !isBaselineView),
+    [enabled, activeWorkflowId, isReadOnly, isBaselineView]
+  )
+
+  const lastCommittedValueRef = useRef<string>(value ?? '')
+  const pendingBeforeRef = useRef<string | null>(null)
+  const pendingAfterRef = useRef<string | null>(null)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const isApplyingRef = useRef(false)
+
+  const clearTimer = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+  }, [])
+
+  const resetPending = useCallback(() => {
+    pendingBeforeRef.current = null
+    pendingAfterRef.current = null
+  }, [])
+
+  const commitPending = useCallback(() => {
+    if (!isEnabled || !activeWorkflowId) {
+      clearTimer()
+      resetPending()
+      return
+    }
+
+    const before = pendingBeforeRef.current
+    const after = pendingAfterRef.current
+    if (before === null || after === null) return
+
+    if (before === after) {
+      lastCommittedValueRef.current = after
+      clearTimer()
+      resetPending()
+      return
+    }
+
+    useCodeUndoRedoStore.getState().push({
+      id: crypto.randomUUID(),
+      createdAt: Date.now(),
+      workflowId: activeWorkflowId,
+      blockId,
+      subBlockId,
+      before,
+      after,
+    })
+
+    lastCommittedValueRef.current = after
+    clearTimer()
+    resetPending()
+  }, [activeWorkflowId, blockId, clearTimer, isEnabled, resetPending, subBlockId])
+
+  const recordChange = useCallback(
+    (nextValue: string) => {
+      if (!isEnabled || isApplyingRef.current) return
+
+      if (pendingBeforeRef.current === null) {
+        pendingBeforeRef.current = lastCommittedValueRef.current ?? ''
+      }
+
+      pendingAfterRef.current = nextValue
+      clearTimer()
+      timeoutRef.current = setTimeout(commitPending, debounceMs)
+    },
+    [clearTimer, commitPending, debounceMs, isEnabled]
+  )
+
+  const recordReplace = useCallback(
+    (nextValue: string) => {
+      if (!isReplaceEnabled || isApplyingRef.current || !activeWorkflowId) return
+
+      if (pendingBeforeRef.current !== null) {
+        commitPending()
+      }
+
+      const before = lastCommittedValueRef.current ?? ''
+      if (before === nextValue) {
+        lastCommittedValueRef.current = nextValue
+        resetPending()
+        return
+      }
+
+      useCodeUndoRedoStore.getState().push({
+        id: crypto.randomUUID(),
+        createdAt: Date.now(),
+        workflowId: activeWorkflowId,
+        blockId,
+        subBlockId,
+        before,
+        after: nextValue,
+      })
+
+      lastCommittedValueRef.current = nextValue
+      clearTimer()
+      resetPending()
+    },
+    [
+      activeWorkflowId,
+      blockId,
+      clearTimer,
+      commitPending,
+      isReplaceEnabled,
+      resetPending,
+      subBlockId,
+    ]
+  )
+
+  const flushPending = useCallback(() => {
+    if (pendingBeforeRef.current === null) return
+    clearTimer()
+    commitPending()
+  }, [clearTimer, commitPending])
+
+  const startSession = useCallback(
+    (currentValue: string) => {
+      clearTimer()
+      resetPending()
+      lastCommittedValueRef.current = currentValue ?? ''
+    },
+    [clearTimer, resetPending]
+  )
+
+  const applyValue = useCallback(
+    (nextValue: string) => {
+      if (!isEnabled) return
+      isApplyingRef.current = true
+      try {
+        collaborativeSetSubblockValue(blockId, subBlockId, nextValue)
+      } finally {
+        isApplyingRef.current = false
+      }
+      lastCommittedValueRef.current = nextValue
+      clearTimer()
+      resetPending()
+    },
+    [blockId, clearTimer, collaborativeSetSubblockValue, isEnabled, resetPending, subBlockId]
+  )
+
+  const undo = useCallback(() => {
+    if (!activeWorkflowId || !isEnabled) return
+    if (pendingBeforeRef.current !== null) {
+      flushPending()
+    }
+    const entry = useCodeUndoRedoStore.getState().undo(activeWorkflowId, blockId, subBlockId)
+    if (!entry) return
+    logger.debug('Undo code edit', { blockId, subBlockId })
+    applyValue(entry.before)
+  }, [activeWorkflowId, applyValue, blockId, flushPending, isEnabled, subBlockId])
+
+  const redo = useCallback(() => {
+    if (!activeWorkflowId || !isEnabled) return
+    if (pendingBeforeRef.current !== null) {
+      flushPending()
+    }
+    const entry = useCodeUndoRedoStore.getState().redo(activeWorkflowId, blockId, subBlockId)
+    if (!entry) return
+    logger.debug('Redo code edit', { blockId, subBlockId })
+    applyValue(entry.after)
+  }, [activeWorkflowId, applyValue, blockId, flushPending, isEnabled, subBlockId])
+
+  useEffect(() => {
+    if (isApplyingRef.current || isStreaming) return
+
+    const nextValue = value ?? ''
+
+    if (pendingBeforeRef.current !== null) {
+      if (pendingAfterRef.current !== nextValue) {
+        clearTimer()
+        resetPending()
+        lastCommittedValueRef.current = nextValue
+      }
+      return
+    }
+
+    lastCommittedValueRef.current = nextValue
+  }, [clearTimer, isStreaming, resetPending, value])
+
+  useEffect(() => {
+    return () => {
+      flushPending()
+    }
+  }, [flushPending])
+
+  return {
+    recordChange,
+    recordReplace,
+    flushPending,
+    startSession,
+    undo,
+    redo,
+  }
+}

apps/sim/hooks/use-collaborative-workflow.ts

@@ -20,7 +20,7 @@ import {
 import { useNotificationStore } from '@/stores/notifications'
 import { registerEmitFunctions, useOperationQueue } from '@/stores/operation-queue/store'
 import { usePanelEditorStore, useVariablesStore } from '@/stores/panel'
-import { useUndoRedoStore } from '@/stores/undo-redo'
+import { useCodeUndoRedoStore, useUndoRedoStore } from '@/stores/undo-redo'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
@@ -449,6 +449,10 @@ export function useCollaborativeWorkflow() {
       try {
         // The setValue function automatically uses the active workflow ID
         useSubBlockStore.getState().setValue(blockId, subblockId, value)
+        const blockType = useWorkflowStore.getState().blocks?.[blockId]?.type
+        if (activeWorkflowId && blockType === 'function' && subblockId === 'code') {
+          useCodeUndoRedoStore.getState().clear(activeWorkflowId, blockId, subblockId)
+        }
       } catch (error) {
         logger.error('Error applying remote subblock update:', error)
       } finally {

apps/sim/stores/undo-redo/code-storage.ts

@@ -0,0 +1,36 @@
+import { createLogger } from '@sim/logger'
+import { del, get, set } from 'idb-keyval'
+import type { StateStorage } from 'zustand/middleware'
+
+const logger = createLogger('CodeUndoRedoStorage')
+
+export const codeUndoRedoStorage: StateStorage = {
+  getItem: async (name: string): Promise<string | null> => {
+    if (typeof window === 'undefined') return null
+    try {
+      const value = await get<string>(name)
+      return value ?? null
+    } catch (error) {
+      logger.warn('IndexedDB read failed', { name, error })
+      return null
+    }
+  },
+
+  setItem: async (name: string, value: string): Promise<void> => {
+    if (typeof window === 'undefined') return
+    try {
+      await set(name, value)
+    } catch (error) {
+      logger.warn('IndexedDB write failed', { name, error })
+    }
+  },
+
+  removeItem: async (name: string): Promise<void> => {
+    if (typeof window === 'undefined') return
+    try {
+      await del(name)
+    } catch (error) {
+      logger.warn('IndexedDB delete failed', { name, error })
+    }
+  },
+}

apps/sim/stores/undo-redo/code-store.ts

@@ -0,0 +1,151 @@
+import { create } from 'zustand'
+import { createJSONStorage, devtools, persist } from 'zustand/middleware'
+import { codeUndoRedoStorage } from '@/stores/undo-redo/code-storage'
+
+interface CodeUndoRedoEntry {
+  id: string
+  createdAt: number
+  workflowId: string
+  blockId: string
+  subBlockId: string
+  before: string
+  after: string
+}
+
+interface CodeUndoRedoStack {
+  undo: CodeUndoRedoEntry[]
+  redo: CodeUndoRedoEntry[]
+  lastUpdated?: number
+}
+
+interface CodeUndoRedoState {
+  stacks: Record<string, CodeUndoRedoStack>
+  capacity: number
+  push: (entry: CodeUndoRedoEntry) => void
+  undo: (workflowId: string, blockId: string, subBlockId: string) => CodeUndoRedoEntry | null
+  redo: (workflowId: string, blockId: string, subBlockId: string) => CodeUndoRedoEntry | null
+  clear: (workflowId: string, blockId: string, subBlockId: string) => void
+}
+
+const DEFAULT_CAPACITY = 500
+const MAX_STACKS = 50
+
+function getStackKey(workflowId: string, blockId: string, subBlockId: string): string {
+  return `${workflowId}:${blockId}:${subBlockId}`
+}
+
+const initialState = {
+  stacks: {} as Record<string, CodeUndoRedoStack>,
+  capacity: DEFAULT_CAPACITY,
+}
+
+export const useCodeUndoRedoStore = create<CodeUndoRedoState>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        ...initialState,
+        push: (entry) => {
+          if (entry.before === entry.after) return
+
+          const state = get()
+          const key = getStackKey(entry.workflowId, entry.blockId, entry.subBlockId)
+          const currentStacks = { ...state.stacks }
+
+          const stackKeys = Object.keys(currentStacks)
+          if (stackKeys.length >= MAX_STACKS && !currentStacks[key]) {
+            let oldestKey: string | null = null
+            let oldestTime = Number.POSITIVE_INFINITY
+
+            for (const stackKey of stackKeys) {
+              const t = currentStacks[stackKey].lastUpdated ?? 0
+              if (t < oldestTime) {
+                oldestTime = t
+                oldestKey = stackKey
+              }
+            }
+
+            if (oldestKey) {
+              delete currentStacks[oldestKey]
+            }
+          }
+
+          const stack = currentStacks[key] || { undo: [], redo: [] }
+
+          const newUndo = [...stack.undo, entry]
+          if (newUndo.length > state.capacity) {
+            newUndo.shift()
+          }
+
+          currentStacks[key] = {
+            undo: newUndo,
+            redo: [],
+            lastUpdated: Date.now(),
+          }
+
+          set({ stacks: currentStacks })
+        },
+        undo: (workflowId, blockId, subBlockId) => {
+          const key = getStackKey(workflowId, blockId, subBlockId)
+          const state = get()
+          const stack = state.stacks[key]
+          if (!stack || stack.undo.length === 0) return null
+
+          const entry = stack.undo[stack.undo.length - 1]
+          const newUndo = stack.undo.slice(0, -1)
+          const newRedo = [...stack.redo, entry]
+
+          set({
+            stacks: {
+              ...state.stacks,
+              [key]: {
+                undo: newUndo,
+                redo: newRedo.slice(-state.capacity),
+                lastUpdated: Date.now(),
+              },
+            },
+          })
+
+          return entry
+        },
+        redo: (workflowId, blockId, subBlockId) => {
+          const key = getStackKey(workflowId, blockId, subBlockId)
+          const state = get()
+          const stack = state.stacks[key]
+          if (!stack || stack.redo.length === 0) return null
+
+          const entry = stack.redo[stack.redo.length - 1]
+          const newRedo = stack.redo.slice(0, -1)
+          const newUndo = [...stack.undo, entry]
+
+          set({
+            stacks: {
+              ...state.stacks,
+              [key]: {
+                undo: newUndo.slice(-state.capacity),
+                redo: newRedo,
+                lastUpdated: Date.now(),
+              },
+            },
+          })
+
+          return entry
+        },
+        clear: (workflowId, blockId, subBlockId) => {
+          const key = getStackKey(workflowId, blockId, subBlockId)
+          const state = get()
+          const { [key]: _, ...rest } = state.stacks
+          set({ stacks: rest })
+        },
+      }),
+      {
+        name: 'code-undo-redo-store',
+        storage: createJSONStorage(() => codeUndoRedoStorage),
+        partialize: (state) => ({
+          stacks: state.stacks,
+          capacity: state.capacity,
+        }),
+      }
+    ),
+    { name: 'code-undo-redo-store' }
+  )
+)

apps/sim/stores/undo-redo/index.ts

@@ -1,3 +1,4 @@
+export { useCodeUndoRedoStore } from './code-store'
 export { runWithUndoRedoRecordingSuspended, useUndoRedoStore } from './store'
 export * from './types'
 export * from './utils'