simstudioai
diff --git a/‎apps/docs/content/docs/en/blocks/loop.mdx‎
Lines changed: 42 additions & 8 deletions b/‎apps/docs/content/docs/en/blocks/loop.mdx‎
Lines changed: 42 additions & 8 deletions
diff --git a/‎apps/docs/content/docs/en/blocks/parallel.mdx‎
Lines changed: 45 additions & 11 deletions b/‎apps/docs/content/docs/en/blocks/parallel.mdx‎
Lines changed: 45 additions & 11 deletions
diff --git a/‎apps/sim/app/(landing)/components/footer/components/status-indicator.tsx‎
Lines changed: 1 addition & 1 deletion b/‎apps/sim/app/(landing)/components/footer/components/status-indicator.tsx‎
Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/sim/app/(landing)/components/hero/components/index.ts‎
Lines changed: 2 additions & 2 deletions b/‎apps/sim/app/(landing)/components/hero/components/index.ts‎
Lines changed: 2 additions & 2 deletions
diff --git a/‎apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx‎
Lines changed: 25 additions & 20 deletions b/‎apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx‎
Lines changed: 25 additions & 20 deletions
diff --git a/‎apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-node.tsx‎
Lines changed: 22 additions & 17 deletions b/‎apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-node.tsx‎
Lines changed: 22 additions & 17 deletions
@@ -124,11 +124,44 @@ Choose between four types of loops:
 3. Drag other blocks inside the loop container
 4. Connect the blocks as needed
 
-### Accessing Results
+### Referencing Loop Data
 
-After a loop completes, you can access aggregated results:
+There's an important distinction between referencing loop data from **inside** vs **outside** the loop:
 
-- **`<loop.results>`**: Array of results from all loop iterations
+<Tabs items={['Inside the Loop', 'Outside the Loop']}>
+  <Tab>
+    **Inside the loop**, use `<loop.>` references to access the current iteration context:
+    
+    - **`<loop.index>`**: Current iteration number (0-based)
+    - **`<loop.currentItem>`**: Current item being processed (forEach only)
+    - **`<loop.items>`**: Full collection being iterated (forEach only)
+    
+    ```
+    // Inside a Function block within the loop
+    const idx = <loop.index>;           // 0, 1, 2, ...
+    const item = <loop.currentItem>;    // Current item
+    ```
+    
+    <Callout type="info">
+      These references are only available for blocks **inside** the loop container. They give you access to the current iteration's context.
+    </Callout>
+  </Tab>
+  <Tab>
+    **Outside the loop** (after it completes), reference the loop block by its name to access aggregated results:
+    
+    - **`<LoopBlockName.results>`**: Array of results from all iterations
+    
+    ```
+    // If your loop block is named "Process Items"
+    const allResults = <processitems.results>;
+    // Returns: [result1, result2, result3, ...]
+    ```
+    
+    <Callout type="info">
+      After the loop completes, use the loop's block name (not `loop.`) to access the collected results. The block name is normalized (lowercase, no spaces).
+    </Callout>
+  </Tab>
+</Tabs>
 
 ## Example Use Cases
 
@@ -184,28 +217,29 @@ Variables (i=0) → Loop (While i<10) → Agent (Process) → Variables (i++)
     </ul>
   </Tab>
   <Tab>
+    Available **inside** the loop only:
     <ul className="list-disc space-y-2 pl-6">
       <li>
-        <strong>loop.currentItem</strong>: Current item being processed
+        <strong>{"<loop.index>"}</strong>: Current iteration number (0-based)
       </li>
       <li>
-        <strong>loop.index</strong>: Current iteration number (0-based)
+        <strong>{"<loop.currentItem>"}</strong>: Current item being processed (forEach only)
       </li>
       <li>
-        <strong>loop.items</strong>: Full collection (forEach loops)
+        <strong>{"<loop.items>"}</strong>: Full collection (forEach only)
       </li>
     </ul>
   </Tab>
   <Tab>
     <ul className="list-disc space-y-2 pl-6">
       <li>
-        <strong>loop.results</strong>: Array of all iteration results
+        <strong>{"<blockname.results>"}</strong>: Array of all iteration results (accessed via block name)
       </li>
       <li>
         <strong>Structure</strong>: Results maintain iteration order
       </li>
       <li>
-        <strong>Access</strong>: Available in blocks after the loop
+        <strong>Access</strong>: Available in blocks after the loop completes
       </li>
     </ul>
   </Tab>
 
@@ -76,11 +76,44 @@ Choose between two types of parallel execution:
 3. Drag a single block inside the parallel container
 4. Connect the block as needed
 
-### Accessing Results
+### Referencing Parallel Data
 
-After a parallel block completes, you can access aggregated results:
+There's an important distinction between referencing parallel data from **inside** vs **outside** the parallel block:
 
-- **`<parallel.results>`**: Array of results from all parallel instances
+<Tabs items={['Inside the Parallel', 'Outside the Parallel']}>
+  <Tab>
+    **Inside the parallel**, use `<parallel.>` references to access the current instance context:
+    
+    - **`<parallel.index>`**: Current instance number (0-based)
+    - **`<parallel.currentItem>`**: Item for this instance (collection-based only)
+    - **`<parallel.items>`**: Full collection being distributed (collection-based only)
+    
+    ```
+    // Inside a Function block within the parallel
+    const idx = <parallel.index>;           // 0, 1, 2, ...
+    const item = <parallel.currentItem>;    // This instance's item
+    ```
+    
+    <Callout type="info">
+      These references are only available for blocks **inside** the parallel container. They give you access to the current instance's context.
+    </Callout>
+  </Tab>
+  <Tab>
+    **Outside the parallel** (after it completes), reference the parallel block by its name to access aggregated results:
+    
+    - **`<ParallelBlockName.results>`**: Array of results from all instances
+    
+    ```
+    // If your parallel block is named "Process Tasks"
+    const allResults = <processtasks.results>;
+    // Returns: [result1, result2, result3, ...]
+    ```
+    
+    <Callout type="info">
+      After the parallel completes, use the parallel's block name (not `parallel.`) to access the collected results. The block name is normalized (lowercase, no spaces).
+    </Callout>
+  </Tab>
+</Tabs>
 
 ## Example Use Cases
 
@@ -98,11 +131,11 @@ Parallel (["gpt-4o", "claude-3.7-sonnet", "gemini-2.5-pro"]) → Agent → Evalu
 
 ### Result Aggregation
 
-Results from all parallel instances are automatically collected:
+Results from all parallel instances are automatically collected and accessible via the block name:
 
 ```javascript
-// In a Function block after the parallel
-const allResults = input.parallel.results;
+// In a Function block after a parallel named "Process Tasks"
+const allResults = <processtasks.results>;
 // Returns: [result1, result2, result3, ...]
 ```
 
@@ -158,25 +191,26 @@ Understanding when to use each:
     </ul>
   </Tab>
   <Tab>
+    Available **inside** the parallel only:
     <ul className="list-disc space-y-2 pl-6">
       <li>
-        <strong>parallel.currentItem</strong>: Item for this instance
+        <strong>{"<parallel.index>"}</strong>: Instance number (0-based)
       </li>
       <li>
-        <strong>parallel.index</strong>: Instance number (0-based)
+        <strong>{"<parallel.currentItem>"}</strong>: Item for this instance (collection-based only)
       </li>
       <li>
-        <strong>parallel.items</strong>: Full collection (collection-based)
+        <strong>{"<parallel.items>"}</strong>: Full collection (collection-based only)
       </li>
     </ul>
   </Tab>
   <Tab>
     <ul className="list-disc space-y-2 pl-6">
       <li>
-        <strong>parallel.results</strong>: Array of all instance results
+        <strong>{"<blockname.results>"}</strong>: Array of all instance results (accessed via block name)
       </li>
       <li>
-        <strong>Access</strong>: Available in blocks after the parallel
+        <strong>Access</strong>: Available in blocks after the parallel completes
       </li>
     </ul>
   </Tab>
 
@@ -59,7 +59,7 @@ export default function StatusIndicator() {
       href={statusUrl}
       target='_blank'
       rel='noopener noreferrer'
-      className={`flex items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`}
+      className={`flex min-w-[165px] items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`}
       aria-label={`System status: ${message}`}
     >
       <StatusDotIcon status={status} className='h-[6px] w-[6px]' aria-hidden='true' />
 
@@ -10,8 +10,8 @@ export { LandingLoopNode } from './landing-canvas/landing-block/landing-loop-nod
 export { LandingNode } from './landing-canvas/landing-block/landing-node'
 export type { LoopBlockProps } from './landing-canvas/landing-block/loop-block'
 export { LoopBlock } from './landing-canvas/landing-block/loop-block'
-export type { TagProps } from './landing-canvas/landing-block/tag'
-export { Tag } from './landing-canvas/landing-block/tag'
+export type { SubBlockRowProps, TagProps } from './landing-canvas/landing-block/tag'
+export { SubBlockRow, Tag } from './landing-canvas/landing-block/tag'
 export type {
   LandingBlockNode,
   LandingCanvasProps,
 
@@ -1,12 +1,12 @@
 import React from 'react'
-import { BookIcon } from 'lucide-react'
 import {
-  Tag,
-  type TagProps,
+  SubBlockRow,
+  type SubBlockRowProps,
 } from '@/app/(landing)/components/hero/components/landing-canvas/landing-block/tag'
 
 /**
  * Data structure for a landing card component
+ * Matches the workflow block structure from the application
  */
 export interface LandingCardData {
   /** Icon element to display in the card header */
@@ -15,8 +15,8 @@ export interface LandingCardData {
   color: string | '#f6f6f6'
   /** Name/title of the card */
   name: string
-  /** Optional tags to display at the bottom of the card */
-  tags?: TagProps[]
+  /** Optional subblock rows to display below the header */
+  tags?: SubBlockRowProps[]
 }
 
 /**
@@ -28,7 +28,8 @@ export interface LandingBlockProps extends LandingCardData {
 }
 
 /**
- * Landing block component that displays a card with icon, name, and optional tags
+ * Landing block component that displays a card with icon, name, and optional subblock rows
+ * Styled to match the application's workflow blocks
  * @param props - Component properties including icon, color, name, tags, and className
  * @returns A styled block card component
  */
@@ -39,33 +40,37 @@ export const LandingBlock = React.memo(function LandingBlock({
   tags,
   className,
 }: LandingBlockProps) {
+  const hasContentBelowHeader = tags && tags.length > 0
+
   return (
     <div
-      className={`z-10 flex w-64 flex-col items-start gap-3 rounded-[14px] border border-[#E5E5E5] bg-[#FEFEFE] p-3 ${className ?? ''}`}
-      style={{
-        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      }}
+      className={`z-10 flex w-[250px] flex-col rounded-[8px] border border-[#E5E5E5] bg-white ${className ?? ''}`}
     >
-      <div className='flex w-full items-center justify-between'>
-        <div className='flex items-center gap-2.5'>
+      {/* Header - matches workflow-block.tsx header styling */}
+      <div
+        className={`flex items-center justify-between p-[8px] ${hasContentBelowHeader ? 'border-[#E5E5E5] border-b' : ''}`}
+      >
+        <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
           <div
-            className='flex h-6 w-6 items-center justify-center rounded-[8px] text-white'
-            style={{ backgroundColor: color as string }}
+            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+            style={{ background: color as string }}
           >
             {icon}
           </div>
-          <p className='text-base text-card-foreground'>{name}</p>
+          <span className='truncate font-medium text-[#171717] text-[16px]' title={name}>
+            {name}
+          </span>
         </div>
-        <BookIcon className='h-4 w-4 text-muted-foreground' />
       </div>
 
-      {tags && tags.length > 0 ? (
-        <div className='flex flex-wrap gap-2'>
+      {/* Content - SubBlock Rows matching workflow-block.tsx */}
+      {hasContentBelowHeader && (
+        <div className='flex flex-col gap-[8px] p-[8px]'>
           {tags.map((tag) => (
-            <Tag key={tag.label} icon={tag.icon} label={tag.label} />
+            <SubBlockRow key={tag.label} icon={tag.icon} label={tag.label} />
           ))}
         </div>
-      ) : null}
+      )}
     </div>
   )
 })
@@ -7,9 +7,14 @@ import {
   type LandingCardData,
 } from '@/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block'
 
+/**
+ * Handle Y offset from block top - matches HANDLE_POSITIONS.DEFAULT_Y_OFFSET
+ */
+const HANDLE_Y_OFFSET = 20
+
 /**
  * React Flow node component for the landing canvas
- * Includes CSS animations and connection handles
+ * Styled to match the application's workflow blocks
  * @param props - Component properties containing node data
  * @returns A React Flow compatible node component
  */
@@ -41,15 +46,15 @@ export const LandingNode = React.memo(function LandingNode({ data }: { data: Lan
           type='target'
           position={Position.Left}
           style={{
-            width: '12px',
-            height: '12px',
-            background: '#FEFEFE',
-            border: '1px solid #E5E5E5',
-            borderRadius: '50%',
-            top: '50%',
-            left: '-20px',
+            width: '7px',
+            height: '20px',
+            background: '#D1D1D1',
+            border: 'none',
+            borderRadius: '2px 0 0 2px',
+            top: `${HANDLE_Y_OFFSET}px`,
+            left: '-7px',
             transform: 'translateY(-50%)',
-            zIndex: 2,
+            zIndex: 10,
           }}
           isConnectable={false}
         />
@@ -59,15 +64,15 @@ export const LandingNode = React.memo(function LandingNode({ data }: { data: Lan
           type='source'
           position={Position.Right}
           style={{
-            width: '12px',
-            height: '12px',
-            background: '#FEFEFE',
-            border: '1px solid #E5E5E5',
-            borderRadius: '50%',
-            top: '50%',
-            right: '-20px',
+            width: '7px',
+            height: '20px',
+            background: '#D1D1D1',
+            border: 'none',
+            borderRadius: '0 2px 2px 0',
+            top: `${HANDLE_Y_OFFSET}px`,
+            right: '-7px',
             transform: 'translateY(-50%)',
-            zIndex: 2,
+            zIndex: 10,
           }}
           isConnectable={false}
         />
Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ export default function StatusIndicator() {`
`59`	`59`	`href={statusUrl}`
`60`	`60`	`target='_blank'`
`61`	`61`	`rel='noopener noreferrer'`
`62`		- className={`flex items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`}
	`62`	+ className={`flex min-w-[165px] items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`}
`63`	`63`	aria-label={`System status: ${message}`}
`64`	`64`	`>`
`65`	`65`	`<StatusDotIcon status={status} className='h-[6px] w-[6px]' aria-hidden='true' />`