@antelopejs/dms-automation 0.0.1

package/frontend-vue/app/components/Editor/ProcedureList.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface ProcedureListItem {
+	_id: string
+	name: string
+	enabled: boolean
+}
+
+const props = defineProps<{
+	procedures: ProcedureListItem[]
+	modelValue: string | null
+}>()
+
+const emit = defineEmits(['update:modelValue', 'create', 'delete'])
+
+const confirmOpen = ref(false)
+const pendingDeleteId = ref<string | null>(null)
+const pendingDeleteName = ref<string>('')
+
+function select(id: string) {
+	const next = props.modelValue === id ? null : id
+	emit('update:modelValue', next)
+}
+
+function askDelete(p: ProcedureListItem) {
+	pendingDeleteId.value = p._id
+	pendingDeleteName.value = p.name
+	confirmOpen.value = true
+}
+
+function confirmDelete() {
+	const id = pendingDeleteId.value
+	if (id) {
+		emit('delete', id)
+	}
+	confirmOpen.value = false
+}
+
+function cancelDelete() {
+	confirmOpen.value = false
+}
+
+// Reset pending state whenever the modal closes (via any means).
+watch(confirmOpen, (open) => {
+	if (!open) {
+		pendingDeleteId.value = null
+		pendingDeleteName.value = ''
+	}
+})
+
+const isSelected = (id: string) => props.modelValue === id
+</script>
+
+<template>
+	<div class="flex flex-col gap-2">
+		<div class="flex flex-wrap items-center justify-between gap-2">
+			<div class="text-sm font-semibold text-highlighted">
+				{{ $t('dms_automation.editor.procedureList.title') }}
+			</div>
+			<UButton
+				size="xs"
+				icon="i-ph-plus"
+				color="primary"
+				variant="soft"
+				class="shrink-0"
+				@click="emit('create')"
+			>
+				{{ $t('dms_automation.editor.procedureList.new') }}
+			</UButton>
+		</div>
+
+		<div
+			v-if="!procedures || procedures.length === 0"
+			class="px-2 py-6 text-center text-sm text-dimmed"
+		>
+			{{ $t('dms_automation.editor.procedureList.empty') }}
+		</div>
+		<ul v-else class="flex flex-col gap-1">
+			<li v-for="p in procedures" :key="p._id">
+				<div
+					class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 transition-colors"
+					:class="
+						isSelected(p._id)
+							? 'bg-primary/10 ring-1 ring-primary/20'
+							: 'hover:bg-elevated/60'
+					"
+				>
+					<button
+						type="button"
+						class="flex min-w-0 flex-1 items-center gap-2 text-left"
+						@click="select(p._id)"
+					>
+						<div class="min-w-0 flex-1">
+							<div
+								class="truncate text-sm font-medium"
+								:class="isSelected(p._id) ? 'text-primary' : 'text-highlighted'"
+							>
+								{{ p.name }}
+							</div>
+						</div>
+						<UBadge
+							:color="p.enabled ? 'success' : 'neutral'"
+							variant="subtle"
+							size="xs"
+						>
+							{{
+								p.enabled
+									? $t('dms_automation.editor.procedureList.enabled')
+									: $t('dms_automation.editor.procedureList.disabled')
+							}}
+						</UBadge>
+					</button>
+					<UButton
+						size="xs"
+						icon="i-ph-trash"
+						color="error"
+						variant="ghost"
+						:aria-label="$t('dms_automation.editor.procedureList.deleteAria')"
+						@click.stop="askDelete(p)"
+					/>
+				</div>
+			</li>
+		</ul>
+
+		<UModal
+			v-model:open="confirmOpen"
+			:title="$t('dms_automation.editor.procedureList.deleteTitle')"
+		>
+			<template #body>
+				<p class="text-muted">
+					{{
+						$t('dms_automation.editor.procedureList.deleteConfirm', {
+							name: pendingDeleteName,
+						})
+					}}
+				</p>
+			</template>
+			<template #footer>
+				<div class="flex w-full justify-end gap-2">
+					<UButton
+						:label="$t('dms_automation.editor.procedureList.cancel')"
+						variant="outline"
+						color="neutral"
+						@click="cancelDelete"
+					/>
+					<UButton
+						:label="$t('dms_automation.editor.procedureList.delete')"
+						color="error"
+						@click="confirmDelete"
+					/>
+				</div>
+			</template>
+		</UModal>
+	</div>
+</template>

package/frontend-vue/app/components/Editor/RunsDrawer.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import RunDetailDrawer from '../RunDetailDrawer.vue'
+import { useAutomationRuns } from '../../composables/useAutomationRuns'
+import { type ListEnvelope, unwrapList } from '../../utils/automation'
+
+interface RunRecord {
+	_id: string
+	procedureId: string
+	startedAt: string | Date
+	endedAt?: string | Date | null
+	status: string
+	errorMessage?: string | null
+	triggerNodeId?: string
+	triggerPayload?: string
+}
+
+const props = defineProps<{
+	procedureId: string | null
+	procedureName?: string
+}>()
+
+const { $authFetch } = useAuthFetch()
+// DMS-themed drawer from the dms layer (dms ≥0.0.26, public API replacing the
+// removed useSheets/addSheet). Opens the run-detail view sliding in from the
+// right; `open` marks the body component raw and generates a containerId.
+const { open: openRunDrawer } = useDrawer()
+const { getRun } = useAutomationRuns()
+const { t } = useI18n()
+
+const PAGE_SIZE = 10
+
+const runs = ref<RunRecord[]>([])
+const loading = ref(false)
+const open = ref(false)
+const error = ref<string | null>(null)
+const loadingDetailId = ref<string | null>(null)
+const detailError = ref<string | null>(null)
+const page = ref(0)
+const hasMore = ref(false)
+
+async function load(target = 0) {
+	if (!props.procedureId) {
+		runs.value = []
+		hasMore.value = false
+		page.value = 0
+		return
+	}
+	const p = Math.max(0, target)
+	loading.value = true
+	error.value = null
+	try {
+		const data = await $authFetch<RunRecord[] | ListEnvelope<RunRecord>>(
+			`/api/automation/procedures/${props.procedureId}/runs?page=${p}&limit=${PAGE_SIZE}`,
+		)
+		// The API over-fetches one row beyond PAGE_SIZE as a next-page probe;
+		// trim it for display and use its presence for `hasMore`, so an
+		// exactly-full final page never enables a dead "Next".
+		const list = unwrapList<RunRecord>(data)
+		runs.value = list.slice(0, PAGE_SIZE)
+		page.value = p
+		hasMore.value = list.length > PAGE_SIZE
+	} catch (e) {
+		error.value = (e as Error).message ?? 'Failed to load runs'
+		runs.value = []
+		hasMore.value = false
+	} finally {
+		loading.value = false
+	}
+}
+
+watch(
+	() => props.procedureId,
+	() => {
+		void load(0)
+	},
+	{ immediate: true },
+)
+
+// Reset to the first page when the panel closes so the trigger badge always
+// reflects the most recent runs, not whatever page was left open.
+watch(open, (isOpen) => {
+	if (!isOpen && page.value !== 0) void load(0)
+})
+
+// Let the editor refresh the list (and the trigger badge) after "Run now".
+defineExpose({ reload: () => load(0) })
+
+function fmtStarted(v: string | Date | null | undefined): string {
+	if (!v) return '—'
+	try {
+		return new Date(v).toLocaleString()
+	} catch {
+		return String(v)
+	}
+}
+
+function fmtDuration(
+	startedAt: string | Date | null | undefined,
+	endedAt: string | Date | null | undefined,
+): string {
+	if (!endedAt || !startedAt) return '—'
+	try {
+		const s = new Date(startedAt).getTime()
+		const e = new Date(endedAt).getTime()
+		if (Number.isNaN(s) || Number.isNaN(e)) return '—'
+		return `${e - s} ms`
+	} catch {
+		return '—'
+	}
+}
+
+function statusIcon(status: string): { name: string; color: string } {
+	if (status === 'ok')
+		return { name: 'i-ph-check-circle', color: 'text-success' }
+	if (status === 'failed')
+		return { name: 'i-ph-x-circle', color: 'text-error' }
+	return { name: 'i-ph-spinner', color: 'text-warning' }
+}
+
+function truncate(s: string | null | undefined, n: number): string {
+	if (!s) return '—'
+	if (s.length <= n) return s
+	return `${s.slice(0, n)}…`
+}
+
+const headerText = computed(() => {
+	if (!props.procedureId) return t('dms_automation.editor.runsDrawer.title')
+	if (loading.value) return t('dms_automation.editor.runsDrawer.loading')
+	return t('dms_automation.editor.runsDrawer.count', { n: runs.value.length })
+})
+
+async function onRefresh() {
+	await load()
+}
+
+async function openDetail(r: RunRecord) {
+	if (loadingDetailId.value === r._id) return
+	loadingDetailId.value = r._id
+	detailError.value = null
+	try {
+		// Bubble fetch errors up to the drawer (instead of pretending the
+		// summary is the detail — the fire tree would just render empty).
+		const full = await getRun(r._id)
+		openRunDrawer({
+			containerId: `dms-automation-run-${r._id}`,
+			title: `${r.status.toUpperCase()} · ${props.procedureName ?? r.procedureId}`,
+			description: new Date(r.startedAt).toLocaleString(),
+			direction: 'right',
+			component: RunDetailDrawer,
+			componentOptions: {
+				run: full,
+				procedureName: props.procedureName,
+			},
+		})
+		// Intentionally keep the runs list open BEHIND the detail. Closing it
+		// here (open.value = false) made the just-opened detail vanish ~a tick
+		// later — tearing down the runs USlideover cascades into the detail
+		// overlay. The detail is a separate dms `useDrawer` (a dismissible:false
+		// UDrawer) closed only via its own control, so leaving the list mounted
+		// lets you inspect runs back to back. Trade-off: while a detail is open
+		// the drawer stacks above the still-mounted list.
+	} catch (e) {
+		const msg = (e as Error).message ?? 'Failed to load run'
+		detailError.value = msg
+		console.error('[dms-automation] failed to open run detail', e)
+	} finally {
+		loadingDetailId.value = null
+	}
+}
+</script>
+
+<template>
+	<UButton
+		icon="i-ph-clock-counter-clockwise"
+		variant="outline"
+		color="neutral"
+		:disabled="!procedureId"
+		@click="open = true"
+	>
+		{{ $t('dms_automation.editor.runsDrawer.title') }}
+		<UBadge
+			v-if="runs.length"
+			:label="hasMore ? `${runs.length}+` : String(runs.length)"
+			color="neutral"
+			variant="subtle"
+			size="sm"
+		/>
+	</UButton>
+
+	<USlideover v-model:open="open" side="right" :title="headerText">
+		<template #body>
+			<div class="flex flex-col gap-2">
+				<div class="flex items-center justify-between">
+					<div class="text-xs text-dimmed">
+						<span v-if="error" class="text-error">{{ error }}</span>
+						<span v-else-if="detailError" class="text-error">{{ detailError }}</span>
+						<span v-else-if="!procedureId">
+							{{ $t('dms_automation.editor.runsDrawer.selectProcedure') }}
+						</span>
+						<span v-else-if="loading">
+							{{ $t('dms_automation.editor.runsDrawer.loadingShort') }}
+						</span>
+						<span v-else>
+							{{ $t('dms_automation.editor.runsDrawer.runCount', { n: runs.length }) }}
+						</span>
+					</div>
+					<UButton
+						size="xs"
+						variant="ghost"
+						color="neutral"
+						icon="i-ph-arrows-clockwise"
+						:loading="loading"
+						:disabled="!procedureId"
+						@click="onRefresh"
+					>
+						{{ $t('dms_automation.editor.runsDrawer.refresh') }}
+					</UButton>
+				</div>
+
+				<div
+					v-if="runs.length > 0"
+					class="overflow-hidden rounded-lg border border-default"
+				>
+					<table class="w-full text-xs">
+						<thead>
+							<tr class="border-b border-default bg-muted">
+								<th class="w-12 px-3 py-2 text-left font-semibold text-dimmed">
+									{{ $t('dms_automation.editor.runsDrawer.cols.status') }}
+								</th>
+								<th class="px-3 py-2 text-left font-semibold text-dimmed">
+									{{ $t('dms_automation.editor.runsDrawer.cols.started') }}
+								</th>
+								<th class="px-3 py-2 text-left font-semibold text-dimmed">
+									{{ $t('dms_automation.editor.runsDrawer.cols.duration') }}
+								</th>
+								<th class="px-3 py-2 text-left font-semibold text-dimmed">
+									{{ $t('dms_automation.editor.runsDrawer.cols.error') }}
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr
+								v-for="r in runs"
+								:key="r._id"
+								class="cursor-pointer border-b border-default/60 transition-colors last:border-0 hover:bg-elevated/40"
+								:class="{ 'opacity-60': loadingDetailId === r._id }"
+								@click="openDetail(r)"
+							>
+								<td class="px-3 py-2">
+									<UIcon
+										v-if="loadingDetailId === r._id"
+										name="i-ph-spinner"
+										class="animate-spin text-dimmed"
+									/>
+									<UIcon
+										v-else
+										:name="statusIcon(r.status).name"
+										:class="statusIcon(r.status).color"
+									/>
+								</td>
+								<td class="whitespace-nowrap px-3 py-2 tabular-nums text-toned">
+									{{ fmtStarted(r.startedAt) }}
+								</td>
+								<td class="whitespace-nowrap px-3 py-2 tabular-nums text-toned">
+									{{ fmtDuration(r.startedAt, r.endedAt) }}
+								</td>
+								<td class="px-3 py-2 text-error">
+									{{ truncate(r.errorMessage, 60) }}
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
+
+				<div
+					v-else-if="!loading && procedureId && !error"
+					class="p-2 text-xs text-dimmed"
+				>
+					{{ $t('dms_automation.editor.runsDrawer.empty') }}
+				</div>
+
+				<div
+					v-if="runs.length > 0"
+					class="flex items-center justify-between gap-3 pt-1"
+				>
+					<UButton
+						size="xs"
+						color="neutral"
+						variant="ghost"
+						icon="i-ph-caret-left"
+						:label="$t('dms_automation.common.previous')"
+						:disabled="page === 0 || loading"
+						@click="load(page - 1)"
+					/>
+					<span class="text-xs tabular-nums text-dimmed">
+						{{ $t('dms_automation.runs.pageLabel', { n: page + 1 }) }}
+					</span>
+					<UButton
+						size="xs"
+						color="neutral"
+						variant="ghost"
+						trailing-icon="i-ph-caret-right"
+						:label="$t('dms_automation.common.next')"
+						:disabled="!hasMore || loading"
+						@click="load(page + 1)"
+					/>
+				</div>
+			</div>
+		</template>
+	</USlideover>
+</template>

package/frontend-vue/app/components/Editor/WiredField.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface Source {
+	node: string
+	port: string
+}
+
+defineProps<{
+	field: string
+	source: Source
+	sourceLabel?: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'unwire'): void
+}>()
+
+function onUnwire() {
+	emit('unwire')
+}
+</script>
+
+<template>
+	<div
+		class="flex items-center gap-2 rounded-lg border border-default bg-elevated px-2 py-1.5"
+	>
+		<UIcon name="i-ph-plugs-connected" class="size-4 text-success" />
+		<span class="min-w-0 flex-1 truncate text-xs text-toned">
+			{{ $t('dms_automation.editor.wiredField.wiredFrom') }}
+			<span class="font-mono font-medium text-highlighted">{{ sourceLabel ?? source.node }}.{{ source.port }}</span>
+		</span>
+		<UButton
+			size="xs"
+			variant="ghost"
+			color="error"
+			icon="i-ph-x"
+			:aria-label="$t('dms_automation.editor.wiredField.unwire')"
+			@click="onUnwire"
+		>
+			{{ $t('dms_automation.editor.wiredField.unwire') }}
+		</UButton>
+	</div>
+</template>

package/frontend-vue/app/components/Editor/nodes/GenericNode.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Handle, Position } from '@vue-flow/core'
+
+interface PortRef {
+	name: string
+	type?: string
+}
+
+interface NodeData {
+	label?: string
+	icon?: string
+	/** Small uppercase badge in the top-right of the header (data nodes). */
+	category?: string
+	/** Render the trigger-in handle on the header's left. Default true. */
+	hasTriggerIn?: boolean
+	/** Render the trigger-out `main` handle on the header's right. Default true. */
+	hasMainTriggerOut?: boolean
+	/**
+	 * Non-main trigger-out ports. Rendered as body rows top-to-bottom,
+	 * paired with `dataIns` left-to-right (per the asserted port
+	 * convention: trigger ports first, no gap from data-ins on same row).
+	 */
+	triggerOuts?: string[]
+	/** Data inputs. Left-aligned. Paired with trigger-outs / data-outs. */
+	dataIns?: PortRef[]
+	/** Data outputs. Right-aligned. Render below all trigger-outs. */
+	dataOuts?: PortRef[]
+}
+
+const props = defineProps<{
+	id: string
+	data: NodeData
+	selected?: boolean
+}>()
+
+const hasTriggerIn = computed(() => props.data?.hasTriggerIn !== false)
+const hasMainTriggerOut = computed(() => props.data?.hasMainTriggerOut !== false)
+const triggerOuts = computed<string[]>(() => props.data?.triggerOuts ?? [])
+const dataIns = computed<PortRef[]>(() => props.data?.dataIns ?? [])
+const dataOuts = computed<PortRef[]>(() => props.data?.dataOuts ?? [])
+
+import { dataStyle, triggerStyle } from './styles'
+
+interface BodyRow {
+	leftDataIn?: PortRef
+	rightTriggerOut?: string
+	rightDataOut?: PortRef
+}
+
+// Body layout (per the convention):
+//   Phase 1: each trigger-out, top-to-bottom, paired with the next available
+//            data-in on the same row (left-aligned). No gap.
+//   Phase 2: data-outs (and any leftover data-ins) row-by-row, action-style
+//            (input[i] left, output[i] right), filling remaining space.
+const rows = computed<BodyRow[]>(() => {
+	const r: BodyRow[] = []
+	const ti = [...triggerOuts.value]
+	const di = [...dataIns.value]
+	const dout = [...dataOuts.value]
+
+	// Phase 1
+	while (ti.length > 0) {
+		r.push({
+			leftDataIn: di.shift(),
+			rightTriggerOut: ti.shift(),
+		})
+	}
+
+	// Phase 2 — pair any leftover data-ins with data-outs.
+	const remaining = Math.max(di.length, dout.length)
+	for (let i = 0; i < remaining; i++) {
+		r.push({ leftDataIn: di[i], rightDataOut: dout[i] })
+	}
+
+	return r
+})
+</script>
+
+<template>
+	<div
+		class="dms-automation-node generic-node relative min-w-[180px] rounded-lg border bg-default shadow-sm"
+		:class="
+			selected
+				? 'border-primary ring-1 ring-primary'
+				: 'border-default'
+		"
+	>
+		<div
+			class="relative flex items-center gap-2 rounded-t-lg border-b border-default bg-elevated px-3 py-2"
+		>
+			<Handle
+				v-if="hasTriggerIn"
+				id="trigger-in"
+				type="target"
+				:position="Position.Left"
+				:style="triggerStyle"
+			/>
+			<UIcon
+				:name="data.icon || 'i-ph-circle'"
+				class="size-4 text-primary"
+			/>
+			<div class="truncate text-sm font-medium text-highlighted">
+				{{ data.label || 'Node' }}
+			</div>
+			<div
+				v-if="data.category"
+				class="ml-auto text-[10px] uppercase text-dimmed"
+			>
+				{{ data.category }}
+			</div>
+			<Handle
+				v-if="hasMainTriggerOut"
+				id="trigger-out-main"
+				type="source"
+				:position="Position.Right"
+				:style="triggerStyle"
+			/>
+		</div>
+
+		<div v-if="rows.length > 0" class="py-2 text-xs text-dimmed">
+			<div
+				v-for="(row, i) in rows"
+				:key="i"
+				class="relative flex items-stretch py-1"
+			>
+				<div class="flex-1 flex items-center gap-1 pl-3">
+					<template v-if="row.leftDataIn">
+						<Handle
+							:id="`data-in-${row.leftDataIn.name}`"
+							type="target"
+							:position="Position.Left"
+							:style="dataStyle"
+						/>
+						<span>{{ row.leftDataIn.name }}</span>
+					</template>
+				</div>
+				<div class="flex-1 flex items-center justify-end gap-1 pr-3">
+					<template v-if="row.rightTriggerOut">
+						<span>{{ row.rightTriggerOut }}</span>
+						<Handle
+							:id="`trigger-out-${row.rightTriggerOut}`"
+							type="source"
+							:position="Position.Right"
+							:style="triggerStyle"
+						/>
+					</template>
+					<template v-else-if="row.rightDataOut">
+						<span>{{ row.rightDataOut.name }}</span>
+						<Handle
+							:id="`data-out-${row.rightDataOut.name}`"
+							type="source"
+							:position="Position.Right"
+							:style="dataStyle"
+						/>
+					</template>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/Editor/nodes/GroupInputNode.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { GroupPort } from '../../../composables/useGraphConnect'
+import GroupSentinel from './GroupSentinel.vue'
+
+const props = defineProps<{
+	id: string
+	data: { ports?: GroupPort[] }
+	selected?: boolean
+}>()
+</script>
+
+<template>
+	<GroupSentinel
+		:id="props.id"
+		side="in"
+		:data="props.data"
+		:selected="props.selected"
+	/>
+</template>