added larger live deployment preview

Author: aadamgough

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

@@ -2,6 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
+import { Maximize2 } from 'lucide-react'
 import {
   Button,
   Label,
@@ -13,6 +14,7 @@ import {
 } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
+import { ExpandedWorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/components'
 import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 import { Versions } from './components'
@@ -49,6 +51,7 @@ export function GeneralDeploy({
   const [previewMode, setPreviewMode] = useState<PreviewMode>('active')
   const [showLoadDialog, setShowLoadDialog] = useState(false)
   const [showPromoteDialog, setShowPromoteDialog] = useState(false)
+  const [showExpandedPreview, setShowExpandedPreview] = useState(false)
   const [versionToLoad, setVersionToLoad] = useState<number | null>(null)
   const [versionToPromote, setVersionToPromote] = useState<number | null>(null)
 
@@ -219,15 +222,25 @@ export function GeneralDeploy({
             }}
           >
             {workflowToShow ? (
-              <WorkflowPreview
-                workflowState={workflowToShow}
-                showSubBlocks={true}
-                height='100%'
-                width='100%'
-                isPannable={true}
-                defaultPosition={{ x: 0, y: 0 }}
-                defaultZoom={0.6}
-              />
+              <>
+                <WorkflowPreview
+                  workflowState={workflowToShow}
+                  showSubBlocks={true}
+                  height='100%'
+                  width='100%'
+                  isPannable={true}
+                  defaultPosition={{ x: 0, y: 0 }}
+                  defaultZoom={0.6}
+                />
+                <button
+                  type='button'
+                  onClick={() => setShowExpandedPreview(true)}
+                  className='absolute top-[8px] right-[8px] z-10 rounded-[4px] bg-[var(--surface-1)] p-[6px] text-[var(--text-secondary)] shadow-sm transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)]'
+                  title='Expand preview'
+                >
+                  <Maximize2 className='h-[14px] w-[14px]' />
+                </button>
+              </>
             ) : (
               <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
                 Deploy your workflow to see a preview
@@ -304,6 +317,19 @@ export function GeneralDeploy({
           </ModalFooter>
         </ModalContent>
       </Modal>
+
+      {workflowToShow && (
+        <ExpandedWorkflowPreview
+          isOpen={showExpandedPreview}
+          onClose={() => setShowExpandedPreview(false)}
+          workflowState={workflowToShow}
+          title={
+            previewMode === 'selected' && selectedVersionInfo
+              ? selectedVersionInfo.name || `v${selectedVersion}`
+              : 'Live Workflow'
+          }
+        />
+      )}
     </>
   )
 }

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

@@ -0,0 +1,76 @@
+'use client'
+
+import { useState } from 'react'
+import { Modal, ModalBody, ModalContent, ModalHeader } from '@/components/emcn'
+import { PinnedSubBlocks } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/components/pinned-sub-blocks'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
+
+interface ExpandedWorkflowPreviewProps {
+  /** Whether the modal is open */
+  isOpen: boolean
+  /** Callback when closing the modal */
+  onClose: () => void
+  /** The workflow state to display */
+  workflowState: WorkflowState
+  /** Title for the modal header */
+  title?: string
+}
+
+/**
+ * Expanded workflow preview modal with clickable blocks.
+ * Shows the workflow preview at full size with a pinned panel
+ * displaying subblock values when a block is clicked.
+ */
+export function ExpandedWorkflowPreview({
+  isOpen,
+  onClose,
+  workflowState,
+  title = 'Workflow Preview',
+}: ExpandedWorkflowPreviewProps) {
+  const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null)
+
+  const selectedBlock = selectedBlockId ? workflowState.blocks?.[selectedBlockId] : null
+
+  const handleNodeClick = (blockId: string) => {
+    // Toggle selection if clicking the same block
+    if (selectedBlockId === blockId) {
+      setSelectedBlockId(null)
+    } else {
+      setSelectedBlockId(blockId)
+    }
+  }
+
+  const handleClose = () => {
+    setSelectedBlockId(null)
+    onClose()
+  }
+
+  const handleClosePanel = () => {
+    setSelectedBlockId(null)
+  }
+
+  return (
+    <Modal open={isOpen} onOpenChange={handleClose}>
+      <ModalContent size='full' className='flex h-[90vh] flex-col'>
+        <ModalHeader>{title}</ModalHeader>
+
+        <ModalBody className='!p-0 relative min-h-0 flex-1'>
+          <div className='h-full w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+            <WorkflowPreview
+              workflowState={workflowState}
+              showSubBlocks={true}
+              isPannable={true}
+              defaultPosition={{ x: 0, y: 0 }}
+              defaultZoom={0.8}
+              onNodeClick={handleNodeClick}
+              cursorStyle='pointer'
+            />
+          </div>
+
+          {selectedBlock && <PinnedSubBlocks block={selectedBlock} onClose={handleClosePanel} />}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}

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

@@ -0,0 +1 @@
+export { ExpandedWorkflowPreview } from './expanded-preview'

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

@@ -0,0 +1,2 @@
+export { ExpandedWorkflowPreview } from './expanded-preview'
+export { PinnedSubBlocks } from './pinned-sub-blocks'

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

@@ -0,0 +1 @@
+export { PinnedSubBlocks } from './pinned-sub-blocks'