added workflow name and desc to metadata for workflow preview

Author: waleedlatif1

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

@@ -133,18 +133,19 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
       const finalWorkflowData = {
         ...workflowData,
         state: {
-          // Default values for expected properties
           deploymentStatuses: {},
-          // Data from normalized tables
           blocks: normalizedData.blocks,
           edges: normalizedData.edges,
           loops: normalizedData.loops,
           parallels: normalizedData.parallels,
           lastSaved: Date.now(),
           isDeployed: workflowData.isDeployed || false,
           deployedAt: workflowData.deployedAt,
+          metadata: {
+            name: workflowData.name,
+            description: workflowData.description,
+          },
         },
-        // Include workflow variables
         variables: workflowData.variables || {},
       }
 
@@ -166,6 +167,10 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         lastSaved: Date.now(),
         isDeployed: workflowData.isDeployed || false,
         deployedAt: workflowData.deployedAt,
+        metadata: {
+          name: workflowData.name,
+          description: workflowData.description,
+        },
       },
       variables: workflowData.variables || {},
     }

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

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ArrowLeft } from 'lucide-react'
-import { Badge, Button, Tooltip } from '@/components/emcn'
+import { Button, Tooltip } from '@/components/emcn'
 import { redactApiKeys } from '@/lib/core/security/redaction'
 import { cn } from '@/lib/core/utils/cn'
 import { PreviewEditor } from '@/app/workspace/[workspaceId]/w/components/preview/components/preview-editor'
@@ -35,7 +35,6 @@ interface WorkflowStackEntry {
   workflowState: WorkflowState
   traceSpans: TraceSpan[]
   blockExecutions: Record<string, BlockExecutionData>
-  /** Name of the workflow at this level for display in the breadcrumb */
   workflowName: string
 }
 
@@ -146,7 +145,6 @@ export function Preview({
   initialSelectedBlockId,
   autoSelectLeftmost = true,
 }: PreviewProps) {
-  /** Initialize pinnedBlockId synchronously to ensure sidebar is present from first render */
   const [pinnedBlockId, setPinnedBlockId] = useState<string | null>(() => {
     if (initialSelectedBlockId) return initialSelectedBlockId
     if (autoSelectLeftmost) {
@@ -155,45 +153,38 @@ export function Preview({
     return null
   })
 
-  /** Stack for nested workflow navigation. Empty means we're at the root level. */
   const [workflowStack, setWorkflowStack] = useState<WorkflowStackEntry[]>([])
 
-  /** Block executions for the root level */
   const rootBlockExecutions = useMemo(() => {
     if (providedBlockExecutions) return providedBlockExecutions
     if (!rootTraceSpans || !Array.isArray(rootTraceSpans)) return {}
     return buildBlockExecutions(rootTraceSpans)
   }, [providedBlockExecutions, rootTraceSpans])
 
-  /** Current block executions - either from stack or root */
   const blockExecutions = useMemo(() => {
     if (workflowStack.length > 0) {
       return workflowStack[workflowStack.length - 1].blockExecutions
     }
     return rootBlockExecutions
   }, [workflowStack, rootBlockExecutions])
 
-  /** Current workflow state - either from stack or root */
   const workflowState = useMemo(() => {
     if (workflowStack.length > 0) {
       return workflowStack[workflowStack.length - 1].workflowState
     }
     return rootWorkflowState
   }, [workflowStack, rootWorkflowState])
 
-  /** Whether we're in execution mode (have trace spans/block executions) */
   const isExecutionMode = useMemo(() => {
     return Object.keys(blockExecutions).length > 0
   }, [blockExecutions])
 
-  /** Handler to drill down into a nested workflow block */
   const handleDrillDown = useCallback(
     (blockId: string, childWorkflowState: WorkflowState) => {
       const blockExecution = blockExecutions[blockId]
       const childTraceSpans = extractChildTraceSpans(blockExecution)
       const childBlockExecutions = buildBlockExecutions(childTraceSpans)
 
-      /** Extract workflow name from metadata or use a fallback */
       const workflowName = childWorkflowState.metadata?.name || 'Nested Workflow'
 
       setWorkflowStack((prev) => [
@@ -206,20 +197,17 @@ export function Preview({
         },
       ])
 
-      /** Set pinned block synchronously to avoid double fitView from sidebar resize */
       const leftmostId = getLeftmostBlockId(childWorkflowState)
       setPinnedBlockId(leftmostId)
     },
     [blockExecutions]
   )
 
-  /** Handler to go back up the stack */
   const handleGoBack = useCallback(() => {
     setWorkflowStack((prev) => prev.slice(0, -1))
     setPinnedBlockId(null)
   }, [])
 
-  /** Handlers for node interactions - memoized to prevent unnecessary re-renders */
   const handleNodeClick = useCallback((blockId: string) => {
     setPinnedBlockId(blockId)
   }, [])
@@ -238,7 +226,6 @@ export function Preview({
 
   const isNested = workflowStack.length > 0
 
-  /** Current workflow name from the top of the stack */
   const currentWorkflowName = isNested ? workflowStack[workflowStack.length - 1].workflowName : null
 
   return (
@@ -251,27 +238,26 @@ export function Preview({
       )}
     >
       {isNested && (
-        <div className='absolute top-[12px] left-[12px] z-20 flex items-center gap-[8px]'>
+        <div className='absolute top-[12px] left-[12px] z-20 flex items-center gap-[6px]'>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
                 variant='ghost'
                 onClick={handleGoBack}
-                className='flex h-[30px] items-center gap-[5px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] hover:bg-[var(--surface-4)]'
+                className='flex h-[28px] items-center gap-[5px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] text-[var(--text-secondary)] shadow-sm hover:bg-[var(--surface-4)] hover:text-[var(--text-primary)]'
               >
-                <ArrowLeft className='h-[13px] w-[13px]' />
-                <span className='font-medium text-[13px]'>Back</span>
+                <ArrowLeft className='h-[12px] w-[12px]' />
+                <span className='font-medium text-[12px]'>Back</span>
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='bottom'>Go back to parent workflow</Tooltip.Content>
           </Tooltip.Root>
           {currentWorkflowName && (
-            <Badge
-              variant='default'
-              className='max-w-[200px] cursor-default truncate bg-[var(--surface-2)] text-[12px] hover:border-[var(--border)] hover:bg-[var(--surface-2)]'
-            >
-              {currentWorkflowName}
-            </Badge>
+            <div className='flex h-[28px] max-w-[200px] items-center rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] shadow-sm'>
+              <span className='truncate font-medium text-[12px] text-[var(--text-secondary)]'>
+                {currentWorkflowName}
+              </span>
+            </div>
           )}
         </div>
       )}