@nuxtagentic/automations 0.0.0-stage → 0.1.0

package/runtime/components/AutomationInspector.vue

@@ -0,0 +1,436 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { AgentSummary } from '@nuxtagentic/agents/runtime/shared/agent-summary'
+import {
+  SUCCESS_ACTIONS,
+  ERROR_ACTIONS,
+  getTargetLabel,
+  type AutomationDraft,
+  type AutomationNode,
+} from '../shared/automation'
+import AutomationNodeIcon from './AutomationNodeIcon.vue'
+
+const draft = defineModel<AutomationDraft>({ required: true })
+const {
+  node,
+  agents,
+  events,
+  connectedProviders,
+  agentsInstalled = true,
+  agentError = '',
+  endpoint = '',
+  sample = '',
+  copied = false,
+} = defineProps<{
+  node: AutomationNode
+  agents: AgentSummary[]
+  events: { id: string; label: string; detail: string }[]
+  connectedProviders: string[]
+  agentsInstalled?: boolean
+  agentError?: string
+  endpoint?: string
+  sample?: string
+  copied?: boolean
+}>()
+defineEmits<{ close: []; copy: [] }>()
+
+const isConnected = (provider: string) => connectedProviders.includes(provider)
+const options = computed(() => {
+  switch (node) {
+    case 'trigger':
+      return events.map((event) => ({
+        value: event.id,
+        label: event.id,
+        detail: event.label,
+      }))
+    case 'agent':
+      return agents.map((agent) => ({
+        value: agent.id,
+        label: agent.name,
+        detail: `${agent.provider} · ${agent.model}${agent.status === 'draft' ? ' · draft, test only' : ''}`,
+      }))
+    case 'success':
+      return SUCCESS_ACTIONS
+    default:
+      return ERROR_ACTIONS
+  }
+})
+const outcome = computed(() => (node === 'success' ? draft.value.success : draft.value.failure))
+const panel = computed(
+  () =>
+    ({
+      trigger: { label: 'Trigger', color: 'text-warning', optionLabel: 'Event' },
+      agent: { label: 'Agent call', color: 'text-info', optionLabel: 'Agent' },
+      success: { label: 'On success', color: 'text-success', optionLabel: 'Action' },
+      error: { label: 'On error', color: 'text-error', optionLabel: 'Then' },
+    })[node],
+)
+const targetPlaceholder = computed(() => {
+  switch (outcome.value.action) {
+    case 'record':
+      return 'description'
+    case 'slack':
+      return 'C0123456789'
+    case 'webhook':
+      return 'https://example.com/agent-result'
+    default:
+      return 'user.email'
+  }
+})
+
+function pick(value: string | number) {
+  if (node === 'trigger') {
+    draft.value.trigger.event = String(value)
+  } else if (node === 'agent') {
+    draft.value.agentId = Number(value)
+  } else {
+    const action = [...SUCCESS_ACTIONS, ...ERROR_ACTIONS].find((option) => option.value === value)
+    if (action) {
+      outcome.value.action = action.value
+    }
+  }
+}
+function isPicked(value: string | number) {
+  switch (node) {
+    case 'trigger':
+      return draft.value.trigger.event === value
+    case 'agent':
+      return draft.value.agentId === value
+    default:
+      return outcome.value.action === value
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div class="flex h-13 shrink-0 items-center gap-2.5 border-b border-(--gray-400) pr-2 pl-4">
+      <span
+        class="grid size-6 place-items-center rounded-[7px] bg-(--gray-500)"
+        :class="panel.color"
+      >
+        <AutomationNodeIcon
+          :node="node"
+          class="size-3.5"
+        />
+      </span>
+      <span class="flex-1 text-[15px]">{{ panel.label }}</span>
+      <UButton
+        icon="i-lucide-x"
+        aria-label="Close inspector"
+        color="neutral"
+        variant="ghost"
+        class="size-8 justify-center rounded-md p-0 text-muted hover:bg-(--gray-400) hover:text-highlighted"
+        :ui="{ leadingIcon: 'size-4' }"
+        @click="$emit('close')"
+      />
+    </div>
+    <div class="flex min-h-0 flex-1 flex-col gap-5 overflow-x-hidden overflow-y-auto p-4">
+      <div
+        v-if="node === 'trigger'"
+        class="flex flex-col gap-2"
+      >
+        <span class="text-xs text-dimmed">Fires on</span>
+        <UTabs
+          v-model="draft.trigger.kind"
+          :items="[
+            { label: 'Event', value: 'event' },
+            { label: 'Webhook', value: 'webhook' },
+            { label: 'Schedule', value: 'schedule' },
+          ]"
+          :content="false"
+          color="neutral"
+          :ui="{
+            list: 'h-[34px] rounded-[9px] border border-(--gray-400) bg-(--gray-100) p-0.5',
+            trigger: 'text-[13px] font-normal data-[state=active]:text-highlighted',
+            indicator: 'rounded-[7px] bg-(--gray-500) ring-0',
+          }"
+        />
+      </div>
+      <template v-if="node === 'trigger' && draft.trigger.kind === 'webhook'">
+        <div class="flex flex-col gap-2">
+          <span class="text-xs text-dimmed">Endpoint</span>
+          <div
+            class="flex h-9 items-center gap-1.5 rounded-lg border border-(--gray-400) bg-(--gray-100) pr-1 pl-2.5"
+          >
+            <span class="font-mono text-[11px] text-warning">POST</span>
+            <span class="min-w-0 flex-1 truncate font-mono text-xs">
+              {{ endpoint || 'Save to generate endpoint' }}
+            </span>
+            <UButton
+              :label="copied ? 'Copied' : 'Copy'"
+              color="neutral"
+              variant="soft"
+              size="xs"
+              class="h-7 rounded-md"
+              :disabled="!endpoint"
+              @click="$emit('copy')"
+            />
+          </div>
+        </div>
+        <UFormField
+          label="Path"
+          :ui="{ label: 'text-xs font-normal text-dimmed' }"
+        >
+          <UInput
+            v-model="draft.trigger.slug"
+            class="w-full"
+            :ui="{
+              base: 'h-9 rounded-lg bg-(--gray-100) px-2.5 font-mono text-[13px] ring-(--gray-400)',
+            }"
+          />
+        </UFormField>
+        <div class="flex flex-col gap-2">
+          <span class="text-xs text-dimmed">Sample payload</span>
+          <pre
+            class="rounded-lg border border-(--gray-400) bg-(--gray-100) p-3 font-mono text-xs leading-[18px] whitespace-pre-wrap text-toned"
+            >{{ sample }}</pre>
+          <span class="text-xs leading-4 text-dimmed">
+            Send a unique Idempotency-Key header with each event.
+          </span>
+        </div>
+      </template>
+      <div
+        v-else-if="node === 'trigger' && draft.trigger.kind === 'schedule'"
+        class="flex flex-col gap-3"
+      >
+        <UFormField
+          label="Cron expression"
+          help="Five fields: minute, hour, day, month, weekday."
+        >
+          <UInput
+            v-model="draft.trigger.cron"
+            placeholder="0 9 * * 1-5"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField
+          label="Time zone"
+          help="Schedules follow this zone, including daylight saving time."
+        >
+          <UInput
+            v-model="draft.trigger.timeZone"
+            placeholder="Europe/Amsterdam"
+            class="w-full"
+          />
+        </UFormField>
+        <p class="text-xs text-muted">
+          Activate and save to schedule the next run. Pausing cancels future runs.
+        </p>
+      </div>
+      <div
+        v-else
+        class="flex flex-col gap-2"
+      >
+        <span class="text-xs text-dimmed">
+          {{ panel.optionLabel }}
+        </span>
+        <div class="flex flex-col gap-0.5">
+          <button
+            v-for="option in options"
+            :key="option.value"
+            type="button"
+            class="flex min-h-12 cursor-pointer items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left transition-colors focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none"
+            :class="isPicked(option.value) ? 'bg-(--gray-400)' : 'hover:bg-(--gray-400)'"
+            :aria-pressed="isPicked(option.value)"
+            @click="pick(option.value)"
+          >
+            <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span
+                class="text-[13px]"
+                :class="[node === 'trigger' && 'font-mono', 'text-highlighted']"
+              >
+                {{ option.label }}
+              </span>
+              <span class="text-xs text-muted">{{ option.detail }}</span>
+            </span>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+              class="size-4 shrink-0 text-highlighted transition-[opacity,transform] duration-200 motion-reduce:transition-none"
+              :class="isPicked(option.value) ? 'scale-100 opacity-100' : 'scale-80 opacity-0'"
+            >
+              <path d="M20 6 9 17l-5-5" />
+            </svg>
+          </button>
+        </div>
+        <UButton
+          v-if="node === 'agent' && (!agents.length || !agentsInstalled)"
+          :to="agentsInstalled ? '/dashboard/agents' : '/dashboard/modules?search=Agents'"
+          :label="agentsInstalled ? 'Create an agent' : 'Install Agents'"
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-bot"
+        />
+        <p
+          v-if="node === 'agent' && agentError"
+          class="text-xs text-error"
+        >
+          {{ agentError }}
+        </p>
+      </div>
+      <template v-if="node === 'agent'">
+        <UFormField
+          label="Instructions"
+          :ui="{ label: 'text-xs font-normal text-dimmed' }"
+        >
+          <UTextarea
+            v-model="draft.instructions"
+            :rows="5"
+            class="w-full"
+            :ui="{
+              base: 'rounded-lg bg-(--gray-100) p-2.5 text-[13px] leading-5 ring-(--gray-400)',
+            }"
+          />
+        </UFormField>
+        <div class="flex flex-col gap-2">
+          <span class="text-xs text-dimmed">Timeout</span>
+          <div class="flex gap-1.5">
+            <button
+              v-for="timeout in [15, 30, 60]"
+              :key="timeout"
+              type="button"
+              class="h-[30px] rounded-full border px-3 text-xs transition-colors duration-140 focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none"
+              :class="
+                draft.timeout === timeout
+                  ? 'border-(--gray-600) bg-(--gray-500) text-highlighted'
+                  : 'border-(--gray-500) text-muted hover:bg-(--gray-400)'
+              "
+              :aria-pressed="draft.timeout === timeout"
+              @click="draft.timeout = timeout"
+            >
+              {{ timeout }}s
+            </button>
+          </div>
+        </div>
+        <div class="flex flex-col gap-2">
+          <span class="text-xs text-dimmed">Acts as</span>
+          <div class="flex gap-1.5">
+            <button
+              v-for="option in [
+                { value: 'owner', label: 'Me' },
+                { value: 'workspace', label: 'Workspace only' },
+              ] as const"
+              :key="option.value"
+              type="button"
+              class="h-[30px] rounded-full border px-3 text-xs transition-colors duration-140 focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none"
+              :class="
+                (draft.runAs ?? 'owner') === option.value
+                  ? 'border-(--gray-600) bg-(--gray-500) text-highlighted'
+                  : 'border-(--gray-500) text-muted hover:bg-(--gray-400)'
+              "
+              :aria-pressed="(draft.runAs ?? 'owner') === option.value"
+              @click="draft.runAs = option.value"
+            >
+              {{ option.label }}
+            </button>
+          </div>
+          <span class="text-xs leading-4 text-dimmed">
+            {{
+              draft.runAs === 'workspace'
+                ? 'Uses only the workspace’s shared connections, never your own accounts.'
+                : 'Uses your connections and the workspace’s shared ones.'
+            }}
+          </span>
+        </div>
+      </template>
+      <div
+        v-if="node === 'error'"
+        class="flex items-center gap-3"
+      >
+        <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+          <span class="text-[13px] text-highlighted">Retries</span>
+          <span class="text-xs text-muted">Call the agent again before handling</span>
+        </span>
+        <div
+          class="flex h-8 shrink-0 items-center rounded-lg border border-(--gray-400) bg-(--gray-100)"
+        >
+          <UButton
+            icon="i-lucide-minus"
+            aria-label="Fewer retries"
+            color="neutral"
+            variant="ghost"
+            class="size-7.5 justify-center rounded-[7px] p-0 text-muted"
+            :ui="{ leadingIcon: 'size-3.5' }"
+            :disabled="draft.retries === 0"
+            @click="draft.retries--"
+          />
+          <span class="min-w-5 text-center text-[13px] tabular-nums text-highlighted">
+            {{ draft.retries }}
+          </span>
+          <UButton
+            icon="i-lucide-plus"
+            aria-label="More retries"
+            color="neutral"
+            variant="ghost"
+            class="size-7.5 justify-center rounded-[7px] p-0 text-muted"
+            :ui="{ leadingIcon: 'size-3.5' }"
+            :disabled="draft.retries === 5"
+            @click="draft.retries++"
+          />
+        </div>
+      </div>
+      <template v-if="(node === 'success' || node === 'error') && outcome.action !== 'none'">
+        <UFormField
+          :label="getTargetLabel(outcome.action)"
+          :ui="{ label: 'text-xs font-normal text-dimmed' }"
+        >
+          <UInput
+            v-model="outcome.target"
+            :placeholder="targetPlaceholder"
+            class="w-full"
+            :ui="{
+              base: 'h-9 rounded-lg bg-(--gray-100) px-2.5 font-mono text-[13px] ring-(--gray-400)',
+            }"
+          />
+        </UFormField>
+        <p
+          v-if="
+            (outcome.action === 'email' || outcome.action === 'notify') && !isConnected('gmail')
+          "
+          class="text-xs leading-4 text-muted"
+        >
+          Connect Gmail and allow Send email in
+          <NuxtLink
+            to="/dashboard/integrations?integration=gmail"
+            class="underline"
+          >
+            Integrations
+          </NuxtLink>
+          .
+        </p>
+        <p
+          v-if="outcome.action === 'slack' && !isConnected('slack')"
+          class="text-xs leading-4 text-muted"
+        >
+          Connect Slack and allow Post messages in
+          <NuxtLink
+            to="/dashboard/integrations?integration=slack"
+            class="underline"
+          >
+            Integrations
+          </NuxtLink>
+          .
+        </p>
+        <p
+          v-if="outcome.action === 'record'"
+          class="text-xs leading-4 text-muted"
+        >
+          Enter a writable field on the triggering record. Webhook payloads need record: { model, id
+          }.
+        </p>
+        <p
+          v-if="outcome.action === 'webhook'"
+          class="text-xs leading-4 text-muted"
+        >
+          Add the destination’s HTTPS origin to NUXT_INTEGRATIONS_WEBHOOK_ORIGINS on the server.
+        </p>
+      </template>
+    </div>
+  </div>
+</template>

package/runtime/components/AutomationNodeIcon.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { AutomationNode } from '../shared/automation'
+
+const { node } = defineProps<{ node: AutomationNode }>()
+const paths: Record<AutomationNode, string> = {
+  trigger: 'M13 2 3 14h9l-1 8 10-12h-9l1-8Z',
+  agent:
+    'M12 8V4H8M6 8h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2ZM2 14h2M20 14h2M15 13v2M9 13v2',
+  success: 'M20 6 9 17l-5-5',
+  error:
+    'M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z',
+}
+</script>
+
+<template>
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <path :d="paths[node]" />
+  </svg>
+</template>