@swarmclawai/swarmclaw 1.3.6 → 1.4.0

package/src/components/auth/access-key-gate.tsx

@@ -9,6 +9,11 @@ interface AccessKeyGateProps {
 }
 
 const AUTH_CHECK_TIMEOUT_MS = 8_000
+const NETWORK_LINKS = [
+  { href: 'https://www.swarmdock.ai', label: 'SwarmDock' },
+  { href: 'https://swarmrecall.ai', label: 'SwarmRecall' },
+  { href: 'https://swarmrelay.ai', label: 'SwarmRelay' },
+]
 
 function isExpectedAuthCheckError(err: unknown): boolean {
   return isAbortError(err) || isTimeoutError(err)
@@ -421,6 +426,26 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
             </form>
           </>
         )}
+
+        <div className="mt-10 border-t border-white/[0.06] pt-5" style={{ animation: 'fade-up 0.6s var(--ease-spring) 0.35s both' }}>
+          <p className="text-[10px] font-700 uppercase tracking-[0.18em] text-text-3/55">
+            Network
+          </p>
+          <div className="mt-3 flex flex-wrap items-center justify-center gap-2.5">
+            {NETWORK_LINKS.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-[12px] text-text-3
+                  no-underline transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-text"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+        </div>
       </div>
     </div>
   )

package/src/components/layout/sidebar-rail.tsx

@@ -16,6 +16,11 @@ import type { AppView } from '@/types'
 
 const RAIL_EXPANDED_KEY = 'sc_rail_expanded'
 const GITHUB_REPO_URL = 'https://github.com/swarmclawai/swarmclaw'
+const NETWORK_LINKS = [
+  { href: 'https://www.swarmdock.ai', label: 'SwarmDock', abbr: 'DO' },
+  { href: 'https://swarmrecall.ai', label: 'SwarmRecall', abbr: 'RE' },
+  { href: 'https://swarmrelay.ai', label: 'SwarmRelay', abbr: 'RL' },
+]
 
 export function SidebarRail({
   onSwitchUser,
@@ -257,6 +262,11 @@ export function SidebarRail({
                 <path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7-7H4a2 2 0 0 0-2 2v17Z" /><path d="M14 2v7h7" />
               </svg>
             </NavItem>
+            <NavItem view="swarmfeed" label="Feed" expanded={railExpanded} isActive={isNavActive('swarmfeed')} onClick={() => handleNavClick('swarmfeed')}>
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M4 11a9 9 0 0 1 9 9" /><path d="M4 4a16 16 0 0 1 16 16" /><circle cx="5" cy="19" r="1" />
+              </svg>
+            </NavItem>
           </div>
 
           <div className={`flex flex-col gap-0.5 ${railExpanded ? '' : 'items-center'}`}>
@@ -378,6 +388,48 @@ export function SidebarRail({
 
         {/* Bottom: Docs + Daemon + Settings + User */}
         <div className={`flex flex-col gap-1 ${railExpanded ? 'px-3' : 'items-center'}`}>
+          {railExpanded ? (
+            <div className="mb-1">
+              <div className="px-3 pb-1 text-[10px] font-700 uppercase tracking-[0.12em] text-text-3/45">Network</div>
+              <div className="flex flex-col gap-1">
+                {NETWORK_LINKS.map((link) => (
+                  <a
+                    key={link.href}
+                    href={link.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="w-full flex items-center gap-2.5 px-3 py-2 rounded-[10px] text-[13px] font-500 cursor-pointer transition-all
+                      bg-transparent text-text-3 hover:text-text hover:bg-white/[0.04] no-underline"
+                    style={{ fontFamily: 'inherit' }}
+                  >
+                    <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-[6px] border border-white/[0.08] bg-white/[0.03] text-[10px] font-700 uppercase tracking-[0.08em] text-text-3/80">
+                      {link.abbr}
+                    </span>
+                    {link.label}
+                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="ml-auto opacity-40">
+                      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /><polyline points="15 3 21 3 21 9" /><line x1="10" y1="14" x2="21" y2="3" />
+                    </svg>
+                  </a>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className="my-1 h-px w-6 bg-white/[0.06]" />
+              {NETWORK_LINKS.map((link) => (
+                <RailTooltip key={link.href} label={link.label} description="Open product site in a new tab">
+                  <a
+                    href={link.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="rail-btn text-[10px] font-700 uppercase tracking-[0.08em] no-underline"
+                  >
+                    {link.abbr}
+                  </a>
+                </RailTooltip>
+              ))}
+            </>
+          )}
           {railExpanded ? (
             <a
               href="https://swarmclaw.ai/docs"

package/src/components/protocols/builder/edge-editor.tsx

@@ -0,0 +1,43 @@
+import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog'
+import { useProtocolBuilderStore } from '@/features/protocols/builder/protocol-builder-store'
+
+interface EdgeEditorProps {
+  edgeId: string | null
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function EdgeEditor({ edgeId, isOpen, onClose }: EdgeEditorProps) {
+  const edges = useProtocolBuilderStore((s) => s.edges)
+  const updateEdgeData = useProtocolBuilderStore((s) => s.updateEdgeData)
+
+  if (!edgeId) return null
+  const edge = edges.find((e) => e.id === edgeId)
+  if (!edge) return null
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogTitle>Edit Edge</DialogTitle>
+        <div className="space-y-4">
+          <div>
+            <label className="text-sm font-semibold">Label</label>
+            <input
+              type="text"
+              value={edge.data?.label || ''}
+              onChange={(e) => updateEdgeData(edgeId, { label: e.target.value || null })}
+              className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+              placeholder="e.g., 'Yes', 'If unanimous'"
+            />
+          </div>
+          <div>
+            <label className="text-sm font-semibold">Type</label>
+            <div className="mt-1 rounded-md bg-muted px-2 py-1 text-sm capitalize">
+              {edge.data?.edgeType || 'default'}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/protocols/builder/edge-types/branch-edge.tsx

@@ -0,0 +1,33 @@
+import { BaseEdge, getBezierPath, type EdgeProps, type Edge } from '@xyflow/react'
+import type { BuilderEdgeData } from '@/features/protocols/builder/protocol-builder-store'
+
+export function BranchEdge(props: EdgeProps<Edge<BuilderEdgeData>>) {
+  const { sourceX, sourceY, targetX, targetY, markerEnd, selected, data } = props
+  const [edgePath, labelX, labelY] = getBezierPath({ sourceX, sourceY, targetX, targetY })
+
+  return (
+    <>
+      <BaseEdge
+        path={edgePath}
+        markerEnd={markerEnd}
+        style={{
+          stroke: selected ? '#f59e0b' : '#d97706',
+          strokeWidth: selected ? 3 : 2,
+        }}
+      />
+      {data?.label && (
+        <foreignObject
+          x={labelX - 30}
+          y={labelY - 10}
+          width={60}
+          height={20}
+          className="pointer-events-none"
+        >
+          <div className="rounded border border-amber-500/30 bg-background px-1 py-0.5 text-center text-[10px] font-semibold text-amber-600">
+            {data.label}
+          </div>
+        </foreignObject>
+      )}
+    </>
+  )
+}

package/src/components/protocols/builder/edge-types/default-edge.tsx

@@ -0,0 +1,18 @@
+import { BaseEdge, getBezierPath, type EdgeProps, type Edge } from '@xyflow/react'
+import type { BuilderEdgeData } from '@/features/protocols/builder/protocol-builder-store'
+
+export function DefaultEdge(props: EdgeProps<Edge<BuilderEdgeData>>) {
+  const { sourceX, sourceY, targetX, targetY, markerEnd, selected } = props
+  const [edgePath] = getBezierPath({ sourceX, sourceY, targetX, targetY })
+
+  return (
+    <BaseEdge
+      path={edgePath}
+      markerEnd={markerEnd}
+      style={{
+        stroke: selected ? '#3b82f6' : '#64748b',
+        strokeWidth: selected ? 3 : 2,
+      }}
+    />
+  )
+}

package/src/components/protocols/builder/edge-types/index.ts

@@ -0,0 +1,3 @@
+export { DefaultEdge } from './default-edge'
+export { BranchEdge } from './branch-edge'
+export { LoopEdge } from './loop-edge'

package/src/components/protocols/builder/edge-types/loop-edge.tsx

@@ -0,0 +1,19 @@
+import { BaseEdge, getBezierPath, type EdgeProps, type Edge } from '@xyflow/react'
+import type { BuilderEdgeData } from '@/features/protocols/builder/protocol-builder-store'
+
+export function LoopEdge(props: EdgeProps<Edge<BuilderEdgeData>>) {
+  const { sourceX, sourceY, targetX, targetY, markerEnd, selected } = props
+  const [edgePath] = getBezierPath({ sourceX, sourceY, targetX, targetY })
+
+  return (
+    <BaseEdge
+      path={edgePath}
+      markerEnd={markerEnd}
+      style={{
+        stroke: selected ? '#06b6d4' : '#0d9488',
+        strokeWidth: selected ? 3 : 2,
+        strokeDasharray: '5,5',
+      }}
+    />
+  )
+}

package/src/components/protocols/builder/node-inspector.tsx

@@ -0,0 +1,227 @@
+import { useProtocolBuilderStore } from '@/features/protocols/builder/protocol-builder-store'
+import { HintTip } from '@/components/shared/hint-tip'
+
+const PHASE_KINDS = new Set([
+  'present', 'collect_independent_inputs', 'round_robin',
+  'compare', 'decide', 'summarize', 'emit_tasks',
+  'dispatch_task', 'dispatch_delegation', 'wait',
+])
+
+export function NodeInspector() {
+  const selectedNodeId = useProtocolBuilderStore((s) => s.selectedNodeId)
+  const nodes = useProtocolBuilderStore((s) => s.nodes)
+  const updateNodeData = useProtocolBuilderStore((s) => s.updateNodeData)
+  const pushUndo = useProtocolBuilderStore((s) => s.pushUndo)
+
+  const node = selectedNodeId ? nodes.find((n) => n.id === selectedNodeId) : null
+
+  if (!node) {
+    return (
+      <div className="rounded-lg border bg-card p-4 text-sm text-muted-foreground">
+        Select a node to edit properties
+      </div>
+    )
+  }
+
+  const { kind } = node.data
+
+  const update = (data: Parameters<typeof updateNodeData>[1]) => {
+    pushUndo()
+    updateNodeData(node.id, data)
+  }
+
+  return (
+    <div className="max-h-[480px] overflow-y-auto rounded-lg border bg-card p-4 shadow-sm">
+      <h3 className="mb-3 text-sm font-bold">Node Properties</h3>
+
+      {/* Label */}
+      <div className="mb-3">
+        <label className="text-xs font-semibold text-muted-foreground">Label</label>
+        <input
+          type="text"
+          value={node.data.label || ''}
+          onChange={(e) => update({ label: e.target.value })}
+          className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+        />
+      </div>
+
+      {/* Kind (read-only) */}
+      <div className="mb-3">
+        <label className="text-xs font-semibold text-muted-foreground">Kind</label>
+        <div className="mt-1 rounded-md bg-muted px-2 py-1 text-sm capitalize">
+          {kind.replace(/_/g, ' ')}
+        </div>
+      </div>
+
+      {/* Instructions (phases + actions) */}
+      {PHASE_KINDS.has(kind) && (
+        <div className="mb-3">
+          <div className="mb-1 flex items-center gap-1">
+            <label className="text-xs font-semibold text-muted-foreground">Instructions</label>
+            <HintTip text="Guidance for participants or the system during this step" />
+          </div>
+          <textarea
+            value={node.data.instructions || ''}
+            onChange={(e) => update({ instructions: e.target.value || null })}
+            className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+            rows={3}
+            placeholder="e.g., 'Present your analysis...'"
+          />
+        </div>
+      )}
+
+      {/* Turn Limit */}
+      {PHASE_KINDS.has(kind) && kind !== 'wait' && (
+        <div className="mb-3">
+          <label className="text-xs font-semibold text-muted-foreground">Max Turns</label>
+          <input
+            type="number"
+            value={node.data.turnLimit ?? ''}
+            onChange={(e) => update({ turnLimit: e.target.value ? parseInt(e.target.value) : null })}
+            className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+            placeholder="Optional"
+            min={1}
+          />
+        </div>
+      )}
+
+      {/* Completion Criteria */}
+      {['present', 'collect_independent_inputs', 'decide', 'summarize'].includes(kind) && (
+        <div className="mb-3">
+          <label className="text-xs font-semibold text-muted-foreground">Completion Criteria</label>
+          <textarea
+            value={node.data.completionCriteria || ''}
+            onChange={(e) => update({ completionCriteria: e.target.value || null })}
+            className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+            rows={2}
+            placeholder="e.g., 'All agents have provided input'"
+          />
+        </div>
+      )}
+
+      {/* Task Config (dispatch_task) */}
+      {kind === 'dispatch_task' && (
+        <>
+          <div className="mb-3">
+            <label className="text-xs font-semibold text-muted-foreground">Task Title</label>
+            <input
+              type="text"
+              value={node.data.taskConfig?.title || ''}
+              onChange={(e) =>
+                update({
+                  taskConfig: {
+                    title: e.target.value,
+                    description: node.data.taskConfig?.description || '',
+                    agentId: node.data.taskConfig?.agentId,
+                  },
+                })
+              }
+              className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+            />
+          </div>
+          <div className="mb-3">
+            <label className="text-xs font-semibold text-muted-foreground">Task Description</label>
+            <textarea
+              value={node.data.taskConfig?.description || ''}
+              onChange={(e) =>
+                update({
+                  taskConfig: {
+                    title: node.data.taskConfig?.title || '',
+                    description: e.target.value,
+                    agentId: node.data.taskConfig?.agentId,
+                  },
+                })
+              }
+              className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+              rows={2}
+            />
+          </div>
+        </>
+      )}
+
+      {/* Delegation Config (dispatch_delegation) */}
+      {kind === 'dispatch_delegation' && (
+        <>
+          <div className="mb-3">
+            <label className="text-xs font-semibold text-muted-foreground">Delegate to Agent</label>
+            <input
+              type="text"
+              value={node.data.delegationConfig?.agentId || ''}
+              onChange={(e) =>
+                update({
+                  delegationConfig: {
+                    agentId: e.target.value,
+                    message: node.data.delegationConfig?.message || '',
+                  },
+                })
+              }
+              placeholder="Agent ID"
+              className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+            />
+          </div>
+          <div className="mb-3">
+            <label className="text-xs font-semibold text-muted-foreground">Message</label>
+            <textarea
+              value={node.data.delegationConfig?.message || ''}
+              onChange={(e) =>
+                update({
+                  delegationConfig: {
+                    agentId: node.data.delegationConfig?.agentId || '',
+                    message: e.target.value,
+                  },
+                })
+              }
+              className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+              rows={2}
+            />
+          </div>
+        </>
+      )}
+
+      {/* Repeat Config */}
+      {kind === 'repeat' && (
+        <div className="mb-3">
+          <label className="text-xs font-semibold text-muted-foreground">Max Iterations</label>
+          <input
+            type="number"
+            value={node.data.repeat?.maxIterations ?? ''}
+            onChange={(e) =>
+              update({
+                repeat: {
+                  bodyStepId: node.data.repeat?.bodyStepId || '',
+                  maxIterations: parseInt(e.target.value) || 1,
+                  exitCondition: node.data.repeat?.exitCondition,
+                  onExhausted: node.data.repeat?.onExhausted,
+                },
+              })
+            }
+            className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+            min={1}
+          />
+        </div>
+      )}
+
+      {/* Branch Cases (summary) */}
+      {kind === 'branch' && (
+        <div className="mb-3">
+          <label className="text-xs font-semibold text-muted-foreground">Branch Cases</label>
+          <div className="mt-1 text-xs text-muted-foreground">
+            {node.data.branchCases?.length || 0} case(s) defined
+          </div>
+        </div>
+      )}
+
+      {/* Output Key */}
+      <div className="mb-3">
+        <label className="text-xs font-semibold text-muted-foreground">Output Key</label>
+        <input
+          type="text"
+          value={node.data.outputKey || ''}
+          onChange={(e) => update({ outputKey: e.target.value || null })}
+          className="mt-1 w-full rounded-md border bg-background px-2 py-1 text-sm"
+          placeholder="Optional key for step output"
+        />
+      </div>
+    </div>
+  )
+}

package/src/components/protocols/builder/node-palette.tsx

@@ -0,0 +1,97 @@
+import { useState, type DragEvent } from 'react'
+import { cn } from '@/lib/utils'
+import type { ProtocolStepKind } from '@/types'
+
+interface PaletteCategory {
+  label: string
+  items: Array<{ kind: ProtocolStepKind; label: string; description: string }>
+}
+
+const CATEGORIES: PaletteCategory[] = [
+  {
+    label: 'Phases',
+    items: [
+      { kind: 'present', label: 'Present', description: 'Show info to participants' },
+      { kind: 'collect_independent_inputs', label: 'Collect Inputs', description: 'Gather independent responses' },
+      { kind: 'round_robin', label: 'Round Robin', description: 'Turn-based discussion' },
+      { kind: 'compare', label: 'Compare', description: 'Compare agent outputs' },
+      { kind: 'decide', label: 'Decide', description: 'Make a decision' },
+      { kind: 'summarize', label: 'Summarize', description: 'Synthesize results' },
+    ],
+  },
+  {
+    label: 'Actions',
+    items: [
+      { kind: 'emit_tasks', label: 'Emit Tasks', description: 'Create tasks from context' },
+      { kind: 'dispatch_task', label: 'Dispatch Task', description: 'Assign a specific task' },
+      { kind: 'dispatch_delegation', label: 'Delegate', description: 'Delegate to an agent' },
+    ],
+  },
+  {
+    label: 'Control Flow',
+    items: [
+      { kind: 'branch', label: 'Branch', description: 'Conditional path' },
+      { kind: 'repeat', label: 'Repeat', description: 'Loop with exit condition' },
+      { kind: 'parallel', label: 'Parallel', description: 'Fork into parallel branches' },
+      { kind: 'join', label: 'Join', description: 'Merge parallel branches' },
+      { kind: 'for_each', label: 'For Each', description: 'Iterate over items' },
+    ],
+  },
+  {
+    label: 'Advanced',
+    items: [
+      { kind: 'subflow', label: 'Subflow', description: 'Nested protocol template' },
+      { kind: 'swarm_claim', label: 'Swarm Claim', description: 'Competitive task claiming' },
+      { kind: 'wait', label: 'Wait', description: 'Pause until external input' },
+      { kind: 'complete', label: 'Complete', description: 'End the protocol' },
+    ],
+  },
+]
+
+export function NodePalette() {
+  const [expandedCategory, setExpandedCategory] = useState<string | null>('Phases')
+
+  const onDragStart = (e: DragEvent, kind: ProtocolStepKind, label: string) => {
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('application/x-protocol-node-kind', kind)
+    e.dataTransfer.setData('application/x-protocol-node-label', label)
+  }
+
+  return (
+    <div className="flex w-52 flex-col overflow-y-auto rounded-lg border bg-card p-3 shadow-sm">
+      <h3 className="mb-3 text-xs font-bold uppercase tracking-wider text-muted-foreground">
+        Drag to canvas
+      </h3>
+
+      {CATEGORIES.map((cat) => (
+        <div key={cat.label} className="mb-2">
+          <button
+            onClick={() => setExpandedCategory(expandedCategory === cat.label ? null : cat.label)}
+            className="mb-1 flex w-full items-center gap-1 text-xs font-semibold text-muted-foreground hover:text-foreground"
+          >
+            <span className="text-[10px]">{expandedCategory === cat.label ? '\u25BC' : '\u25B6'}</span>
+            {cat.label}
+          </button>
+          {expandedCategory === cat.label && (
+            <div className="space-y-1">
+              {cat.items.map(({ kind, label, description }) => (
+                <div
+                  key={kind}
+                  draggable
+                  onDragStart={(e) => onDragStart(e, kind, label)}
+                  className={cn(
+                    'cursor-grab rounded-md border bg-background px-3 py-2 text-sm',
+                    'transition-shadow hover:shadow-md active:cursor-grabbing',
+                  )}
+                  title={description}
+                >
+                  {label}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/protocols/builder/node-types/branch-node.tsx

@@ -0,0 +1,34 @@
+import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
+import { cn } from '@/lib/utils'
+import type { BuilderNodeData } from '@/features/protocols/builder/protocol-builder-store'
+
+export function BranchNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  const cases = data.branchCases || []
+
+  return (
+    <div className={cn('relative', selected && 'ring-2 ring-blue-500 rounded')}>
+      <Handle type="target" position={Position.Top} />
+      <svg width="120" height="100" viewBox="0 0 120 100">
+        <polygon
+          points="60,5 115,50 60,95 5,50"
+          className="fill-amber-500/10 stroke-amber-500/40"
+          strokeWidth="2"
+        />
+      </svg>
+      <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
+        <div className="text-xs font-semibold text-center px-4">{data.label}</div>
+        <div className="text-[10px] text-muted-foreground">{cases.length} case(s)</div>
+      </div>
+      {cases.map((bc, idx) => (
+        <Handle
+          key={bc.id}
+          type="source"
+          position={Position.Right}
+          id={bc.id}
+          style={{ top: `${25 + idx * (50 / Math.max(cases.length, 1))}%` }}
+        />
+      ))}
+      <Handle type="source" position={Position.Bottom} id="default" />
+    </div>
+  )
+}

package/src/components/protocols/builder/node-types/complete-node.tsx

@@ -0,0 +1,17 @@
+import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
+import { cn } from '@/lib/utils'
+import type { BuilderNodeData } from '@/features/protocols/builder/protocol-builder-store'
+
+export function CompleteNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  return (
+    <div
+      className={cn(
+        'rounded-full border-2 border-emerald-500/40 bg-emerald-500/10 px-4 py-3 shadow-sm',
+        selected && 'ring-2 ring-blue-500',
+      )}
+    >
+      <Handle type="target" position={Position.Top} />
+      <div className="text-sm font-semibold text-center">{data.label || 'Complete'}</div>
+    </div>
+  )
+}

package/src/components/protocols/builder/node-types/for-each-node.tsx

@@ -0,0 +1,21 @@
+import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
+import { cn } from '@/lib/utils'
+import type { BuilderNodeData } from '@/features/protocols/builder/protocol-builder-store'
+
+export function ForEachNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border-2 border-sky-500/40 bg-sky-500/10 px-4 py-3 shadow-sm min-w-[140px]',
+        selected && 'ring-2 ring-blue-500',
+      )}
+    >
+      <Handle type="target" position={Position.Top} />
+      <div className="text-sm font-semibold">{data.label}</div>
+      <div className="mt-1 text-xs text-muted-foreground">
+        For each: {data.forEach?.itemAlias || 'item'}
+      </div>
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  )
+}

package/src/components/protocols/builder/node-types/index.ts

@@ -0,0 +1,9 @@
+export { PhaseNode } from './phase-node'
+export { BranchNode } from './branch-node'
+export { LoopNode } from './loop-node'
+export { ParallelNode } from './parallel-node'
+export { JoinNode } from './join-node'
+export { ForEachNode } from './for-each-node'
+export { SubflowNode } from './subflow-node'
+export { SwarmNode } from './swarm-node'
+export { CompleteNode } from './complete-node'

package/src/components/protocols/builder/node-types/join-node.tsx

@@ -0,0 +1,18 @@
+import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
+import { cn } from '@/lib/utils'
+import type { BuilderNodeData } from '@/features/protocols/builder/protocol-builder-store'
+
+export function JoinNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  return (
+    <div
+      className={cn(
+        'rounded-full border-2 border-pink-500/40 bg-pink-500/10 px-4 py-2 shadow-sm',
+        selected && 'ring-2 ring-blue-500',
+      )}
+    >
+      <Handle type="target" position={Position.Top} />
+      <div className="text-xs font-semibold text-center">{data.label || 'Join'}</div>
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  )
+}