@nuxtagentic/automations 0.0.0-stage → 0.1.0

package/runtime/components/AutomationRunsPanel.vue

@@ -0,0 +1,475 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
+import type { InferSelect } from '@cloudconfig/core'
+import type { AutomationsConfig } from '../../schema'
+import type { AutomationNode, AutomationStep } from '../shared/automation'
+import {
+  formatElapsedDuration,
+  getStatusColor,
+  formatStepDuration,
+  getStepLogs,
+  getStepStatus,
+} from '../shared/automation-run'
+import AutomationStatusIcon from './AutomationStatusIcon.vue'
+
+type Run = InferSelect<AutomationsConfig, 'automationRun'>
+const { runs, total, hasMore, selectedRun, defaultSource, loading, running } = defineProps<{
+  runs: Run[]
+  total: number
+  hasMore: boolean
+  selectedRun: Run | null
+  defaultSource: string
+  loading: boolean
+  running: boolean
+}>()
+const emit = defineEmits<{
+  select: [id: number]
+  back: []
+  close: []
+  rerun: [run: Run]
+  loadMore: []
+}>()
+// Retain the detail while the track slides back to the list.
+const lastRun = shallowRef<Run | null>(selectedRun)
+const detail = computed(() => selectedRun ?? lastRun.value)
+const expanded = ref<Partial<Record<AutomationNode, boolean>>>({})
+const copyLabel = ref('Copy')
+let copyTimer: ReturnType<typeof setTimeout> | undefined
+watch(
+  () => selectedRun,
+  (run) => {
+    if (!run) {
+      return
+    }
+    if (lastRun.value?.id !== run.id) {
+      expanded.value = {}
+      copyLabel.value = 'Copy'
+    }
+    lastRun.value = run
+  },
+  { immediate: true },
+)
+onBeforeUnmount(() => clearTimeout(copyTimer))
+function selectRun(id: number) {
+  expanded.value = {}
+  emit('select', id)
+}
+const nodes = [
+  { id: 'trigger', label: 'Trigger' },
+  { id: 'agent', label: 'Agent call' },
+  { id: 'success', label: 'On success' },
+  { id: 'error', label: 'On error' },
+] as const
+const steps = computed(() =>
+  nodes.map((node) => {
+    const step = (detail.value?.steps as AutomationStep[] | undefined)?.find(
+      (entry) => entry.node === node.id,
+    )
+    const run = detail.value
+    const details: Record<string, string> = {
+      ...(node.id === 'trigger' && run ? { 'Event ID': run.eventId } : {}),
+      ...(node.id === 'agent' && run ? { Attempts: String(run.attempts) } : {}),
+      ...step?.details,
+      ...(step?.startedAt ? { Started: new Date(step.startedAt).toLocaleString() } : {}),
+      ...(step?.finishedAt ? { Finished: new Date(step.finishedAt).toLocaleString() } : {}),
+    }
+    return { ...node, step, details, logs: getStepLogs(step), status: getStepStatus(step) }
+  }),
+)
+function statusLabel(status: Run['status']) {
+  return {
+    queued: 'Queued',
+    running: 'Running',
+    waiting: 'Waiting for approval',
+    succeeded: 'Succeeded',
+    failed: 'Failed',
+  }[status]
+}
+function time(value: string | null | undefined) {
+  if (!value) {
+    return '—'
+  }
+  return new Date(value).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  })
+}
+function duration(run: Run) {
+  return formatElapsedDuration(run.startedAt, run.finishedAt) || '…'
+}
+function ago(value: string | null | undefined) {
+  if (!value) {
+    return 'Just now'
+  }
+  const minutes = Math.max(0, Math.floor((Date.now() - new Date(value).getTime()) / 60000))
+  if (minutes < 1) {
+    return 'Just now'
+  }
+  if (minutes < 60) {
+    return `${minutes}m ago`
+  }
+  if (minutes < 1440) {
+    return `${Math.floor(minutes / 60)}h ago`
+  }
+  return `${Math.floor(minutes / 1440)}d ago`
+}
+function isTest(run: Run) {
+  return run.eventId.replace(/^\d+:/, '').startsWith('test:')
+}
+function source(run: Run, withTest = false) {
+  const trigger = (run.steps as AutomationStep[]).find((step) => step.node === 'trigger')
+  const event =
+    trigger?.summary ??
+    trigger?.message.match(/^Received (.+)\.$/)?.[1] ??
+    (run.eventId.replace(/^\d+:/, '').startsWith('webhook:') ? 'Webhook' : defaultSource)
+  return `${withTest && isTest(run) ? 'Test · ' : ''}${event}`
+}
+function summary(node: AutomationNode, step: AutomationStep | undefined) {
+  if (step?.status === 'skipped') {
+    return 'Skipped'
+  }
+  if (step?.summary) {
+    return step.summary
+  }
+  if (node === 'trigger' && detail.value) {
+    return source(detail.value)
+  }
+  return step?.message ?? (detail.value?.finishedAt ? 'Skipped' : 'Waiting')
+}
+function elapsed(at: string, startedAt: string | null) {
+  if (!startedAt) {
+    return time(at)
+  }
+  const seconds = (new Date(at).getTime() - new Date(startedAt).getTime()) / 1000
+  return `${seconds >= 0 ? '+' : ''}${seconds.toFixed(2)}`
+}
+function toggleStep(node: AutomationNode) {
+  expanded.value = { ...expanded.value, [node]: !expanded.value[node] }
+}
+function getLogColor({ status, level }: NonNullable<AutomationStep['logs']>[number]) {
+  if (status === 'failed' || level === 'error') {
+    return 'text-error'
+  }
+  return level === 'warning' ? 'text-warning' : 'text-(--gray-1000)'
+}
+async function copyOutput() {
+  if (!detail.value?.output) {
+    return
+  }
+  clearTimeout(copyTimer)
+  try {
+    await navigator.clipboard.writeText(detail.value.output)
+    copyLabel.value = 'Copied'
+  } catch {
+    copyLabel.value = 'Copy failed'
+  }
+  copyTimer = setTimeout(() => {
+    copyLabel.value = 'Copy'
+  }, 1400)
+}
+</script>
+
+<template>
+  <div class="h-full w-full overflow-hidden">
+    <div
+      class="flex h-full w-[200%] transition-transform duration-260 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+      :class="selectedRun ? '-translate-x-1/2' : 'translate-x-0'"
+    >
+      <section
+        class="flex h-full w-1/2 min-w-0 flex-col"
+        :inert="!!selectedRun"
+      >
+        <div class="flex h-13 shrink-0 items-center gap-2.5 border-b border-(--gray-400) pr-2 pl-4">
+          <span class="text-[15px] text-highlighted">Runs</span>
+          <span class="flex-1 text-xs text-dimmed">
+            {{ Math.max(total, runs.length) }}
+            {{ Math.max(total, runs.length) === 1 ? 'run' : 'runs' }}
+          </span>
+          <UButton
+            icon="i-lucide-x"
+            aria-label="Close runs"
+            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-0.5 overflow-x-hidden overflow-y-auto p-2 pb-[120px]"
+        >
+          <div
+            v-if="loading && !runs.length"
+            class="flex justify-center p-8"
+          >
+            <AutomationStatusIcon
+              status="running"
+              class="size-4"
+            />
+          </div>
+          <p
+            v-else-if="!runs.length"
+            class="px-4 py-8 text-center text-[13px] text-dimmed"
+          >
+            No runs yet. Use Test run to try it.
+          </p>
+          <button
+            v-for="run in runs"
+            :key="run.id"
+            type="button"
+            class="flex min-h-14 w-full shrink-0 items-center gap-3 rounded-lg px-2.5 py-2 text-left transition-colors duration-160 hover:bg-(--gray-400) active:scale-[0.98] focus-visible:outline-2 focus-visible:outline-primary motion-reduce:transition-none"
+            :class="selectedRun?.id === run.id && 'bg-(--gray-400)'"
+            @click="selectRun(run.id)"
+          >
+            <AutomationStatusIcon
+              :status="run.status"
+              class="size-4"
+            />
+            <span class="flex min-w-0 flex-1 flex-col gap-0.5">
+              <span class="flex items-center gap-2 text-sm leading-[18px] text-highlighted">
+                Run #{{ run.id }}
+                <span
+                  v-if="isTest(run)"
+                  class="flex h-[18px] items-center rounded-[5px] border border-(--gray-500) px-1.5 text-[11px] text-muted"
+                >
+                  Test
+                </span>
+              </span>
+              <span class="truncate text-xs leading-4 text-dimmed">
+                {{ statusLabel(run.status) }}{{ run.finishedAt ? ` · ${duration(run)}` : '' }} ·
+                {{ source(run) }}
+              </span>
+            </span>
+            <span class="shrink-0 text-xs tabular-nums text-dimmed">{{ ago(run.startedAt) }}</span>
+          </button>
+          <UButton
+            v-if="hasMore"
+            label="Load more runs"
+            color="neutral"
+            variant="ghost"
+            class="mt-2 w-full justify-center text-xs"
+            :loading="loading"
+            @click="emit('loadMore')"
+          />
+        </div>
+      </section>
+      <section
+        class="flex h-full w-1/2 min-w-0 flex-col"
+        :inert="!selectedRun"
+      >
+        <div class="flex h-13 shrink-0 items-center gap-1.5 border-b border-(--gray-400) px-2">
+          <UButton
+            icon="i-lucide-chevron-left"
+            aria-label="All runs"
+            title="All runs"
+            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('back')"
+          />
+          <span class="text-[15px] text-highlighted">Run #{{ detail?.id }}</span>
+          <span
+            v-if="detail"
+            class="flex min-w-0 flex-1 items-center gap-1.5 text-xs"
+            :class="getStatusColor(detail.status)"
+          >
+            <AutomationStatusIcon
+              :status="detail.status"
+              class="size-3.5"
+            />
+            {{ statusLabel(detail.status) }}
+          </span>
+          <UButton
+            icon="i-lucide-x"
+            aria-label="Close runs"
+            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
+          v-if="detail"
+          class="flex min-h-0 flex-1 flex-col gap-6 overflow-x-hidden overflow-y-auto p-4 pb-[120px]"
+        >
+          <div class="flex flex-wrap gap-x-3 gap-y-1.5 text-xs">
+            <span
+              class="flex flex-col gap-0.5"
+              :title="detail.startedAt ? new Date(detail.startedAt).toLocaleString() : undefined"
+            >
+              <span class="text-dimmed">Started</span>
+              <span class="tabular-nums text-highlighted">{{ time(detail.startedAt) }}</span>
+            </span>
+            <span
+              class="flex flex-col gap-0.5"
+              :title="
+                detail.finishedAt
+                  ? `Finished: ${new Date(detail.finishedAt).toLocaleString()}`
+                  : undefined
+              "
+            >
+              <span class="text-dimmed">Duration</span>
+              <span class="tabular-nums text-highlighted">{{ duration(detail) }}</span>
+            </span>
+            <span class="flex min-w-0 flex-col gap-0.5">
+              <span class="text-dimmed">Source</span>
+              <span class="break-words font-mono text-highlighted">{{ source(detail, true) }}</span>
+            </span>
+          </div>
+          <div class="flex flex-col gap-2">
+            <span class="text-xs text-dimmed">Steps</span>
+            <div class="flex flex-col">
+              <div
+                v-for="(item, index) in steps"
+                :key="item.id"
+                class="grid grid-cols-[24px_minmax(0,1fr)] gap-x-2.5 transition-opacity duration-240 motion-reduce:transition-none"
+                :class="(!item.step || item.step.status === 'skipped') && 'opacity-50'"
+              >
+                <div class="flex flex-col items-center pt-2.5">
+                  <AutomationStatusIcon
+                    :status="item.status ?? 'skipped'"
+                    class="size-4"
+                  />
+                  <span
+                    v-if="index < steps.length - 1"
+                    class="mt-1.5 w-px flex-1 bg-(--gray-500)"
+                  />
+                </div>
+                <div class="min-w-0 pb-1.5">
+                  <button
+                    type="button"
+                    class="-ml-1.5 flex min-h-9 w-full items-center gap-2 rounded-md px-1.5 py-1 text-left enabled:hover:bg-(--gray-300) focus-visible:outline-2 focus-visible:outline-primary disabled:cursor-default"
+                    :disabled="!item.logs.length"
+                    :aria-expanded="!!expanded[item.id]"
+                    @click="toggleStep(item.id)"
+                  >
+                    <span class="flex min-w-0 flex-1 flex-col gap-px">
+                      <span class="text-[13px] text-highlighted">{{ item.label }}</span>
+                      <span class="truncate text-xs text-muted">
+                        {{ summary(item.id, item.step) }}
+                      </span>
+                    </span>
+                    <span class="shrink-0 text-xs tabular-nums text-dimmed">
+                      {{ formatStepDuration(item.step) }}
+                    </span>
+                    <UIcon
+                      name="i-lucide-chevron-down"
+                      class="size-3.5 shrink-0 text-dimmed transition-[transform,opacity] duration-220 motion-reduce:transition-none"
+                      :class="[expanded[item.id] && 'rotate-180', !item.logs.length && 'opacity-0']"
+                    />
+                  </button>
+                  <div
+                    class="grid transition-[grid-template-rows] duration-240 ease-[cubic-bezier(.2,0,0,1)] motion-reduce:transition-none"
+                    :class="expanded[item.id] ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
+                  >
+                    <div
+                      class="min-h-0 overflow-hidden"
+                      :inert="!expanded[item.id]"
+                    >
+                      <div
+                        class="mt-1 mb-1.5 flex flex-col gap-1 rounded-lg border border-(--gray-400) bg-(--gray-100) px-2.5 py-2 font-mono text-[11px] leading-[17px]"
+                      >
+                        <div
+                          v-for="(log, logIndex) in item.logs"
+                          :key="logIndex"
+                          class="grid grid-cols-[42px_minmax(0,1fr)] gap-2"
+                        >
+                          <span
+                            class="tabular-nums text-dimmed"
+                            :title="log.at"
+                          >
+                            {{ elapsed(log.at, detail.startedAt) }}
+                          </span>
+                          <span
+                            class="break-words"
+                            :class="getLogColor(log)"
+                          >
+                            {{ log.message }}
+                          </span>
+                        </div>
+                        <dl
+                          v-if="Object.keys(item.details).length"
+                          class="mt-1 flex flex-col gap-1 border-t border-(--gray-400) pt-2"
+                        >
+                          <div
+                            v-for="(value, label) in item.details"
+                            :key="label"
+                            class="flex flex-col"
+                          >
+                            <dt class="text-dimmed">{{ label }}</dt>
+                            <dd class="m-0 break-words whitespace-pre-wrap text-(--gray-1000)">
+                              {{ value }}
+                            </dd>
+                          </div>
+                        </dl>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="detail.output"
+            class="flex flex-col gap-2"
+          >
+            <span class="text-xs text-dimmed">Agent response</span>
+            <div class="overflow-hidden rounded-[10px] border border-(--gray-400)">
+              <div
+                class="px-3.5 py-3 text-[13px] leading-5 break-words whitespace-pre-wrap text-default [text-wrap:pretty]"
+              >
+                {{ detail.output }}
+              </div>
+              <div class="border-t border-(--gray-400) p-2">
+                <UButton
+                  :label="copyLabel"
+                  color="neutral"
+                  variant="soft"
+                  class="h-7 rounded-md bg-(--gray-400) px-2.5 text-xs font-normal text-highlighted hover:bg-(--gray-500)"
+                  @click="copyOutput"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            v-if="detail.error"
+            class="flex flex-col gap-2"
+          >
+            <span class="text-xs text-dimmed">Error</span>
+            <div
+              class="flex items-start gap-2.5 rounded-[10px] border border-(--gray-400) px-3 py-2.5"
+            >
+              <UIcon
+                name="i-lucide-circle-alert"
+                class="size-3.5 shrink-0 text-error"
+              />
+              <span class="break-words font-mono text-xs leading-[18px] text-highlighted">
+                {{ detail.error }}
+              </span>
+            </div>
+          </div>
+          <div class="flex flex-col gap-2">
+            <span class="text-xs text-dimmed">Input</span>
+            <pre
+              class="m-0 rounded-lg border border-(--gray-400) bg-(--gray-100) p-3 font-mono text-xs leading-[18px] break-words whitespace-pre-wrap text-(--gray-1000)"
+              >{{ JSON.stringify(detail.payload, null, 2) ?? '{}' }}</pre>
+          </div>
+          <UButton
+            label="Re-run with this input"
+            icon="i-lucide-rotate-ccw"
+            color="neutral"
+            variant="outline"
+            class="h-8 self-start gap-1.5 rounded-lg px-3 text-[13px] font-normal text-highlighted ring-(--gray-500) hover:bg-(--gray-400) active:scale-[0.98]"
+            :ui="{ leadingIcon: 'size-[13px]' }"
+            :disabled="running"
+            @click="emit('rerun', detail)"
+          />
+        </div>
+      </section>
+    </div>
+  </div>
+</template>