@nuxtagentic/automations 0.0.0-stage → 0.1.0

package/runtime/pages/automations.vue

@@ -0,0 +1,1181 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
+import { CloudConfigClientError } from '@cloudconfig/core/client'
+import {
+  definePageMeta,
+  useAsyncData,
+  useCloudConfig,
+  useRequestFetch,
+  useRoute,
+  useRouter,
+  useState,
+} from '#imports'
+import { useWorkspaceScope } from '@nuxtagentic/identity/runtime/composables/useWorkspaceScope'
+import { useCurrentUser } from '@nuxtagentic/identity/runtime/composables/useCurrentUser'
+import { useAgentActionHandler } from '@nuxtagentic/workspace/runtime/composables/useAgentActions'
+import { useWorkspaceModules } from '@nuxtagentic/workspace/runtime/composables/useWorkspaceModules'
+import { useAgents } from '@nuxtagentic/agents/runtime/composables/useAgents'
+import type { InferSelect } from '@cloudconfig/core'
+import type { AutomationsConfig } from '../../schema'
+import { createAutomationCommands } from '../../client'
+import { createIntegrationCommands } from '@nuxtagentic/integrations/client'
+import { useEventListener, useTimeoutPoll } from '@vueuse/core'
+import { INTEGRATION_CATALOG } from '@nuxtagentic/integrations/runtime/shared/catalog'
+import {
+  createAutomationDraft,
+  LOCAL_EVENTS,
+  describeAutomationNodes,
+  type AutomationDraft,
+  type AutomationNode,
+  type AutomationStep,
+} from '../shared/automation'
+import AutomationCanvas from '../components/AutomationCanvas.vue'
+import AutomationSidebar from '../components/AutomationSidebar.vue'
+import AutomationRunsPanel from '../components/AutomationRunsPanel.vue'
+import AutomationInspector from '../components/AutomationInspector.vue'
+
+definePageMeta({ layout: 'dashboard', middleware: ['auth'] })
+const api = useCloudConfig<AutomationsConfig>()
+const fetcher = useRequestFetch()
+const route = useRoute()
+const router = useRouter()
+const scope = useWorkspaceScope()
+const user = useCurrentUser()
+const commands = createAutomationCommands(fetcher)
+const integrationCommands = createIntegrationCommands(fetcher)
+const workspace = computed(() => scope.value.slice(scope.value.indexOf(':') + 1))
+const agents = useAgents()
+const modules = useWorkspaceModules()
+type Automation = InferSelect<AutomationsConfig, 'automation'>
+type Folder = InferSelect<AutomationsConfig, 'automationFolder'>
+const workspaceFilter = computed(() => ({
+  type: 'group' as const,
+  logic: 'and' as const,
+  children: [
+    {
+      type: 'condition' as const,
+      field: 'workspace',
+      operator: 'eq' as const,
+      value: workspace.value,
+    },
+  ],
+}))
+const [
+  { data: collection, refresh: refreshCollection, error: collectionError },
+  { data: folders, refresh: refreshFolders, error: folderError },
+  { data: integrations },
+] = await Promise.all([
+  useAsyncData(`automations:${scope.value}`, async () => {
+    const data: Automation[] = []
+    let page = 1
+    let totalPages: number
+    do {
+      const result = await api.automation.list({
+        page,
+        pageSize: 100,
+        sortBy: 'name',
+        filters: workspaceFilter.value,
+      })
+      data.push(...result.data)
+      totalPages = result.totalPages
+      page++
+    } while (page <= totalPages)
+    return { data }
+  }),
+  useAsyncData(`automation-folders:${scope.value}`, async () => {
+    const data: Folder[] = []
+    let page = 1
+    let totalPages: number
+    do {
+      const result = await api.automationFolder.list({
+        page,
+        pageSize: 100,
+        sortBy: 'name',
+        filters: workspaceFilter.value,
+      })
+      data.push(...result.data)
+      totalPages = result.totalPages
+      page++
+    } while (page <= totalPages)
+    return data
+  }),
+  useAsyncData(`automation-integrations:${scope.value}`, integrationCommands.catalog),
+])
+type Run = InferSelect<AutomationsConfig, 'automationRun'>
+const draft = ref<AutomationDraft>(createAutomationDraft(workspace.value))
+const baseline = ref('')
+const id = ref<number | null>(null)
+const isBusy = ref(false)
+const message = ref('')
+const isCanvasDragging = ref(false)
+const sidebarOpen = useState('dashboard-automations-sidebar-open', () => true)
+const isTestMenuOpen = ref(false)
+onMounted(() => {
+  if (window.innerWidth < 768) {
+    sidebarOpen.value = false
+  }
+})
+const currentFolder = computed(() =>
+  typeof route.query.automationFolder === 'string'
+    ? route.query.automationFolder
+    : draft.value.folder,
+)
+const folderNames = computed(() =>
+  [
+    ...new Set([
+      ...(folders.value ?? []).map((folder) => folder.name),
+      ...(collection.value?.data ?? []).map((row) => row.folder),
+      draft.value.folder,
+    ]),
+  ]
+    .filter((name) => name !== 'Unsorted')
+    .toSorted((a, b) => a.localeCompare(b)),
+)
+const sidebarRows = computed(() => {
+  const rows = (collection.value?.data ?? []).map((row) =>
+    row.id === id.value
+      ? { ...row, name: draft.value.name, folder: draft.value.folder, active: draft.value.active }
+      : row,
+  )
+  return id.value
+    ? rows
+    : [
+        ...rows,
+        { id: 0, name: draft.value.name, folder: draft.value.folder, active: draft.value.active },
+      ]
+})
+const selected = computed({
+  get: () =>
+    ['trigger', 'agent', 'success', 'error'].includes(String(route.query.node))
+      ? (route.query.node as AutomationNode)
+      : null,
+  set: (node: AutomationNode | null) => {
+    void router.replace({
+      query: { ...route.query, node: node ?? undefined, runs: undefined, run: undefined },
+    })
+  },
+})
+// The inspector keeps showing the last node while it slides closed.
+const inspectorNode = computed<AutomationNode>(
+  (previous) => selected.value ?? previous ?? 'trigger',
+)
+
+function routeView() {
+  return {
+    x: Number(route.query.x) || 0,
+    y: route.query.y === undefined ? 24 : Number(route.query.y) || 0,
+    z: Math.max(0.35, Math.min(1.6, Number(route.query.z) || 1)),
+  }
+}
+const view = shallowRef(routeView())
+let viewTimer: ReturnType<typeof setTimeout> | undefined
+watch([() => route.query.x, () => route.query.y, () => route.query.z], () => {
+  clearTimeout(viewTimer)
+  view.value = routeView()
+})
+function persistView() {
+  clearTimeout(viewTimer)
+  void router.replace({
+    query: {
+      ...route.query,
+      x: String(Math.round(view.value.x)),
+      y: String(Math.round(view.value.y)),
+      z: view.value.z.toFixed(2),
+    },
+  })
+}
+function updateView(value: typeof view.value) {
+  view.value = value
+  clearTimeout(viewTimer)
+  viewTimer = setTimeout(persistView, 150)
+}
+onBeforeUnmount(() => clearTimeout(viewTimer))
+function zoomIn() {
+  updateView({ ...view.value, z: Math.min(1.6, view.value.z * 1.2) })
+}
+function zoomOut() {
+  updateView({ ...view.value, z: Math.max(0.35, view.value.z / 1.2) })
+}
+function zoomReset() {
+  updateView({ x: 0, y: 24, z: 1 })
+}
+function selectFolder(name: string) {
+  return router.replace({ query: { ...route.query, automationFolder: name } })
+}
+async function createFolder(name: string) {
+  if (isBusy.value) {
+    return false
+  }
+  if (
+    name.toLowerCase() === 'unsorted' ||
+    folderNames.value.some((folder) => folder.toLowerCase() === name.toLowerCase())
+  ) {
+    message.value = 'Choose a different folder name.'
+    return false
+  }
+  isBusy.value = true
+  message.value = ''
+  try {
+    await api.automationFolder.create({ name, workspace: workspace.value })
+    await refreshFolders()
+    await selectFolder(name)
+    return true
+  } catch (cause) {
+    message.value = errorMessage(cause)
+    return false
+  } finally {
+    isBusy.value = false
+  }
+}
+async function removeFolder(name: string) {
+  if (isBusy.value) {
+    return
+  }
+  isBusy.value = true
+  message.value = ''
+  try {
+    for (const row of collection.value?.data ?? []) {
+      if (row.folder !== name) {
+        continue
+      }
+      await api.automation.update(row.id, { folder: 'Unsorted' })
+      if (row.id === id.value) {
+        draft.value.folder = 'Unsorted'
+        baseline.value = JSON.stringify({ ...JSON.parse(baseline.value), folder: 'Unsorted' })
+      }
+    }
+    for (const folder of folders.value ?? []) {
+      if (folder.name === name) {
+        await api.automationFolder.delete(folder.id)
+      }
+    }
+    if (draft.value.folder === name) {
+      draft.value.folder = 'Unsorted'
+    }
+    if (currentFolder.value === name) {
+      await selectFolder('Unsorted')
+    }
+  } catch (cause) {
+    message.value = errorMessage(cause)
+  } finally {
+    await Promise.all([refreshCollection(), refreshFolders()])
+    isBusy.value = false
+  }
+}
+const snapshot = computed(() => JSON.stringify(draft.value))
+const dirty = computed(() => !id.value || snapshot.value !== baseline.value)
+const isTestOpen = ref(false)
+const isCopied = ref(false)
+const activeRunId = ref<number | null>(null)
+const historyOpen = computed(() => route.query.runs === '1' || Number(route.query.run) > 0)
+const sample = ref(
+  JSON.stringify(
+    { user: { id: user.value?.id, name: user.value?.name, email: user.value?.email } },
+    null,
+    2,
+  ),
+)
+const selectedAgent = computed(() =>
+  agents.rows.value.find((row) => row.id === draft.value.agentId),
+)
+const connected = (provider: string) =>
+  integrations.value?.connections.some((row) => row.provider === provider && row.enabled)
+const events = computed(() => [
+  ...LOCAL_EVENTS.map((entry) => ({
+    id: entry.id as string,
+    label: entry.label as string,
+    detail: entry.detail as string,
+  })),
+  ...INTEGRATION_CATALOG.filter((entry) => connected(entry.id)).flatMap((entry) =>
+    entry.triggers.map((trigger) => ({ ...trigger, detail: `Event endpoint · ${entry.name}` })),
+  ),
+])
+const summaries = computed(() =>
+  describeAutomationNodes(draft.value, {
+    agentName: selectedAgent.value?.name,
+    eventLabel: events.value.find((event) => event.id === draft.value.trigger.event)?.label,
+  }),
+)
+function errorMessage(cause: unknown) {
+  if (cause instanceof CloudConfigClientError && cause.issues.length) {
+    return cause.issues.map((issue) => issue.message).join(' ')
+  }
+  const error = cause as { data?: { statusMessage?: string; message?: string }; message?: string }
+  return (
+    error.data?.statusMessage ??
+    error.data?.message ??
+    error.message ??
+    'Could not save this automation.'
+  )
+}
+function fromRow(row: InferSelect<AutomationsConfig, 'automation'>): AutomationDraft {
+  return {
+    name: row.name,
+    folder: row.folder,
+    active: row.active,
+    workspace: row.workspace,
+    agentId: row.agentId,
+    instructions: row.instructions,
+    timeout: row.timeout,
+    retries: row.retries,
+    trigger: structuredClone(row.trigger) as AutomationDraft['trigger'],
+    success: structuredClone(row.success) as AutomationDraft['success'],
+    failure: structuredClone(row.failure) as AutomationDraft['failure'],
+    positions: structuredClone(row.positions) as AutomationDraft['positions'],
+    runAs: row.runAs === 'workspace' ? 'workspace' : 'owner',
+  }
+}
+let autosaveTimer: ReturnType<typeof setTimeout> | undefined
+let savePromise: Promise<boolean> | null = null
+let failedSnapshot = ''
+function cancelAutosave() {
+  clearTimeout(autosaveTimer)
+  autosaveTimer = undefined
+}
+function scheduleAutosave() {
+  cancelAutosave()
+  if (
+    isBusy.value ||
+    loading.value ||
+    isCanvasDragging.value ||
+    snapshot.value === baseline.value ||
+    snapshot.value === failedSnapshot
+  ) {
+    return
+  }
+  autosaveTimer = setTimeout(() => void save(), 400)
+}
+function openDraft(row: Automation | null) {
+  cancelAutosave()
+  id.value = row?.id ?? null
+  draft.value = row ? fromRow(row) : createAutomationDraft(workspace.value, currentFolder.value)
+  baseline.value = snapshot.value
+  failedSnapshot = ''
+  activeRunId.value = null
+  message.value = ''
+}
+
+const requestedId = computed(() =>
+  route.query.automation === undefined
+    ? (collection.value?.data[0]?.id ?? 0)
+    : Number(route.query.automation) || 0,
+)
+const {
+  data: record,
+  status: recordStatus,
+  error: recordError,
+} = await useAsyncData(
+  () => `automation:${scope.value}:${requestedId.value}`,
+  async () => {
+    if (!requestedId.value) {
+      return null
+    }
+    const row =
+      collection.value?.data.find((entry) => entry.id === requestedId.value) ??
+      (await api.automation.get(requestedId.value))
+    if (row.workspace !== workspace.value) {
+      throw new Error('Choose an automation from this workspace.')
+    }
+    return row
+  },
+  { default: () => null },
+)
+const loading = computed(() => recordStatus.value === 'pending')
+// Saving a new automation routes to its id; that must not reset the draft being edited.
+watch(
+  record,
+  (row) => {
+    if (!row || row.id !== id.value) {
+      openDraft(row)
+    }
+  },
+  { immediate: true },
+)
+
+function listRuns(automationId: number, page = 1) {
+  return api.automationRun.list({
+    page,
+    pageSize: 50,
+    sortBy: 'id',
+    sortDir: 'desc',
+    filters: {
+      type: 'group',
+      logic: 'and',
+      children: [{ type: 'condition', field: 'automationId', operator: 'eq', value: automationId }],
+    },
+  })
+}
+const {
+  data: runs,
+  pending: runsPending,
+  error: runsError,
+  refresh: refreshRuns,
+} = useAsyncData(
+  () => `automation-runs:${scope.value}:${id.value}`,
+  async () => (id.value ? listRuns(id.value) : null),
+)
+const isLoadingMoreRuns = ref(false)
+const history = computed(() => runs.value?.data ?? [])
+const historyTotal = computed(() => runs.value?.totalCount ?? 0)
+const hasMoreRuns = computed(() => !!runs.value && runs.value.page < runs.value.totalPages)
+const currentRun = computed(() => history.value.find((run) => run.id === activeRunId.value) ?? null)
+const selectedRun = computed(
+  () => history.value.find((run) => run.id === Number(route.query.run)) ?? null,
+)
+const isRunning = (run: Run) => ['queued', 'running', 'waiting'].includes(run.status)
+const running = computed(() => !!currentRun.value && isRunning(currentRun.value))
+const runResultClass = computed(() => {
+  if (running.value) {
+    return 'text-muted'
+  }
+  return currentRun.value?.status === 'succeeded' ? 'text-success' : 'text-error'
+})
+const defaultRunSource = computed(() => {
+  const { kind, event } = draft.value.trigger
+  if (kind === 'webhook') {
+    return 'Webhook'
+  }
+  return kind === 'schedule' ? 'Schedule' : event
+})
+const inspectorPanelClass = computed(() => {
+  if (selected.value) {
+    return 'translate-x-0 opacity-100'
+  }
+  return historyOpen.value
+    ? 'pointer-events-none -translate-x-3 opacity-0'
+    : 'pointer-events-none translate-x-0 opacity-0'
+})
+const steps = computed(
+  () => ((selectedRun.value ?? currentRun.value)?.steps as AutomationStep[]) ?? [],
+)
+const runResultLabel = computed(() => {
+  const run = currentRun.value
+  if (!run) {
+    return ''
+  }
+  if (run.status === 'waiting') {
+    return 'Waiting for approval in Integrations'
+  }
+  if (isRunning(run)) {
+    return 'Running…'
+  }
+  if (run.status === 'succeeded') {
+    const duration =
+      run.startedAt && run.finishedAt
+        ? `${((new Date(run.finishedAt).getTime() - new Date(run.startedAt).getTime()) / 1000).toFixed(1)}s`
+        : ''
+    return `Succeeded${duration ? ` in ${duration}` : ''}`
+  }
+  const steps = run.steps as AutomationStep[]
+  const agentFailed = steps.find((step) => step.node === 'agent')?.status === 'failed'
+  const handled = steps.find((step) => step.node === 'error')?.status === 'succeeded'
+  const retries = Math.max(0, run.attempts - 1)
+  return `${agentFailed ? 'Agent failed' : 'Run failed'}${retries ? ` after ${retries} ${retries === 1 ? 'retry' : 'retries'}` : ''}${handled ? ', handled by On error' : ''}`
+})
+useTimeoutPoll(async () => {
+  const pending = history.value.filter(isRunning)
+  if (!pending.length || !runs.value) {
+    return
+  }
+  try {
+    const updates = await Promise.all(pending.map((run) => api.automationRun.get(run.id)))
+    runs.value = {
+      ...runs.value,
+      data: runs.value.data.map((run) => updates.find((update) => update.id === run.id) ?? run),
+    }
+  } catch (cause) {
+    message.value = errorMessage(cause)
+  }
+}, 1500)
+async function loadMoreHistory() {
+  const loaded = runs.value
+  if (!id.value || !loaded || !hasMoreRuns.value || isLoadingMoreRuns.value) {
+    return
+  }
+  isLoadingMoreRuns.value = true
+  try {
+    const next = await listRuns(id.value, loaded.page + 1)
+    const seen = new Set(loaded.data.map((run) => run.id))
+    runs.value = {
+      ...next,
+      data: [...loaded.data, ...next.data.filter((run) => !seen.has(run.id))],
+    }
+  } catch (cause) {
+    message.value = errorMessage(cause)
+  } finally {
+    isLoadingMoreRuns.value = false
+  }
+}
+
+const webhookId = computed(() =>
+  id.value && !dirty.value && draft.value.trigger.kind === 'webhook' ? id.value : null,
+)
+const { data: endpoint, error: endpointError } = useAsyncData(
+  () => `automation-endpoint:${scope.value}:${webhookId.value}`,
+  async () => (webhookId.value ? (await commands.endpoint(webhookId.value)).url : ''),
+  { default: () => '' },
+)
+const loadError = computed(
+  () =>
+    collectionError.value ||
+    folderError.value ||
+    recordError.value ||
+    runsError.value ||
+    endpointError.value,
+)
+function save(): Promise<boolean> {
+  cancelAutosave()
+  if (savePromise) {
+    return savePromise.then((saved) =>
+      saved && snapshot.value !== baseline.value ? save() : saved,
+    )
+  }
+  if (isBusy.value || loading.value) {
+    return Promise.resolve(false)
+  }
+  const submitted = snapshot.value
+  const input = JSON.parse(submitted) as AutomationDraft
+  isBusy.value = true
+  message.value = ''
+  savePromise = (async () => {
+    try {
+      const row = id.value
+        ? await api.automation.update(id.value, input)
+        : await api.automation.create(input)
+      id.value = row.id
+      const rows = collection.value?.data ?? []
+      collection.value = {
+        data: rows.some((entry) => entry.id === row.id)
+          ? rows.map((entry) => (entry.id === row.id ? row : entry))
+          : [...rows, row],
+      }
+      const saved = fromRow(row)
+      if (snapshot.value === submitted) {
+        draft.value = saved
+      }
+      baseline.value = JSON.stringify(saved)
+      failedSnapshot = ''
+      if (Number(route.query.automation) !== row.id) {
+        await router.replace({ query: { ...route.query, automation: String(row.id) } })
+      }
+      return true
+    } catch (cause) {
+      failedSnapshot = submitted
+      message.value = errorMessage(cause)
+      return false
+    } finally {
+      savePromise = null
+      isBusy.value = false
+    }
+  })()
+  return savePromise
+}
+watch([snapshot, isBusy, loading, isCanvasDragging], scheduleAutosave)
+async function flushAutosave() {
+  if (!savePromise && snapshot.value === baseline.value) {
+    return true
+  }
+  return save()
+}
+onBeforeRouteLeave(flushAutosave)
+onBeforeRouteUpdate((to, from) => {
+  if (to.query.automation === from.query.automation || Number(to.query.automation) === id.value) {
+    return true
+  }
+  return flushAutosave()
+})
+onBeforeUnmount(cancelAutosave)
+function toggle(active: boolean) {
+  draft.value.active = active
+}
+async function switchAutomation(automationId: number) {
+  if (!automationId) {
+    return
+  }
+  if (automationId === id.value) {
+    return
+  }
+  if (!(await flushAutosave())) {
+    return
+  }
+  await router.push({
+    query: {
+      ...route.query,
+      automation: String(automationId),
+      automationFolder: collection.value?.data.find((row) => row.id === automationId)?.folder,
+      node: undefined,
+      run: undefined,
+      runs: undefined,
+    },
+  })
+}
+async function newAutomation() {
+  if (!(await flushAutosave())) {
+    return
+  }
+  await router.replace({
+    query: { ...route.query, automation: 'new', node: 'trigger', run: undefined, runs: undefined },
+  })
+  openDraft(null)
+}
+async function remove() {
+  if (!id.value || isBusy.value || loading.value) {
+    return
+  }
+  cancelAutosave()
+  isBusy.value = true
+  message.value = ''
+  try {
+    await api.automation.delete(id.value)
+    id.value = null
+    baseline.value = snapshot.value
+    await newAutomation()
+    await refreshCollection()
+  } catch (cause) {
+    message.value = errorMessage(cause)
+  } finally {
+    isBusy.value = false
+  }
+}
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(endpoint.value)
+    isCopied.value = true
+  } catch {
+    message.value = 'Select the endpoint and copy it.'
+  }
+}
+async function test(errorPath = false) {
+  const revealRun = historyOpen.value
+  if (running.value || isBusy.value) {
+    message.value = running.value
+      ? 'Wait for the current test run to finish.'
+      : 'Wait for the current change to finish.'
+    return false
+  }
+  if (!draft.value.agentId) {
+    selected.value = 'agent'
+    message.value = 'Choose an agent before running a test.'
+    return false
+  }
+  if ((!id.value || dirty.value) && !(await save())) {
+    return false
+  }
+  isBusy.value = true
+  message.value = ''
+  try {
+    const payload = JSON.parse(sample.value)
+    const result = await commands.run(id.value!, payload, { errorPath })
+    activeRunId.value = result.runId
+    isTestOpen.value = false
+    await refreshRuns()
+    if (revealRun) {
+      selectRun(result.runId)
+    }
+    return true
+  } catch (cause) {
+    message.value =
+      cause instanceof SyntaxError ? 'Enter a valid JSON sample payload.' : errorMessage(cause)
+    return false
+  } finally {
+    isBusy.value = false
+  }
+}
+async function showHistory() {
+  if (!id.value) {
+    return
+  }
+  void refreshRuns()
+  await router.push({ query: { ...route.query, node: undefined, runs: '1', run: undefined } })
+}
+function selectRun(runId: number) {
+  void router.push({ query: { ...route.query, node: undefined, runs: '1', run: String(runId) } })
+}
+function backToRuns() {
+  void router.push({ query: { ...route.query, runs: '1', run: undefined } })
+}
+function closeRuns() {
+  void router.push({ query: { ...route.query, runs: undefined, run: undefined } })
+}
+function rerun(run: Run) {
+  sample.value = JSON.stringify(run.payload, null, 2)
+  void test()
+}
+const active = computed(() => route.path === '/dashboard/automations')
+async function runAction(action: () => Promise<boolean>, fallback: string) {
+  if (await action()) {
+    return
+  }
+  const error = message.value || fallback
+  message.value = ''
+  throw new Error(error)
+}
+function saveAction() {
+  return runAction(save, 'Could not save this automation. Try again.')
+}
+useAgentActionHandler('save-automation', saveAction, active)
+useAgentActionHandler(
+  'test-automation',
+  () => runAction(test, 'Could not start a test run. Try again.'),
+  active,
+)
+useAgentActionHandler(
+  'webhook-automation',
+  () => {
+    draft.value.trigger.kind = 'webhook'
+    selected.value = 'trigger'
+    return saveAction()
+  },
+  active,
+)
+useAgentActionHandler(
+  'retry-automation',
+  () => {
+    draft.value.retries = 3
+    selected.value = 'error'
+    return saveAction()
+  },
+  active,
+)
+useAgentActionHandler(
+  'slack-automation',
+  () => {
+    draft.value.failure.action = 'slack'
+    selected.value = 'error'
+    return saveAction()
+  },
+  active,
+)
+function keydown(event: KeyboardEvent) {
+  if (
+    !active.value ||
+    event.defaultPrevented ||
+    isTestMenuOpen.value ||
+    (event.target as HTMLElement).closest('[role=dialog],[role=menu],[role=listbox]')
+  ) {
+    return
+  }
+  if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+    event.preventDefault()
+    void save()
+  } else if (
+    event.key === 'Escape' &&
+    !(event.target as HTMLElement).closest('input,textarea,[role=dialog]')
+  ) {
+    if (selectedRun.value) {
+      backToRuns()
+    } else if (historyOpen.value) {
+      closeRuns()
+    } else {
+      selected.value = null
+    }
+  }
+}
+useEventListener('keydown', keydown)
+</script>
+
+<template>
+  <ClientOnly>
+    <Teleport
+      defer
+      to="#workspace-navbar-title"
+    >
+      <div class="flex min-w-0 flex-1 items-center gap-2.5 overflow-hidden">
+        <UBreadcrumb
+          :items="[
+            { label: 'Automations', icon: 'i-lucide-workflow' },
+            {
+              label: draft.name || 'Untitled automation',
+              active: true,
+              class: 'font-medium text-highlighted',
+            },
+          ]"
+          :ui="{
+            root: 'min-w-0',
+            list: 'flex-nowrap gap-1.5',
+            item: 'min-w-0 first:shrink-0',
+            link: 'gap-1.5 text-[13px] leading-5',
+            linkLeadingIcon: 'size-3 shrink-0',
+            linkLabel: 'truncate',
+            separatorIcon: 'size-3 text-dimmed',
+          }"
+        />
+        <button
+          v-if="currentRun"
+          type="button"
+          class="h-7 min-w-0 flex-[0_100_auto] truncate rounded-md px-2 text-[13px] transition-[color,opacity] duration-200 enabled:hover:bg-(--gray-400) focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none"
+          :class="runResultClass"
+          :disabled="running"
+          :title="runResultLabel"
+          @click="selectRun(currentRun.id)"
+        >
+          {{ runResultLabel }}
+        </button>
+      </div>
+    </Teleport>
+    <Teleport
+      defer
+      to="#workspace-navbar-actions"
+    >
+      <div
+        class="flex shrink-0 items-center gap-2.5"
+        role="toolbar"
+        aria-label="Automation controls"
+        @pointerdown.stop
+        @wheel.stop
+      >
+        <button
+          type="button"
+          role="switch"
+          :aria-checked="draft.active"
+          :aria-label="draft.active ? 'Active automation' : 'Paused automation'"
+          :disabled="isBusy || loading"
+          class="flex h-8 shrink-0 items-center gap-2 rounded-md py-0 pr-2.5 pl-2 text-[13px] text-(--gray-1000) hover:bg-(--gray-400) focus-visible:outline-2 focus-visible:outline-primary disabled:opacity-50"
+          @click="toggle(!draft.active)"
+        >
+          <span
+            class="relative h-4 w-7 shrink-0 rounded-full transition-colors duration-200 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+            :class="draft.active ? 'bg-success' : 'bg-(--gray-600)'"
+          >
+            <span
+              class="absolute top-0.5 left-0.5 size-3 rounded-full transition-[transform,background-color] duration-200 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+              :class="draft.active ? 'translate-x-3 bg-(--ui-bg)' : 'bg-(--gray-900)'"
+            />
+          </span>
+          <span class="hidden sm:inline">{{ draft.active ? 'Active' : 'Paused' }}</span>
+        </button>
+        <button
+          type="button"
+          class="flex h-8 shrink-0 items-center gap-2 rounded-lg border border-(--gray-500) px-2.5 text-[13px] text-highlighted transition-colors hover:bg-(--gray-400) active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-primary disabled:opacity-50"
+          :class="historyOpen && 'bg-(--gray-400)'"
+          :disabled="!id"
+          :aria-pressed="historyOpen"
+          @click="historyOpen ? closeRuns() : showHistory()"
+        >
+          <svg
+            class="size-3.5 shrink-0"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5M12 7v5l3 2" />
+          </svg>
+          <span>Runs</span>
+          <span class="tabular-nums text-dimmed">{{ Math.max(historyTotal, history.length) }}</span>
+        </button>
+        <div
+          class="hidden h-8 shrink-0 items-center gap-0.5 rounded-lg border border-(--gray-500) bg-(--gray-300) px-0.5 sm:flex"
+          role="group"
+          aria-label="Canvas zoom"
+        >
+          <button
+            type="button"
+            aria-label="Zoom out"
+            class="grid h-[26px] w-7 place-items-center rounded-md text-muted hover:bg-(--gray-500) hover:text-highlighted focus-visible:outline-2 focus-visible:outline-primary"
+            @click="zoomOut"
+          >
+            <svg
+              class="size-3.5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              aria-hidden="true"
+            >
+              <path d="M5 12h14" />
+            </svg>
+          </button>
+          <button
+            type="button"
+            title="Reset view"
+            aria-label="Reset canvas view"
+            class="h-[26px] min-w-12 rounded-md px-1 text-xs tabular-nums text-highlighted hover:bg-(--gray-500) focus-visible:outline-2 focus-visible:outline-primary"
+            @click="zoomReset"
+          >
+            {{ Math.round(view.z * 100) }}%
+          </button>
+          <button
+            type="button"
+            aria-label="Zoom in"
+            class="grid h-[26px] w-7 place-items-center rounded-md text-muted hover:bg-(--gray-500) hover:text-highlighted focus-visible:outline-2 focus-visible:outline-primary"
+            @click="zoomIn"
+          >
+            <svg
+              class="size-3.5"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              aria-hidden="true"
+            >
+              <path d="M12 5v14M5 12h14" />
+            </svg>
+          </button>
+        </div>
+        <div class="flex shrink-0">
+          <button
+            type="button"
+            class="flex h-8 items-center gap-1.5 rounded-l-lg bg-inverted px-3 text-[13px] font-medium text-inverted hover:bg-(--gray-1000) active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-primary disabled:opacity-50"
+            :disabled="running || isBusy || loading || !draft.agentId"
+            @click="test()"
+          >
+            <svg
+              class="size-3"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M7 4v16l13-8Z" />
+            </svg>
+            <span class="hidden sm:inline">Test run</span>
+          </button>
+          <UDropdownMenu
+            v-model:open="isTestMenuOpen"
+            :items="[
+              [
+                {
+                  label: 'Test success path',
+                  description: 'Agent returns its actual result',
+                  icon: 'i-lucide-circle',
+                  disabled: running || isBusy || !draft.agentId,
+                  onSelect: () => test(),
+                },
+                {
+                  label: 'Simulate error',
+                  description: 'Run the failure action',
+                  icon: 'i-lucide-circle',
+                  disabled: running || isBusy || !draft.agentId,
+                  onSelect: () => test(true),
+                },
+              ],
+              [
+                {
+                  label: 'Edit sample payload',
+                  icon: 'i-lucide-braces',
+                  onSelect: () => (isTestOpen = true),
+                },
+                {
+                  label: 'Save automation',
+                  icon: 'i-lucide-save',
+                  disabled: !dirty || isBusy || loading,
+                  onSelect: () => save(),
+                },
+                {
+                  label: 'Delete automation',
+                  icon: 'i-lucide-trash-2',
+                  color: 'error',
+                  disabled: !id || isBusy || loading,
+                  onSelect: remove,
+                },
+              ],
+            ]"
+            :content="{ align: 'end', sideOffset: 8 }"
+            :ui="{
+              content:
+                'w-[220px] rounded-[10px] border border-(--gray-500) bg-(--gray-300) p-1.5 ring-0',
+              viewport: 'divide-y-0',
+              group: 'p-0',
+              item: 'min-h-11 gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] text-highlighted data-highlighted:before:bg-(--gray-500)',
+              itemLabel: 'font-normal',
+              itemDescription: 'text-xs text-muted',
+            }"
+          >
+            <template #item-leading="{ item }">
+              <span
+                v-if="item.label === 'Test success path' || item.label === 'Simulate error'"
+                class="size-2 shrink-0 rounded-full"
+                :class="item.label === 'Simulate error' ? 'bg-error' : 'bg-success'"
+              />
+              <UIcon
+                v-else-if="item.icon"
+                :name="item.icon"
+                class="size-4 shrink-0 text-muted"
+              />
+            </template>
+            <button
+              type="button"
+              aria-label="Test options"
+              class="grid h-8 w-7 place-items-center rounded-r-lg border-l border-(--gray-800) bg-inverted text-inverted hover:bg-(--gray-1000) focus-visible:outline-2 focus-visible:outline-primary"
+            >
+              <svg
+                class="size-3 transition-transform duration-220 motion-reduce:transition-none"
+                :class="isTestMenuOpen && 'rotate-180'"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                aria-hidden="true"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </button>
+          </UDropdownMenu>
+        </div>
+      </div>
+    </Teleport>
+  </ClientOnly>
+
+  <div class="@container/automation relative flex min-h-0 flex-1 flex-col">
+    <div
+      v-if="loading"
+      class="absolute inset-0 z-30 grid place-items-center bg-(--gray-200)/80"
+    >
+      <UIcon
+        name="i-lucide-loader-circle"
+        class="size-5 animate-spin text-muted"
+      />
+    </div>
+    <div class="relative flex min-h-0 flex-1">
+      <AutomationSidebar
+        v-model:open="sidebarOpen"
+        :automations="sidebarRows"
+        :folders="folderNames"
+        :current-id="id ?? 0"
+        :current-folder="currentFolder"
+        :busy="isBusy || loading"
+        :create-folder="createFolder"
+        @select="switchAutomation"
+        @folder="selectFolder"
+        @create="newAutomation"
+        @remove-folder="removeFolder"
+      />
+      <div class="relative flex min-h-0 min-w-0 flex-1">
+        <UButton
+          v-if="!sidebarOpen"
+          icon="i-lucide-panel-left-open"
+          color="neutral"
+          variant="soft"
+          class="absolute top-3 left-3 z-10 size-8 justify-center rounded-md p-0"
+          aria-label="Open automation folders"
+          aria-controls="automations-folder-sidebar"
+          :aria-expanded="sidebarOpen"
+          @click="sidebarOpen = true"
+        />
+        <AutomationCanvas
+          v-model:positions="draft.positions"
+          :view="view"
+          :selected="selected"
+          :summaries="summaries"
+          :steps="steps"
+          @update:view="updateView"
+          @dragging="isCanvasDragging = $event"
+          @select="selected = $event"
+        />
+        <div
+          v-if="message || loadError"
+          class="absolute top-3 left-1/2 z-30 w-max max-w-[min(480px,calc(100%-24px))] -translate-x-1/2 rounded-lg bg-(--gray-200) shadow-lg"
+        >
+          <UAlert
+            color="error"
+            variant="subtle"
+            icon="i-lucide-circle-alert"
+            :title="message || errorMessage(loadError)"
+            :close="true"
+            :ui="{
+              root: 'items-center gap-2 py-2 pr-2 pl-3',
+              title: 'text-[13px] font-normal text-default',
+              icon: 'size-4',
+            }"
+            @update:open="message = ''"
+          />
+        </div>
+      </div>
+      <aside
+        class="absolute top-0 right-0 bottom-0 z-10 shrink-0 overflow-hidden border-l bg-(--gray-200) transition-[width,border-color] duration-260 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none @min-[700px]/automation:relative"
+        :class="
+          selected || historyOpen
+            ? 'w-[min(340px,100%)] border-(--gray-400)'
+            : 'w-0 border-transparent'
+        "
+        :inert="!selected && !historyOpen"
+        :aria-hidden="!selected && !historyOpen"
+      >
+        <div
+          class="absolute inset-y-0 left-0 w-[340px] max-w-full overflow-hidden transition-[opacity,transform] duration-240 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+          :class="
+            historyOpen
+              ? 'translate-x-0 opacity-100'
+              : 'pointer-events-none translate-x-3 opacity-0'
+          "
+          :inert="!historyOpen"
+          :aria-hidden="!historyOpen"
+        >
+          <AutomationRunsPanel
+            :key="id ?? 'draft'"
+            :runs="history"
+            :total="historyTotal"
+            :has-more="hasMoreRuns"
+            :selected-run="selectedRun"
+            :default-source="defaultRunSource"
+            :loading="runsPending || isLoadingMoreRuns"
+            :running="running"
+            @select="selectRun"
+            @back="backToRuns"
+            @close="closeRuns"
+            @rerun="rerun"
+            @load-more="loadMoreHistory"
+          />
+        </div>
+        <div
+          class="absolute inset-y-0 left-0 flex h-full w-[340px] max-w-full flex-col transition-[opacity,transform] duration-240 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+          :class="inspectorPanelClass"
+          :inert="!selected"
+          :aria-hidden="!selected"
+        >
+          <AutomationInspector
+            v-model="draft"
+            :node="inspectorNode"
+            :agents="agents.rows.value"
+            :events="events"
+            :connected-providers="
+              (integrations?.connections ?? [])
+                .filter((row) => row.enabled)
+                .map((row) => row.provider)
+            "
+            :agents-installed="modules.isInstalled('agents')"
+            :agent-error="agents.error.value ? errorMessage(agents.error.value) : ''"
+            :endpoint="endpoint"
+            :sample="sample"
+            :copied="isCopied"
+            @close="selected = null"
+            @copy="copy"
+          />
+        </div>
+      </aside>
+    </div>
+  </div>
+  <UModal
+    v-model:open="isTestOpen"
+    title="Sample event"
+    description="Test runs execute the agent and its configured actions."
+    :ui="{ content: 'max-w-xl' }"
+  >
+    <template #body>
+      <UTextarea
+        v-model="sample"
+        :rows="12"
+        class="w-full"
+        :ui="{ base: 'font-mono text-xs' }"
+      />
+    </template>
+    <template #footer>
+      <UButton
+        label="Run automation"
+        icon="i-lucide-play"
+        color="neutral"
+        :disabled="!draft.agentId || running || isBusy"
+        @click="test()"
+      />
+    </template>
+  </UModal>
+</template>