@swarmclawai/swarmclaw 1.3.6 → 1.4.0

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

@@ -0,0 +1,22 @@
+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 LoopNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border-2 border-teal-500/40 bg-teal-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">
+        Max: {data.repeat?.maxIterations || '?'} iterations
+      </div>
+      <Handle type="source" position={Position.Bottom} />
+      <Handle type="source" position={Position.Left} id="loop-back" />
+    </div>
+  )
+}

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

@@ -0,0 +1,31 @@
+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 ParallelNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  const branchCount = data.parallel?.branches.length || 1
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border-2 border-pink-500/40 bg-pink-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">
+        {branchCount} parallel {branchCount === 1 ? 'branch' : 'branches'}
+      </div>
+      {Array.from({ length: branchCount }).map((_, i) => (
+        <Handle
+          key={i}
+          type="source"
+          position={Position.Bottom}
+          id={`branch-${i}`}
+          style={{ left: `${((i + 1) / (branchCount + 1)) * 100}%` }}
+        />
+      ))}
+    </div>
+  )
+}

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

@@ -0,0 +1,52 @@
+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'
+
+const KIND_STYLES: Record<string, string> = {
+  present: 'border-blue-500/40 bg-blue-500/10',
+  collect_independent_inputs: 'border-cyan-500/40 bg-cyan-500/10',
+  round_robin: 'border-indigo-500/40 bg-indigo-500/10',
+  compare: 'border-yellow-500/40 bg-yellow-500/10',
+  decide: 'border-orange-500/40 bg-orange-500/10',
+  summarize: 'border-purple-500/40 bg-purple-500/10',
+  emit_tasks: 'border-green-500/40 bg-green-500/10',
+  wait: 'border-zinc-500/40 bg-zinc-500/10',
+  dispatch_task: 'border-lime-500/40 bg-lime-500/10',
+  dispatch_delegation: 'border-rose-500/40 bg-rose-500/10',
+}
+
+const RUNTIME_RING: Record<string, string> = {
+  completed: 'ring-2 ring-emerald-500 opacity-60',
+  running: 'ring-2 ring-blue-500 animate-pulse',
+  failed: 'ring-2 ring-red-500',
+  pending: 'opacity-40',
+  ready: 'ring-2 ring-amber-400',
+}
+
+export function PhaseNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  const style = KIND_STYLES[data.kind] || KIND_STYLES.present
+  const runtimeRing = data.runtimeStatus ? RUNTIME_RING[data.runtimeStatus] : ''
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border-2 px-4 py-3 shadow-sm min-w-[140px]',
+        style,
+        runtimeRing,
+        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 capitalize">
+        {data.kind.replace(/_/g, ' ')}
+      </div>
+      {data.turnLimit && (
+        <div className="mt-1 text-xs text-muted-foreground">
+          Turns: {data.turnLimit}
+        </div>
+      )}
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  )
+}

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

@@ -0,0 +1,23 @@
+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 SubflowNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border-2 border-violet-500/40 bg-violet-500/10 px-4 py-3 shadow-md min-w-[140px]',
+        selected && 'ring-2 ring-blue-500',
+      )}
+    >
+      <Handle type="target" position={Position.Top} />
+      <div className="text-sm font-semibold">{data.label}</div>
+      {data.subflow?.templateId && (
+        <div className="mt-1 text-xs text-muted-foreground truncate max-w-[130px]">
+          Template: {data.subflow.templateId}
+        </div>
+      )}
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  )
+}

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

@@ -0,0 +1,26 @@
+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 SwarmNode({ data, selected }: NodeProps<Node<BuilderNodeData>>) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border-2 border-green-500/40 bg-green-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">
+        {data.swarm?.eligibleAgentIds.length || 0} agents
+      </div>
+      {data.swarm?.claimLimitPerAgent && (
+        <div className="text-xs text-muted-foreground">
+          Limit: {data.swarm.claimLimitPerAgent}/agent
+        </div>
+      )}
+      <Handle type="source" position={Position.Bottom} />
+    </div>
+  )
+}

package/src/components/protocols/builder/protocol-builder-canvas.tsx

@@ -0,0 +1,184 @@
+'use client'
+
+import { useCallback, useMemo, type DragEvent } from 'react'
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  applyNodeChanges,
+  applyEdgeChanges,
+  type Connection,
+  type NodeChange,
+  type EdgeChange,
+  type Node,
+} from '@xyflow/react'
+import '@xyflow/react/dist/style.css'
+import { useProtocolBuilderStore, type BuilderNodeData } from '@/features/protocols/builder/protocol-builder-store'
+import { getNodeTypeForKind } from '@/features/protocols/builder/utils/template-to-nodes'
+import { PhaseNode, BranchNode, LoopNode, ParallelNode, JoinNode, ForEachNode, SubflowNode, SwarmNode, CompleteNode } from './node-types'
+import { DefaultEdge, BranchEdge, LoopEdge } from './edge-types'
+import { NodePalette } from './node-palette'
+import { NodeInspector } from './node-inspector'
+import { ValidationPanel } from './validation-panel'
+import type { ProtocolStepKind } from '@/types'
+
+const nodeTypes = {
+  phase: PhaseNode,
+  branch: BranchNode,
+  loop: LoopNode,
+  parallel: ParallelNode,
+  join: JoinNode,
+  forEach: ForEachNode,
+  subflow: SubflowNode,
+  swarm: SwarmNode,
+  complete: CompleteNode,
+}
+
+const edgeTypes = {
+  default: DefaultEdge,
+  branch: BranchEdge,
+  loop: LoopEdge,
+}
+
+export function ProtocolBuilderCanvas() {
+  const nodes = useProtocolBuilderStore((s) => s.nodes)
+  const edges = useProtocolBuilderStore((s) => s.edges)
+  const setNodes = useProtocolBuilderStore((s) => s.setNodes)
+  const setEdges = useProtocolBuilderStore((s) => s.setEdges)
+  const selectNode = useProtocolBuilderStore((s) => s.selectNode)
+  const selectEdge = useProtocolBuilderStore((s) => s.selectEdge)
+  const addNode = useProtocolBuilderStore((s) => s.addNode)
+  const addEdge = useProtocolBuilderStore((s) => s.addEdge)
+  const pushUndo = useProtocolBuilderStore((s) => s.pushUndo)
+  const isDirty = useProtocolBuilderStore((s) => s.isDirty)
+  const undo = useProtocolBuilderStore((s) => s.undo)
+  const redo = useProtocolBuilderStore((s) => s.redo)
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange<Node<BuilderNodeData>>[]) => {
+      setNodes(applyNodeChanges(changes, nodes))
+    },
+    [nodes, setNodes],
+  )
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      setEdges(applyEdgeChanges(changes, edges) as typeof edges)
+    },
+    [edges, setEdges],
+  )
+
+  const onConnect = useCallback(
+    (connection: Connection) => {
+      pushUndo()
+      addEdge({
+        id: `${connection.source}--${connection.target}--${Date.now()}`,
+        source: connection.source!,
+        target: connection.target!,
+        sourceHandle: connection.sourceHandle,
+        targetHandle: connection.targetHandle,
+        type: 'default',
+        data: { edgeType: 'default' },
+      })
+    },
+    [addEdge, pushUndo],
+  )
+
+  const onNodeClick = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      selectNode(node.id)
+    },
+    [selectNode],
+  )
+
+  const onEdgeClick = useCallback(
+    (_event: React.MouseEvent, edge: { id: string }) => {
+      selectEdge(edge.id)
+    },
+    [selectEdge],
+  )
+
+  const onPaneClick = useCallback(() => {
+    selectNode(null)
+    selectEdge(null)
+  }, [selectNode, selectEdge])
+
+  const onDragOver = useCallback((e: DragEvent) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+  }, [])
+
+  const onDrop = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault()
+      const kind = e.dataTransfer.getData('application/x-protocol-node-kind') as ProtocolStepKind
+      const label = e.dataTransfer.getData('application/x-protocol-node-label')
+      if (!kind) return
+
+      pushUndo()
+
+      const nodeData: BuilderNodeData = { label: label || kind, kind }
+      const newNode: Node<BuilderNodeData> = {
+        id: crypto.randomUUID(),
+        type: getNodeTypeForKind(kind),
+        position: { x: e.nativeEvent.offsetX - 70, y: e.nativeEvent.offsetY - 30 },
+        data: nodeData,
+      }
+      addNode(newNode)
+    },
+    [addNode, pushUndo],
+  )
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'z') {
+        e.preventDefault()
+        if (e.shiftKey) redo()
+        else undo()
+      }
+    },
+    [undo, redo],
+  )
+
+  const memoizedNodeTypes = useMemo(() => nodeTypes, [])
+  const memoizedEdgeTypes = useMemo(() => edgeTypes, [])
+
+  return (
+    <div className="flex h-full w-full gap-3" onKeyDown={onKeyDown} tabIndex={0}>
+      <NodePalette />
+      <div className="relative flex-1 overflow-hidden rounded-lg border">
+        {isDirty && (
+          <div className="absolute left-1/2 top-2 z-10 -translate-x-1/2 rounded bg-amber-500/10 px-2 py-1 text-xs text-amber-500">
+            Unsaved changes
+          </div>
+        )}
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={memoizedNodeTypes}
+          edgeTypes={memoizedEdgeTypes}
+          onNodesChange={onNodesChange}
+          onEdgesChange={onEdgesChange}
+          onConnect={onConnect}
+          onNodeClick={onNodeClick}
+          onEdgeClick={onEdgeClick}
+          onPaneClick={onPaneClick}
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+          fitView
+          deleteKeyCode="Delete"
+          defaultEdgeOptions={{ type: 'default', data: { edgeType: 'default' } }}
+        >
+          <Background />
+          <Controls />
+          <MiniMap />
+        </ReactFlow>
+      </div>
+      <div className="flex w-72 flex-col gap-3">
+        <NodeInspector />
+        <ValidationPanel />
+      </div>
+    </div>
+  )
+}

package/src/components/protocols/builder/run-overlay.tsx

@@ -0,0 +1,29 @@
+import { useProtocolBuilderStore } from '@/features/protocols/builder/protocol-builder-store'
+import { useProtocolRunDetailQuery } from '@/features/protocols/queries'
+
+export function RunOverlay() {
+  const activeRunId = useProtocolBuilderStore((s) => s.activeRunId)
+  const nodes = useProtocolBuilderStore((s) => s.nodes)
+  const { data: runDetail } = useProtocolRunDetailQuery(activeRunId)
+
+  if (!runDetail) return null
+
+  const { run } = runDetail
+  const currentNode = run.currentStepId
+    ? nodes.find((n) => n.id === run.currentStepId)
+    : null
+
+  return (
+    <div className="absolute left-4 top-4 z-50 rounded-lg border border-blue-500/30 bg-card p-3 shadow-lg">
+      <div className="text-sm font-semibold">{run.title}</div>
+      <div className="mt-1 text-xs text-muted-foreground">
+        Status: <span className="font-semibold capitalize">{run.status}</span>
+      </div>
+      {currentNode && (
+        <div className="mt-1 text-xs text-muted-foreground">
+          Current: {currentNode.data.label}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/protocols/builder/template-gallery.tsx

@@ -0,0 +1,53 @@
+import { useProtocolTemplatesQuery } from '@/features/protocols/queries'
+import { useRouter } from 'next/navigation'
+import { cn } from '@/lib/utils'
+import type { ProtocolTemplate } from '@/types'
+
+export function TemplateGallery() {
+  const { data: templates } = useProtocolTemplatesQuery()
+  const router = useRouter()
+
+  const builtInTemplates = templates?.filter((t) => t.builtIn) || []
+  const customTemplates = templates?.filter((t) => !t.builtIn) || []
+
+  const renderCard = (template: ProtocolTemplate) => (
+    <button
+      key={template.id}
+      onClick={() => router.push(`/protocols/builder/${template.id}`)}
+      className={cn(
+        'rounded-lg border bg-card p-4 text-left transition-shadow hover:shadow-md',
+      )}
+    >
+      <div className="text-sm font-semibold">{template.name}</div>
+      <div className="mt-1 text-xs text-muted-foreground line-clamp-2">
+        {template.description}
+      </div>
+      {template.tags && template.tags.length > 0 && (
+        <div className="mt-2 flex gap-1">
+          {template.tags.slice(0, 2).map((tag) => (
+            <span key={tag} className="rounded bg-muted px-1.5 py-0.5 text-[10px]">
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+    </button>
+  )
+
+  return (
+    <div className="space-y-4">
+      {builtInTemplates.length > 0 && (
+        <div>
+          <h4 className="mb-2 text-xs font-semibold uppercase text-muted-foreground">Built-in</h4>
+          <div className="grid grid-cols-2 gap-3">{builtInTemplates.map(renderCard)}</div>
+        </div>
+      )}
+      {customTemplates.length > 0 && (
+        <div>
+          <h4 className="mb-2 text-xs font-semibold uppercase text-muted-foreground">Custom</h4>
+          <div className="grid grid-cols-2 gap-3">{customTemplates.map(renderCard)}</div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/protocols/builder/validation-panel.tsx

@@ -0,0 +1,57 @@
+import { useProtocolBuilderStore } from '@/features/protocols/builder/protocol-builder-store'
+
+export function ValidationPanel() {
+  const errors = useProtocolBuilderStore((s) => s.validationErrors)
+  const warnings = useProtocolBuilderStore((s) => s.validationWarnings)
+  const selectNode = useProtocolBuilderStore((s) => s.selectNode)
+
+  if (errors.length === 0 && warnings.length === 0) {
+    return (
+      <div className="rounded-lg border bg-card p-3">
+        <div className="text-sm font-semibold text-emerald-500">All checks passed</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="max-h-48 overflow-y-auto rounded-lg border bg-card p-3 shadow-sm">
+      <h3 className="mb-2 text-sm font-bold">Validation</h3>
+
+      {errors.length > 0 && (
+        <div className="mb-2">
+          <h4 className="mb-1 text-xs font-semibold text-red-500">Errors</h4>
+          <ul className="space-y-1">
+            {errors.map((err, i) => (
+              <li key={i} className="text-xs text-red-400">
+                <button
+                  onClick={() => err.nodeId && selectNode(err.nodeId)}
+                  className="text-left hover:underline"
+                >
+                  {err.message}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {warnings.length > 0 && (
+        <div>
+          <h4 className="mb-1 text-xs font-semibold text-yellow-500">Warnings</h4>
+          <ul className="space-y-1">
+            {warnings.map((warn, i) => (
+              <li key={i} className="text-xs text-yellow-400">
+                <button
+                  onClick={() => warn.nodeId && selectNode(warn.nodeId)}
+                  className="text-left hover:underline"
+                >
+                  {warn.message}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/skills/skills-workspace.tsx

@@ -555,7 +555,7 @@ export function SkillsWorkspace() {
                   Search the marketplace, use Details to learn what a tool does, or Open listing to visit the source page.
                 </p>
 
-                <div className="mt-4 grid gap-2 sm:grid-cols-[minmax(240px,1fr)_auto_auto_auto]">
+                <div className="mt-4 grid gap-2 sm:grid-cols-[minmax(240px,1fr)_auto_auto]">
                   <SearchField
                     value={hubQuery}
                     onChange={setHubQuery}
@@ -577,14 +577,6 @@ export function SkillsWorkspace() {
                   >
                     Search now
                   </button>
-                  <a
-                    href="https://clawhub.ai/skills"
-                    target="_blank"
-                    rel="noreferrer"
-                    className={ghostButtonClassName}
-                  >
-                    Open ClawHub
-                  </a>
                 </div>
 
                 <FilterRow

package/src/features/protocols/builder/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useTemplateSync } from './use-template-sync'
+export { useCanvasValidation } from './use-canvas-validation'

package/src/features/protocols/builder/hooks/use-canvas-validation.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react'
+import { useProtocolBuilderStore } from '../protocol-builder-store'
+import { validateDAG } from '../validators/dag-validator'
+
+export function useCanvasValidation() {
+  const nodes = useProtocolBuilderStore((s) => s.nodes)
+  const edges = useProtocolBuilderStore((s) => s.edges)
+  const setValidation = useProtocolBuilderStore((s) => s.setValidation)
+
+  useEffect(() => {
+    const { errors, warnings } = validateDAG(nodes, edges)
+    setValidation(errors, warnings)
+  }, [nodes, edges, setValidation])
+}

package/src/features/protocols/builder/hooks/use-run-overlay.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react'
+import { useProtocolBuilderStore, type BuilderNode } from '../protocol-builder-store'
+import { useProtocolRunDetailQuery } from '@/features/protocols/queries'
+
+export function useRunOverlay(runId: string | null) {
+  const setActiveRun = useProtocolBuilderStore((s) => s.setActiveRun)
+  const nodes = useProtocolBuilderStore((s) => s.nodes)
+  const setNodes = useProtocolBuilderStore((s) => s.setNodes)
+  const { data: runDetail } = useProtocolRunDetailQuery(runId)
+
+  const prevStepStateRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    setActiveRun(runId)
+    return () => setActiveRun(null)
+  }, [runId, setActiveRun])
+
+  useEffect(() => {
+    if (!runDetail?.run?.stepState) return
+
+    const stepStateKey = JSON.stringify(runDetail.run.stepState)
+    if (stepStateKey === prevStepStateRef.current) return
+    prevStepStateRef.current = stepStateKey
+
+    const updated: BuilderNode[] = nodes.map((node) => {
+      const stepState = runDetail.run.stepState?.[node.id]
+      if (!stepState) {
+        if (node.data.runtimeStatus) {
+          return { ...node, data: { ...node.data, runtimeStatus: null } }
+        }
+        return node
+      }
+      if (node.data.runtimeStatus === stepState.status) return node
+      return { ...node, data: { ...node.data, runtimeStatus: stepState.status } }
+    })
+
+    setNodes(updated)
+  }, [runDetail?.run?.stepState, nodes, setNodes])
+}

package/src/features/protocols/builder/hooks/use-template-sync.ts

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react'
+import { useProtocolBuilderStore } from '../protocol-builder-store'
+import { useUpsertProtocolTemplateMutation, type ProtocolTemplatePayload } from '@/features/protocols/queries'
+import { nodesToTemplate } from '../utils/nodes-to-template'
+
+export function useTemplateSync(autoSaveDelayMs = 2000) {
+  const nodes = useProtocolBuilderStore((s) => s.nodes)
+  const edges = useProtocolBuilderStore((s) => s.edges)
+  const isDirty = useProtocolBuilderStore((s) => s.isDirty)
+  const currentTemplate = useProtocolBuilderStore((s) => s.currentTemplate)
+  const setDirty = useProtocolBuilderStore((s) => s.setDirty)
+  const validationErrors = useProtocolBuilderStore((s) => s.validationErrors)
+  const mutation = useUpsertProtocolTemplateMutation()
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    if (!isDirty || !currentTemplate || validationErrors.length > 0) return
+
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+
+    debounceRef.current = setTimeout(async () => {
+      const updated = nodesToTemplate(nodes, edges, currentTemplate)
+      const payload: ProtocolTemplatePayload = {
+        name: updated.name,
+        description: updated.description,
+        tags: updated.tags || [],
+        recommendedOutputs: updated.recommendedOutputs || [],
+        singleAgentAllowed: updated.singleAgentAllowed || false,
+        steps: updated.steps || [],
+        entryStepId: updated.entryStepId,
+      }
+
+      try {
+        await mutation.mutateAsync({ templateId: currentTemplate.id, payload })
+        setDirty(false)
+      } catch {
+        // Save failed silently — user sees "Unsaved changes" indicator
+      }
+    }, autoSaveDelayMs)
+
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current)
+    }
+  }, [isDirty, nodes, edges, currentTemplate, validationErrors.length, autoSaveDelayMs, mutation, setDirty])
+}