@antelopejs/dms-automation 0.0.1

package/frontend-vue/app/components/RunDetailDrawer.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type {
+	FireNode,
+	LogEntry,
+	RunDetail,
+} from '../composables/useAutomationRuns'
+import RunFireTree from './RunFireTree.vue'
+
+const props = defineProps<{
+	run: RunDetail
+	procedureName?: string
+}>()
+
+const statusColor = computed<'success' | 'error' | 'warning' | 'neutral'>(
+	() => {
+		if (props.run.status === 'ok') return 'success'
+		if (props.run.status === 'failed') return 'error'
+		return 'neutral'
+	},
+)
+
+const startedAt = computed(() =>
+	props.run.startedAt ? new Date(props.run.startedAt).toLocaleString() : '—',
+)
+
+const durationMs = computed<string>(() => {
+	if (!props.run.startedAt || !props.run.endedAt) return '—'
+	const s = new Date(props.run.startedAt).getTime()
+	const e = new Date(props.run.endedAt).getTime()
+	if (Number.isNaN(s) || Number.isNaN(e)) return '—'
+	return `${e - s} ms`
+})
+
+function prettyJson(text?: string | null): string {
+	if (!text) return ''
+	try {
+		return JSON.stringify(JSON.parse(text), null, 2)
+	} catch {
+		return text
+	}
+}
+
+const payloadJson = computed(() => prettyJson(props.run.triggerPayload))
+const hasPayload = computed(
+	() => !!props.run.triggerPayload && props.run.triggerPayload !== '{}',
+)
+
+const fires = computed<FireNode[]>(() => props.run.logs?.fires ?? [])
+const entries = computed<LogEntry[]>(() => props.run.logs?.entries ?? [])
+const hasLogs = computed(
+	() => fires.value.length > 0 || entries.value.length > 0,
+)
+
+// Index entries and child fires by their parent fire id so the recursive
+// RunFireTree component can do constant-time lookups while rendering.
+const childrenOf = computed<Map<string, FireNode[]>>(() => {
+	const m = new Map<string, FireNode[]>()
+	for (const f of fires.value) {
+		if (f.parentFireId === null) continue
+		let list = m.get(f.parentFireId)
+		if (!list) {
+			list = []
+			m.set(f.parentFireId, list)
+		}
+		list.push(f)
+	}
+	return m
+})
+
+const entriesOf = computed<Map<string, LogEntry[]>>(() => {
+	const m = new Map<string, LogEntry[]>()
+	for (const e of entries.value) {
+		let list = m.get(e.fireId)
+		if (!list) {
+			list = []
+			m.set(e.fireId, list)
+		}
+		list.push(e)
+	}
+	return m
+})
+
+const rootFires = computed<FireNode[]>(() =>
+	fires.value.filter((f) => f.parentFireId === null),
+)
+</script>
+
+<template>
+	<div class="flex flex-col gap-4 p-1">
+		<div class="flex flex-col gap-2">
+			<div class="flex flex-wrap items-center gap-2">
+				<UBadge :color="statusColor" variant="subtle" class="font-semibold">
+					{{ run.status.toUpperCase() }}
+				</UBadge>
+				<code
+					class="rounded-md bg-muted px-2 py-1 font-mono text-sm text-highlighted"
+				>
+					{{ procedureName ?? run.procedureId }}
+				</code>
+			</div>
+			<div class="flex flex-wrap items-center gap-2 text-xs text-dimmed">
+				<span class="tabular-nums">{{ durationMs }}</span>
+				<span>·</span>
+				<span class="tabular-nums">{{ startedAt }}</span>
+				<span v-if="run.triggerNodeId">
+					· {{ $t('dms_automation.runs.detail.trigger') }}
+					<code class="font-mono">{{ run.triggerNodeId }}</code>
+				</span>
+			</div>
+			<p class="text-xs text-muted">
+				{{ $t('dms_automation.runs.detail.runId') }}
+				<code class="font-mono">{{ run._id }}</code>
+			</p>
+		</div>
+
+		<USeparator />
+
+		<section v-if="run.errorMessage" class="flex flex-col gap-2">
+			<h4 class="text-sm font-semibold text-error">
+				{{ $t('dms_automation.runs.detail.error') }}
+			</h4>
+			<pre
+				class="max-h-48 overflow-auto rounded-lg border border-default bg-muted p-3 text-[11px] text-toned"
+			>{{ run.errorMessage }}</pre>
+		</section>
+
+		<section v-if="hasPayload" class="flex flex-col gap-2">
+			<h4 class="text-sm font-semibold text-highlighted">
+				{{ $t('dms_automation.runs.detail.triggerPayload') }}
+			</h4>
+			<pre
+				class="max-h-64 overflow-auto rounded-lg border border-default bg-muted p-3 text-[11px] text-toned"
+			>{{ payloadJson }}</pre>
+		</section>
+
+		<section class="flex flex-col gap-2">
+			<h4 class="text-sm font-semibold text-highlighted">
+				{{ $t('dms_automation.runs.detail.logs') }}
+			</h4>
+			<p v-if="!hasLogs" class="text-xs italic text-dimmed">
+				{{ $t('dms_automation.runs.detail.noLogs') }}
+			</p>
+			<div
+				v-else
+				class="flex flex-col overflow-hidden rounded-lg border border-default"
+			>
+				<RunFireTree
+					v-for="fire in rootFires"
+					:key="fire.id"
+					:fire="fire"
+					:children-of="childrenOf"
+					:entries-of="entriesOf"
+				/>
+			</div>
+		</section>
+
+		<p
+			v-if="!run.errorMessage && !hasPayload && !hasLogs"
+			class="text-xs italic text-dimmed"
+		>
+			{{ $t('dms_automation.runs.detail.none') }}
+		</p>
+	</div>
+</template>

package/frontend-vue/app/components/RunFireTree.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type {
+	FireNode,
+	LogEntry,
+} from '../composables/useAutomationRuns'
+
+const props = defineProps<{
+	fire: FireNode
+	childrenOf: Map<string, FireNode[]>
+	entriesOf: Map<string, LogEntry[]>
+}>()
+
+defineOptions({ name: 'RunFireTree' })
+
+const open = ref(true)
+function toggle() {
+	open.value = !open.value
+}
+
+const ownEntries = computed<LogEntry[]>(
+	() => props.entriesOf.get(props.fire.id) ?? [],
+)
+const childFires = computed<FireNode[]>(
+	() => props.childrenOf.get(props.fire.id) ?? [],
+)
+
+type Item =
+	| { kind: 'entry'; ts: number; seq: number; entry: LogEntry }
+	| { kind: 'fire'; ts: number; seq: number; fire: FireNode }
+
+// Chronological interleave of own log entries and child fires within this
+// fire's scope. Sort by ts first; break ties with `seq` (the executor's
+// monotonic event counter) so sub-millisecond iterations preserve their
+// logical order — without this, "run ok" sometimes appears between
+// iterations because the entry was pushed into the merge first.
+const items = computed<Item[]>(() => {
+	const merged: Item[] = []
+	for (const entry of ownEntries.value) {
+		merged.push({ kind: 'entry', ts: entry.ts, seq: entry.seq, entry })
+	}
+	for (const child of childFires.value) {
+		merged.push({ kind: 'fire', ts: child.ts, seq: child.seq, fire: child })
+	}
+	merged.sort((a, b) => a.ts - b.ts || a.seq - b.seq)
+	return merged
+})
+
+const headerLabel = computed(() => {
+	const f = props.fire
+	const port = f.port ? ` · ${f.port}` : ''
+	const iter =
+		typeof f.iteration === 'number' ? ` · iter ${f.iteration}` : ''
+	return `${f.sourceNodeId}${port}${iter}`
+})
+
+const durationLabel = computed(() => {
+	const f = props.fire
+	if (typeof f.closedAt !== 'number') return '…'
+	return `${f.closedAt - f.ts} ms`
+})
+
+// Track expanded entries by `seq` (executor-emitted, stable across
+// reflows). Index-based keying flips state every time logs arrive in
+// a different order.
+const expandedEntrySeq = ref<Set<number>>(new Set())
+function toggleExpanded(seq: number) {
+	if (expandedEntrySeq.value.has(seq)) expandedEntrySeq.value.delete(seq)
+	else expandedEntrySeq.value.add(seq)
+	expandedEntrySeq.value = new Set(expandedEntrySeq.value)
+}
+
+function iconFor(level: LogEntry['level']): { name: string; class: string } {
+	if (level === 'error') return { name: 'i-ph-x-circle', class: 'text-error' }
+	if (level === 'warn') return { name: 'i-ph-warning', class: 'text-warning' }
+	return { name: 'i-ph-info', class: 'text-muted' }
+}
+
+function formatTs(ms: number): string {
+	return `+${ms} ms`
+}
+
+function nodeLabel(entry: LogEntry): string {
+	if (!entry.nodeId) return 'run'
+	return entry.nodeKind ? `${entry.nodeKind} · ${entry.nodeId}` : entry.nodeId
+}
+
+function prettyValue(v: unknown): string {
+	try {
+		return JSON.stringify(v, null, 2)
+	} catch {
+		return String(v)
+	}
+}
+
+// Short inline summary shown next to the message for `log`-source entries
+// (e.g. `Body alpha`, `Body 42`). Falls back to a compact JSON snippet
+// for arrays/objects; truncates anything longer than 40 chars.
+function inlineSummary(v: unknown): string {
+	if (v === undefined || v === null) return ''
+	if (typeof v === 'string') return v.length > 40 ? `${v.slice(0, 40)}…` : v
+	if (typeof v === 'number' || typeof v === 'boolean') return String(v)
+	try {
+		const j = JSON.stringify(v)
+		return j.length > 40 ? `${j.slice(0, 40)}…` : j
+	} catch {
+		return ''
+	}
+}
+</script>
+
+<template>
+	<div class="flex flex-col">
+		<button
+			type="button"
+			class="grid grid-cols-[auto_auto_1fr_auto] items-center gap-2 px-2 py-1 text-left text-xs hover:bg-elevated border-b border-default"
+			@click="toggle"
+		>
+			<UIcon
+				:name="open ? 'i-ph-caret-down' : 'i-ph-caret-right'"
+				class="text-dimmed"
+			/>
+			<span class="font-mono tabular-nums text-dimmed">{{ formatTs(fire.ts) }}</span>
+			<span class="font-mono text-default truncate">{{ headerLabel }}</span>
+			<span class="font-mono tabular-nums text-dimmed">{{ durationLabel }}</span>
+		</button>
+		<div v-if="open" class="border-l-2 border-default pl-2 ml-2">
+			<template v-for="item in items" :key="`${item.kind}-${item.seq}`">
+				<RunFireTree
+					v-if="item.kind === 'fire'"
+					:fire="item.fire"
+					:children-of="childrenOf"
+					:entries-of="entriesOf"
+				/>
+				<div
+					v-else
+					class="border-b border-default last:border-b-0"
+				>
+					<button
+						type="button"
+						class="grid w-full grid-cols-[auto_auto_auto_1fr_auto] items-center gap-2 px-2 py-1 text-left text-xs hover:bg-elevated"
+						:disabled="item.entry.value === undefined"
+						@click="toggleExpanded(item.seq)"
+					>
+						<span class="font-mono tabular-nums text-dimmed">{{ formatTs(item.entry.ts) }}</span>
+						<UIcon :name="iconFor(item.entry.level).name" :class="iconFor(item.entry.level).class" />
+						<span class="font-mono text-muted truncate">{{ nodeLabel(item.entry) }}</span>
+						<span class="truncate text-default">
+							<span v-if="item.entry.source === 'exec'" class="mr-1 inline-block rounded bg-elevated px-1 py-px text-[10px] uppercase text-dimmed">exec</span>
+							{{ item.entry.message }}
+							<span
+								v-if="item.entry.source === 'log' && inlineSummary(item.entry.value)"
+								class="ml-2 font-mono text-dimmed"
+							>{{ inlineSummary(item.entry.value) }}</span>
+						</span>
+						<UIcon
+							v-if="item.entry.value !== undefined"
+							:name="expandedEntrySeq.has(item.seq) ? 'i-ph-caret-down' : 'i-ph-caret-right'"
+							class="text-dimmed"
+						/>
+					</button>
+					<pre
+						v-if="item.entry.value !== undefined && expandedEntrySeq.has(item.seq)"
+						class="max-h-48 overflow-auto bg-elevated px-3 py-2 text-[11px]"
+					>{{ prettyValue(item.entry.value) }}</pre>
+				</div>
+			</template>
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/RunTraceDrawer.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import type { RunDetail, RunSummary } from '../composables/useAutomationRuns'
+import RunDetailDrawer from './RunDetailDrawer.vue'
+
+// Drawer body for a single run, opened by the timeline display's Trace
+// button via `useDrawer` (which passes `rowData` and `procedureName`). The
+// summary row carries no logs, so we re-fetch the full run by id here.
+// Attribute fallthrough is disabled so extra injected props don't leak
+// onto the DOM.
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+	rowData: RunSummary
+	procedureName?: string
+}>()
+
+const { getRun, listProcedures } = useAutomationRuns()
+
+const run = ref<RunDetail | null>(null)
+const resolvedName = ref<string | undefined>(props.procedureName)
+const loading = ref(true)
+
+onMounted(async () => {
+	const [full] = await Promise.all([
+		// Fall back to the summary row (no logs) if the detail fetch fails, so the
+		// drawer still shows status/timing/error.
+		getRun(props.rowData._id).catch(() => props.rowData as RunDetail),
+		props.procedureName
+			? Promise.resolve()
+			: listProcedures()
+					.then((ps) => {
+						resolvedName.value = ps.find(
+							(p) => p._id === props.rowData.procedureId,
+						)?.name
+					})
+					.catch(() => {
+						/* name lookup is best-effort; falls back to procedureId */
+					}),
+	])
+	run.value = full
+	loading.value = false
+})
+</script>
+
+<template>
+	<div class="p-1">
+		<div v-if="loading" class="flex flex-col gap-3 p-1">
+			<USkeleton class="h-6 w-2/3" />
+			<USkeleton class="h-4 w-1/2" />
+			<USkeleton class="h-32 w-full" />
+		</div>
+		<RunDetailDrawer
+			v-else-if="run"
+			:run="run"
+			:procedure-name="resolvedName"
+		/>
+	</div>
+</template>

package/frontend-vue/app/components/RunsStats.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { formatDuration } from '../utils/automation'
+
+// Page-level header + KPI cards for the Runs page, rendered ABOVE the TableView
+// (registered as `dms-automation-runs-stats`, wired via `static stats` in
+// src/pages/runs.ts). Self-contained: fetches its own stats snapshot. The run
+// list, tabs, filters, export and pagination are owned by the TableView below.
+
+const { $authFetch } = useAuthFetch()
+
+interface StatsSnapshot {
+	health: { '24h': { avgDurationMs: number } }
+	runsPerDay7d: Array<{ day: string; ok: number; failed: number }>
+}
+
+const stats = ref<StatsSnapshot | null>(null)
+const loading = ref(false)
+
+const kpis = computed(() => {
+	const days = stats.value?.runsPerDay7d ?? []
+	const today = days[days.length - 1] ?? { ok: 0, failed: 0 }
+	return [
+		{
+			key: 'today',
+			title: '$dms_automation.runs.kpis.today',
+			value: today.ok + today.failed,
+			icon: 'i-ph-activity',
+		},
+		{
+			key: 'success',
+			title: '$dms_automation.runs.kpis.success',
+			value: today.ok,
+			icon: 'i-ph-check-circle',
+		},
+		{
+			key: 'failed',
+			title: '$dms_automation.runs.kpis.failed',
+			value: today.failed,
+			icon: 'i-ph-x-circle',
+		},
+	]
+})
+
+const avgDurationLabel = computed(() =>
+	formatDuration(stats.value?.health?.['24h']?.avgDurationMs ?? 0),
+)
+
+async function loadStats() {
+	loading.value = true
+	try {
+		stats.value = await $authFetch<StatsSnapshot>('/api/automation/stats')
+	} catch {
+		/* KPIs are best-effort. */
+	} finally {
+		loading.value = false
+	}
+}
+
+onMounted(loadStats)
+</script>
+
+<template>
+	<!--
+		Title / icon / description come from the page's native dms header
+		(src/pages/runs.ts) — only the refresh action lives here.
+	-->
+	<div class="runs-stats flex flex-col gap-5">
+		<section class="flex flex-wrap items-center justify-end gap-4">
+			<UButton
+				color="neutral"
+				variant="ghost"
+				icon="i-ph-arrows-clockwise"
+				:loading="loading"
+				:aria-label="$t('dms_automation.common.refresh')"
+				@click="loadStats"
+			/>
+		</section>
+
+		<!-- KPI stat cards -->
+		<div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+			<template v-if="stats">
+				<DmsKpiCard
+					v-for="k in kpis"
+					:key="k.key"
+					variant="stat"
+					page-id="automation.runs"
+					:component-id="`runs-kpi-${k.key}`"
+					:title="k.title"
+					:icon="k.icon"
+					:static-value="k.value"
+					value-format="compact"
+					:show-delta="false"
+				/>
+				<DmsCard :padded="false" class="flex flex-col justify-between gap-2 p-4">
+					<div class="flex items-center justify-between">
+						<span class="font-mono text-[11px] uppercase tracking-wider text-dimmed">
+							{{ $t('dms_automation.runs.kpis.avgDuration') }}
+						</span>
+						<UIcon name="i-ph-clock" class="size-4 text-dimmed" />
+					</div>
+					<span class="text-2xl font-semibold tabular-nums text-highlighted">
+						{{ avgDurationLabel }}
+					</span>
+				</DmsCard>
+			</template>
+			<template v-else>
+				<DmsCard v-for="i in 4" :key="`skel-${i}`" :padded="false" class="p-5">
+					<USkeleton class="h-10 w-full" />
+				</DmsCard>
+			</template>
+		</div>
+	</div>
+</template>
+
+<style>
+/* The Runs TableView sits directly under these KPI cards. Drop its native card
+   frame (background/border/shadow) so the whole page reads as one flat section;
+   the card's inner padding is kept so the table content stays aligned with the
+   KPI grid above. Scoped to the runs page via the .runs-stats marker. */
+.dms-page-stack:has(.runs-stats) .dms-card.flow-root {
+	background-color: transparent;
+	border-color: transparent;
+	box-shadow: none;
+}
+</style>