@nuxtagentic/automations 0.0.0-stage → 0.1.1

package/runtime/components/AutomationCanvas.vue

@@ -0,0 +1,488 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, shallowRef, useTemplateRef, watch } from 'vue'
+import { usePreferredReducedMotion } from '@vueuse/core'
+import type { AutomationNode, AutomationPositions, AutomationStep } from '../shared/automation'
+import {
+  getStatusColor,
+  formatStepDuration,
+  getStepStatus,
+  type DisplayStatus,
+} from '../shared/automation-run'
+import AutomationStatusIcon from './AutomationStatusIcon.vue'
+import AutomationNodeIcon from './AutomationNodeIcon.vue'
+const savedPositions = defineModel<AutomationPositions>('positions', { required: true })
+const positions = shallowRef(savedPositions.value)
+watch(savedPositions, (value) => {
+  positions.value = value
+})
+const savedView = defineModel<{ x: number; y: number; z: number }>('view', { required: true })
+const view = shallowRef(savedView.value)
+watch(savedView, (value) => {
+  view.value = value
+})
+const { selected, summaries, steps } = defineProps<{
+  selected: AutomationNode | null
+  summaries: Record<AutomationNode, { main: string; sub: string }>
+  steps: AutomationStep[]
+}>()
+const reducedMotion = usePreferredReducedMotion()
+const canvasElement = useTemplateRef('canvasElement')
+const emit = defineEmits<{
+  select: [node: AutomationNode | null]
+  dragging: [active: boolean]
+}>()
+const nodes = [
+  { id: 'trigger', label: 'Trigger', icon: 'i-lucide-zap', color: 'text-warning' },
+  { id: 'agent', label: 'Agent call', icon: 'i-lucide-bot', color: 'text-info' },
+  { id: 'success', label: 'On success', icon: 'i-lucide-check', color: 'text-success' },
+  { id: 'error', label: 'On error', icon: 'i-lucide-triangle-alert', color: 'text-error' },
+] as const
+const nodeWidth = 280
+const nodeHeight = 114
+type Point = { x: number; y: number }
+interface AlignmentGuide {
+  axis: 'x' | 'y'
+  value: number
+  start: number
+  end: number
+}
+const guides = shallowRef<AlignmentGuide[]>([])
+function snapNode(node: AutomationNode, point: Point): Point {
+  const snapped = { ...point }
+  const tolerance = 6 / view.value.z
+  const candidates = nodes
+    .filter((entry) => entry.id !== node)
+    .map((entry) => positions.value[entry.id])
+  const matches: { axis: 'x' | 'y'; value: number }[] = []
+  for (const axis of ['x', 'y'] as const) {
+    const size = axis === 'x' ? nodeWidth : nodeHeight
+    const offsets = [size / 2, 0, size]
+    let best: { delta: number; value: number; offset: number } | undefined
+    for (const candidate of candidates) {
+      for (const targetOffset of offsets) {
+        const value = candidate[axis] + targetOffset
+        for (const offset of offsets) {
+          const delta = value - (point[axis] + offset)
+          if (Math.abs(delta) > tolerance || (best && Math.abs(delta) >= Math.abs(best.delta))) {
+            continue
+          }
+          best = { delta, value, offset }
+        }
+      }
+    }
+    if (best) {
+      snapped[axis] = best.value - best.offset
+      matches.push({ axis, value: best.value })
+    }
+  }
+  guides.value = matches.map(({ axis, value }) => {
+    const otherAxis = axis === 'x' ? 'y' : 'x'
+    const size = axis === 'x' ? nodeWidth : nodeHeight
+    const otherSize = axis === 'x' ? nodeHeight : nodeWidth
+    const aligned = candidates.filter((candidate) =>
+      [0, size / 2, size].some((offset) => Math.abs(candidate[axis] + offset - value) < 0.001),
+    )
+    const starts = [snapped[otherAxis], ...aligned.map((candidate) => candidate[otherAxis])]
+    const padding = 8 / view.value.z
+    return {
+      axis,
+      value,
+      start: Math.min(...starts) - padding,
+      end: Math.max(...starts) + otherSize + padding,
+    }
+  })
+  return snapped
+}
+const nodeStep = (id: AutomationNode) => steps.find((entry) => entry.node === id)
+const nodeState = (id: AutomationNode) => getStepStatus(nodeStep(id))
+const gridSize = computed(() => {
+  let size = 24 * view.value.z
+  while (size < 12) {
+    size *= 2
+  }
+  return size
+})
+const finishedLabels: Record<string, string> = { succeeded: 'Done', failed: 'Failed' }
+function nodeLabel(id: AutomationNode) {
+  const step = nodeStep(id)
+  const state = nodeState(id)
+  if (state === 'retry') {
+    return `Retry ${(step?.attempt ?? 1) - 1}/${step?.retryLimit ?? 0}`
+  }
+  if (state === 'running') {
+    return 'Running'
+  }
+  if (state === 'skipped') {
+    return 'Skipped'
+  }
+  const label = finishedLabels[state ?? ''] ?? ''
+  const duration = formatStepDuration(step)
+  return label + (label && duration ? ` · ${duration}` : '')
+}
+function nodeBorderClass(isSelected: boolean, state: DisplayStatus) {
+  if (isSelected || state === 'running' || state === 'retry') {
+    return 'border-(--gray-800)'
+  }
+  if (state === 'succeeded') {
+    return 'border-[color-mix(in_oklch,var(--ui-success)_55%,var(--gray-500))]'
+  }
+  if (state === 'failed') {
+    return 'border-[color-mix(in_oklch,var(--ui-error)_60%,var(--gray-500))]'
+  }
+  return 'border-(--gray-500)'
+}
+function nodeShadowClass(isSelected: boolean, state: DisplayStatus) {
+  if (isSelected) {
+    return 'shadow-[0_0_0_1px_var(--gray-800),0_8px_24px_rgba(0,0,0,0.4)]'
+  }
+  if (state === 'running' || state === 'retry') {
+    return 'shadow-[0_0_0_4px_color-mix(in_oklch,var(--ui-text-highlighted)_8%,transparent),0_4px_16px_rgba(0,0,0,0.25)]'
+  }
+  return 'shadow-[0_4px_16px_rgba(0,0,0,0.25)]'
+}
+function nodeClasses(id: AutomationNode) {
+  const state = nodeState(id)
+  const isSelected = selected === id
+  return [
+    nodeBorderClass(isSelected, state),
+    nodeShadowClass(isSelected, state),
+    state === 'skipped' && 'opacity-45',
+  ]
+}
+const edges = computed(() =>
+  [
+    ['trigger', 'agent'],
+    ['agent', 'success'],
+    ['agent', 'error'],
+  ].map(([from, to]) => {
+    const start = positions.value[from as AutomationNode]
+    const end = positions.value[to as AutomationNode]
+    const source = { x: start.x + nodeWidth / 2, y: start.y + nodeHeight }
+    const target = { x: end.x + nodeWidth / 2, y: end.y - 2 }
+    const middle = (source.y + target.y) / 2
+    return {
+      id: to as AutomationNode,
+      source,
+      target,
+      middle,
+      path: `M${source.x},${source.y} C${source.x},${middle} ${target.x},${middle} ${target.x},${target.y}`,
+      status: nodeState(to as AutomationNode),
+    }
+  }),
+)
+function edgeColor(edge: (typeof edges.value)[number]) {
+  const { id, status } = edge
+  if (!status) {
+    return 'var(--gray-700)'
+  }
+  if (status === 'skipped') {
+    return 'var(--gray-500)'
+  }
+  if (id === 'error') {
+    return 'var(--ui-error)'
+  }
+  return 'var(--ui-success)'
+}
+function getEdgeLabelClass({ id, status }: (typeof edges.value)[number]) {
+  if (!status || status === 'skipped') {
+    return 'border-(--gray-500) text-muted'
+  }
+  return id === 'error' ? 'border-error text-error' : 'border-success text-success'
+}
+const drag = shallowRef<{
+  pointer: number
+  node: AutomationNode | null
+  x: number
+  y: number
+  startX: number
+  startY: number
+  moved: boolean
+  scale: number
+  unsnapped?: Point
+}>()
+let frame = 0
+let pendingMove: { x: number; y: number } | undefined
+let pendingView: typeof view.value | undefined
+let wheelTimer: ReturnType<typeof setTimeout> | undefined
+function commitView() {
+  clearTimeout(wheelTimer)
+  flushFrame()
+  if (savedView.value !== view.value) {
+    savedView.value = view.value
+  }
+}
+function flushFrame() {
+  if (frame) {
+    cancelAnimationFrame(frame)
+  }
+  frame = 0
+  if (pendingView) {
+    view.value = pendingView
+    pendingView = undefined
+  }
+  const point = pendingMove
+  pendingMove = undefined
+  if (!drag.value || !point) {
+    return
+  }
+  // Embedded previews scale the surface; pointer deltas must use its local coordinates.
+  const dx = (point.x - drag.value.x) / drag.value.scale
+  const dy = (point.y - drag.value.y) / drag.value.scale
+  if (!dx && !dy) {
+    return
+  }
+  if (Math.abs(point.x - drag.value.startX) + Math.abs(point.y - drag.value.startY) > 2) {
+    drag.value.moved = true
+  }
+  if (drag.value.node && drag.value.unsnapped) {
+    // Keep the pointer position independent of snapping so nodes release naturally.
+    const point = {
+      x: drag.value.unsnapped.x + dx / view.value.z,
+      y: drag.value.unsnapped.y + dy / view.value.z,
+    }
+    drag.value.unsnapped = point
+    positions.value = {
+      ...positions.value,
+      [drag.value.node]: drag.value.moved ? snapNode(drag.value.node, point) : point,
+    }
+  } else {
+    view.value = { ...view.value, x: view.value.x + dx, y: view.value.y + dy }
+  }
+  drag.value.x = point.x
+  drag.value.y = point.y
+}
+onBeforeUnmount(() => {
+  if (frame) {
+    cancelAnimationFrame(frame)
+  }
+  clearTimeout(wheelTimer)
+})
+function down(event: PointerEvent, node: AutomationNode | null = null) {
+  if (event.button !== 0 || (!node && (event.target as HTMLElement).closest('button'))) {
+    return
+  }
+  emit('dragging', true)
+  commitView()
+  guides.value = []
+  const element = event.currentTarget as HTMLElement
+  element.setPointerCapture(event.pointerId)
+  drag.value = {
+    pointer: event.pointerId,
+    node,
+    x: event.clientX,
+    y: event.clientY,
+    startX: event.clientX,
+    startY: event.clientY,
+    moved: false,
+    scale: getCanvasScale(),
+    unsnapped: node ? { ...positions.value[node] } : undefined,
+  }
+  if (node) {
+    emit('select', node)
+  }
+}
+function move(event: PointerEvent) {
+  if (!drag.value || event.pointerId !== drag.value.pointer) {
+    return
+  }
+  pendingMove = { x: event.clientX, y: event.clientY }
+  if (!frame) {
+    frame = requestAnimationFrame(flushFrame)
+  }
+}
+function up() {
+  flushFrame()
+  if (drag.value?.node) {
+    savedPositions.value = positions.value
+  } else if (drag.value) {
+    commitView()
+  }
+  if (drag.value && !drag.value.node && !drag.value.moved) {
+    emit('select', null)
+  }
+  drag.value = undefined
+  guides.value = []
+  emit('dragging', false)
+}
+function wheel(event: WheelEvent) {
+  const current = pendingView ?? view.value
+  if (event.ctrlKey || event.metaKey) {
+    pendingView = {
+      ...current,
+      z: Math.max(0.35, Math.min(1.6, current.z * Math.exp(-event.deltaY * 0.005))),
+    }
+  } else {
+    const scale = getCanvasScale()
+    pendingView = {
+      ...current,
+      x: current.x - event.deltaX / scale,
+      y: current.y - event.deltaY / scale,
+    }
+  }
+  if (!frame) {
+    frame = requestAnimationFrame(flushFrame)
+  }
+  clearTimeout(wheelTimer)
+  wheelTimer = setTimeout(commitView, 100)
+}
+function getCanvasScale() {
+  const element = canvasElement.value
+  return element?.clientWidth ? element.getBoundingClientRect().width / element.clientWidth : 1
+}
+function keyboard(event: KeyboardEvent, node: AutomationNode) {
+  const direction = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[
+    event.key
+  ]
+  if (!direction) {
+    return
+  }
+  event.preventDefault()
+  const current = positions.value[node]
+  const amount = event.shiftKey ? 50 : 10
+  positions.value = {
+    ...positions.value,
+    [node]: { x: current.x + direction[0]! * amount, y: current.y + direction[1]! * amount },
+  }
+  savedPositions.value = positions.value
+}
+</script>
+
+<template>
+  <div
+    ref="canvasElement"
+    class="relative min-h-0 min-w-0 flex-1 touch-none overflow-hidden bg-(--gray-200) [background-image:radial-gradient(circle,var(--gray-500)_1px,transparent_1.5px)]"
+    :style="{
+      backgroundSize: `${gridSize}px ${gridSize}px`,
+      backgroundPosition: `calc(50% + ${view.x}px) ${view.y}px`,
+    }"
+    :class="drag ? 'cursor-grabbing' : 'cursor-grab'"
+    aria-label="Automation canvas. Drag nodes to move them. Use arrow keys on a focused node."
+    @pointerdown="down($event)"
+    @pointermove="move"
+    @pointerup="up"
+    @pointercancel="up"
+    @wheel.prevent="wheel"
+  >
+    <div
+      class="absolute top-0 left-1/2 origin-top-left will-change-transform"
+      :style="{ transform: `translate3d(${view.x}px,${view.y}px,0) scale(${view.z})` }"
+    >
+      <svg
+        class="pointer-events-none absolute top-0 left-0 size-px overflow-visible"
+        aria-hidden="true"
+      >
+        <g
+          v-for="edge in edges"
+          :key="edge.id"
+        >
+          <path
+            :d="edge.path"
+            fill="none"
+            :stroke="edgeColor(edge)"
+            stroke-width="1.5"
+            :stroke-dasharray="
+              edge.status === 'running' || edge.status === 'retry' ? '5 5' : undefined
+            "
+            class="transition-colors duration-240 motion-reduce:transition-none"
+          >
+            <animate
+              v-if="
+                reducedMotion !== 'reduce' && (edge.status === 'running' || edge.status === 'retry')
+              "
+              attributeName="stroke-dashoffset"
+              from="0"
+              to="-20"
+              dur="0.6s"
+              repeatCount="indefinite"
+            />
+          </path>
+          <path
+            :d="`M${edge.target.x - 4},${edge.target.y - 6} L${edge.target.x},${edge.target.y} L${edge.target.x + 4},${edge.target.y - 6}`"
+            fill="none"
+            :stroke="edgeColor(edge)"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="transition-colors duration-240 motion-reduce:transition-none"
+          />
+          <circle
+            :cx="edge.source.x"
+            :cy="edge.source.y"
+            r="3.5"
+            :fill="edgeColor(edge)"
+          />
+        </g>
+        <line
+          v-for="guide in guides"
+          :key="guide.axis"
+          :x1="guide.axis === 'x' ? guide.value : guide.start"
+          :y1="guide.axis === 'x' ? guide.start : guide.value"
+          :x2="guide.axis === 'x' ? guide.value : guide.end"
+          :y2="guide.axis === 'x' ? guide.end : guide.value"
+          stroke="var(--ui-primary)"
+          stroke-width="1"
+          vector-effect="non-scaling-stroke"
+        />
+      </svg>
+      <button
+        v-for="edge in edges.filter((entry) => entry.id !== 'agent')"
+        :key="`label-${edge.id}`"
+        class="absolute h-6 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full border bg-(--gray-300) px-2.5 text-xs whitespace-nowrap transition-colors duration-240 motion-reduce:transition-none"
+        :class="getEdgeLabelClass(edge)"
+        :style="{ left: `${(edge.source.x + edge.target.x) / 2}px`, top: `${edge.middle}px` }"
+        @click.stop="emit('select', edge.id)"
+      >
+        {{ edge.id === 'success' ? 'On success' : 'On error' }}
+      </button>
+      <button
+        v-for="node in nodes"
+        :key="node.id"
+        type="button"
+        class="absolute top-0 left-0 w-[280px] touch-none rounded-[14px] border bg-(--gray-300) p-1 text-left outline-offset-4 transition-[border-color,box-shadow,opacity] duration-200 will-change-transform motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-primary"
+        :class="nodeClasses(node.id)"
+        :style="{ transform: `translate3d(${positions[node.id].x}px,${positions[node.id].y}px,0)` }"
+        :aria-label="`${node.label}: ${summaries[node.id].main}`"
+        :aria-pressed="selected === node.id"
+        @pointerdown.stop="down($event, node.id)"
+        @pointermove.stop="move"
+        @pointerup.stop="up"
+        @click.stop="emit('select', node.id)"
+        @keydown="keyboard($event, node.id)"
+      >
+        <span class="flex h-9 items-center gap-2 pr-1.5 pl-1">
+          <span
+            class="grid size-6 place-items-center rounded-[7px] bg-(--gray-500)"
+            :class="node.color"
+          >
+            <AutomationNodeIcon
+              :node="node.id"
+              class="size-3.5"
+            />
+          </span>
+          <span class="min-w-0 flex-1 truncate text-sm text-highlighted">{{ node.label }}</span>
+          <span
+            class="flex origin-right items-center gap-1.5 text-xs whitespace-nowrap transition-[color,opacity,transform] duration-200 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+            :class="[
+              getStatusColor(nodeState(node.id)),
+              nodeState(node.id) ? 'scale-100 opacity-100' : 'scale-80 opacity-0',
+            ]"
+          >
+            <span class="tabular-nums">{{ nodeLabel(node.id) }}</span>
+            <AutomationStatusIcon
+              :status="nodeState(node.id)"
+              class="size-3.5"
+            />
+          </span>
+        </span>
+        <span
+          class="flex h-[68px] flex-col justify-center gap-1 overflow-hidden rounded-[10px] border border-(--gray-400) bg-(--gray-100) px-3.5 py-3"
+        >
+          <span class="truncate font-mono text-[13px] leading-[18px]">
+            {{ summaries[node.id].main }}
+          </span>
+          <span class="truncate text-xs leading-4 text-muted">{{ summaries[node.id].sub }}</span>
+        </span>
+      </button>
+    </div>
+  </div>
+</template>