@antelopejs/dms-automation 0.0.1

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

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Handle, Position } from '@vue-flow/core'
+import type { GroupPort } from '../../../composables/useGraphConnect'
+
+interface NodeData {
+	label?: string
+	icon?: string
+	typeId?: string
+	templateId?: string
+	templateName?: string
+	ports?: GroupPort[]
+	config?: { name?: string; [k: string]: unknown }
+	subgraph?: unknown
+}
+
+const props = defineProps<{
+	id: string
+	data: NodeData
+	selected?: boolean
+}>()
+
+const ports = computed<GroupPort[]>(() =>
+	Array.isArray(props.data?.ports) ? props.data.ports : [],
+)
+
+const triggerInPorts = computed(() =>
+	ports.value.filter((p) => p.kind === 'trigger' && p.direction === 'in'),
+)
+const triggerOutPorts = computed(() =>
+	ports.value.filter((p) => p.kind === 'trigger' && p.direction === 'out'),
+)
+const dataInPorts = computed(() =>
+	ports.value.filter((p) => p.kind === 'data' && p.direction === 'in'),
+)
+const dataOutPorts = computed(() =>
+	ports.value.filter((p) => p.kind === 'data' && p.direction === 'out'),
+)
+
+const isTemplateInstance = computed(() => Boolean(props.data?.templateId))
+
+const title = computed(
+	() => props.data?.config?.name ?? props.data?.label ?? 'Group',
+)
+
+const headerIcon = computed(() =>
+	isTemplateInstance.value ? 'i-ph-link' : 'i-ph-package',
+)
+
+import { dataHandleStyle, triggerStyle } from './styles'
+
+// Mirror the convention used by GenericNode: the trigger port named "main"
+// lives on the title bar (left for trigger-in, right for trigger-out). Any
+// other trigger ports spill into the body rows below, interleaved with the
+// data port rows. If no port is named "main", the title bar has no trigger
+// handle on that side — the user picks which port is the "main" one by
+// naming it.
+const mainTriggerIn = computed(
+	() => triggerInPorts.value.find((p) => p.name === 'main') ?? null,
+)
+const mainTriggerOut = computed(
+	() => triggerOutPorts.value.find((p) => p.name === 'main') ?? null,
+)
+const extraTriggerIn = computed(() =>
+	triggerInPorts.value.filter((p) => p.name !== 'main'),
+)
+const extraTriggerOut = computed(() =>
+	triggerOutPorts.value.filter((p) => p.name !== 'main'),
+)
+
+// Body rows: left column shows trigger-in extras followed by data-in ports;
+// right column shows trigger-out extras followed by data-out ports. Each row
+// gets one entry per side (may be null if that side has fewer entries).
+interface LeftRow {
+	kind: 'trigger' | 'data'
+	port: GroupPort
+}
+interface RightRow {
+	kind: 'trigger' | 'data'
+	port: GroupPort
+}
+const leftRows = computed<LeftRow[]>(() => [
+	...extraTriggerIn.value.map((p) => ({ kind: 'trigger' as const, port: p })),
+	...dataInPorts.value.map((p) => ({ kind: 'data' as const, port: p })),
+])
+const rightRows = computed<RightRow[]>(() => [
+	...extraTriggerOut.value.map((p) => ({ kind: 'trigger' as const, port: p })),
+	...dataOutPorts.value.map((p) => ({ kind: 'data' as const, port: p })),
+])
+const bodyRowCount = computed(() =>
+	Math.max(leftRows.value.length, rightRows.value.length),
+)
+const hasAnyPorts = computed(
+	() =>
+		mainTriggerIn.value !== null ||
+		mainTriggerOut.value !== null ||
+		bodyRowCount.value > 0,
+)
+</script>
+
+<template>
+	<div
+		class="dms-automation-node group-node relative min-w-[220px] rounded-lg border bg-default shadow-sm"
+		:class="
+			selected
+				? 'border-primary ring-1 ring-primary'
+				: 'border-default'
+		"
+	>
+		<!-- Header — main trigger-in (left) / main trigger-out (right), mirroring
+		     the GenericNode convention. -->
+		<div
+			class="relative flex items-center gap-2 rounded-t-lg border-b border-default bg-elevated px-3 py-2"
+		>
+			<Handle
+				v-if="mainTriggerIn"
+				:id="`group-trigger-in-${mainTriggerIn.name}`"
+				type="target"
+				:position="Position.Left"
+				:style="triggerStyle"
+			/>
+			<div class="relative">
+				<UIcon :name="headerIcon" class="size-4 text-primary" />
+			</div>
+			<div class="truncate text-sm font-medium text-highlighted">
+				{{ title }}
+			</div>
+			<span
+				v-if="isTemplateInstance"
+				class="ml-auto inline-flex items-center gap-1 rounded-sm bg-primary/10 px-1.5 py-0.5 text-[10px] uppercase tracking-wide text-primary"
+				:title="`Linked to template ${data.templateId}`"
+			>
+				<UIcon name="i-ph-link" class="w-3 h-3" />
+				linked
+			</span>
+			<Handle
+				v-if="mainTriggerOut"
+				:id="`group-trigger-out-${mainTriggerOut.name}`"
+				type="source"
+				:position="Position.Right"
+				:style="triggerStyle"
+			/>
+		</div>
+
+		<!-- Body rows: trigger-in extras + data-in on the left, trigger-out
+		     extras + data-out on the right. -->
+		<div v-if="bodyRowCount > 0" class="py-2 text-xs text-dimmed">
+			<div
+				v-for="i in bodyRowCount"
+				:key="`row-${i - 1}`"
+				class="relative flex items-stretch py-1"
+			>
+				<div class="flex-1 flex items-center gap-1 pl-3">
+					<template v-if="leftRows[i - 1]">
+						<Handle
+							v-if="leftRows[i - 1]!.kind === 'trigger'"
+							:id="`group-trigger-in-${leftRows[i - 1]!.port.name}`"
+							type="target"
+							:position="Position.Left"
+							:style="triggerStyle"
+						/>
+						<Handle
+							v-else
+							:id="`group-data-in-${leftRows[i - 1]!.port.name}`"
+							type="target"
+							:position="Position.Left"
+							:style="dataHandleStyle(leftRows[i - 1]!.port)"
+						/>
+						<span>{{ leftRows[i - 1]!.port.name }}</span>
+					</template>
+				</div>
+				<div class="flex-1 flex items-center justify-end gap-1 pr-3">
+					<template v-if="rightRows[i - 1]">
+						<span>{{ rightRows[i - 1]!.port.name }}</span>
+						<Handle
+							v-if="rightRows[i - 1]!.kind === 'trigger'"
+							:id="`group-trigger-out-${rightRows[i - 1]!.port.name}`"
+							type="source"
+							:position="Position.Right"
+							:style="triggerStyle"
+						/>
+						<Handle
+							v-else
+							:id="`group-data-out-${rightRows[i - 1]!.port.name}`"
+							type="source"
+							:position="Position.Right"
+							:style="dataHandleStyle(rightRows[i - 1]!.port)"
+						/>
+					</template>
+				</div>
+			</div>
+		</div>
+		<div
+			v-else-if="!hasAnyPorts"
+			class="py-2 px-3 text-xs text-dimmed italic"
+		>
+			no ports
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/Editor/nodes/GroupOutputNode.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="out"
+		:data="props.data"
+		:selected="props.selected"
+	/>
+</template>

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

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Handle, Position } from '@vue-flow/core'
+import type { GroupPort } from '../../../composables/useGraphConnect'
+import { dataHandleStyle, triggerStyle } from './styles'
+
+// Shared body for both group sentinels (groupInput / groupOutput). The two
+// are mirror images: `groupInput` exposes the parent group's IN ports as
+// SOURCE handles on the right edge; `groupOutput` exposes its OUT ports as
+// TARGET handles on the left edge. Naming, icon, label, alignment, and
+// empty-state copy all flip on `side`.
+//
+// Sentinel naming:
+//   groupInput-trigger-out-<port> / groupInput-data-out-<port>
+//   groupOutput-trigger-in-<port> / groupOutput-data-in-<port>
+//
+// Sentinels are not user-deletable — enforcement lives in GraphCanvas.vue's
+// onNodesChange handler.
+
+interface NodeData {
+	ports?: GroupPort[]
+}
+
+const props = defineProps<{
+	id: string
+	data: NodeData
+	selected?: boolean
+	side: 'in' | 'out'
+}>()
+
+const isInput = computed(() => props.side === 'in')
+const handleDirection = computed(() => (isInput.value ? 'source' : 'target'))
+const handlePosition = computed(() =>
+	isInput.value ? Position.Right : Position.Left,
+)
+const handlePrefix = computed(() => (isInput.value ? 'groupInput' : 'groupOutput'))
+const handleVerb = computed(() => (isInput.value ? 'out' : 'in'))
+const headerIcon = computed(() => (isInput.value ? 'i-ph-sign-in' : 'i-ph-sign-out'))
+const headerLabel = computed(() =>
+	isInput.value ? 'Group Input' : 'Group Output',
+)
+const emptyText = computed(() =>
+	isInput.value ? 'no input ports' : 'no output ports',
+)
+const rowKeyPrefix = computed(() => (isInput.value ? 'gi-row' : 'go-row'))
+
+const ports = computed<GroupPort[]>(() =>
+	Array.isArray(props.data?.ports) ? props.data.ports : [],
+)
+
+// `groupInput` surfaces the parent's IN ports (they look like sources to
+// the inner subgraph); `groupOutput` surfaces the parent's OUT ports
+// (sinks to the inner subgraph).
+const dataPorts = computed(() =>
+	ports.value.filter((p) => p.kind === 'data' && p.direction === props.side),
+)
+const triggerPorts = computed(() =>
+	ports.value.filter((p) => p.kind === 'trigger' && p.direction === props.side),
+)
+
+const mainTrigger = computed(
+	() => triggerPorts.value.find((p) => p.name === 'main') ?? null,
+)
+const extraTrigger = computed(() =>
+	triggerPorts.value.filter((p) => p.name !== 'main'),
+)
+
+interface BodyRow {
+	kind: 'trigger' | 'data'
+	port: GroupPort
+}
+const bodyRows = computed<BodyRow[]>(() => [
+	...extraTrigger.value.map((p) => ({ kind: 'trigger' as const, port: p })),
+	...dataPorts.value.map((p) => ({ kind: 'data' as const, port: p })),
+])
+
+function handleId(row: BodyRow): string {
+	const subject = row.kind === 'trigger' ? 'trigger' : 'data'
+	return `${handlePrefix.value}-${subject}-${handleVerb.value}-${row.port.name}`
+}
+</script>
+
+<template>
+	<div
+		class="dms-automation-node group-sentinel relative min-w-[180px] rounded-lg border border-dashed bg-elevated/40 opacity-90"
+		:class="[
+			isInput ? 'group-input-sentinel' : 'group-output-sentinel',
+			selected
+				? 'border-primary ring-1 ring-primary'
+				: 'border-default',
+		]"
+	>
+		<!-- Header: main trigger handle on the appropriate edge mirrors
+		     GroupNode title-bar layout. -->
+		<div
+			class="relative flex items-center gap-2 px-3 py-1.5 border-b border-dashed border-default rounded-t-md"
+		>
+			<Handle
+				v-if="!isInput && mainTrigger"
+				:id="`${handlePrefix}-trigger-${handleVerb}-${mainTrigger.name}`"
+				:type="handleDirection"
+				:position="handlePosition"
+				:style="triggerStyle"
+			/>
+			<UIcon :name="headerIcon" class="text-dimmed" />
+			<div class="text-dimmed text-xs font-medium uppercase tracking-wide">
+				{{ headerLabel }}
+			</div>
+			<Handle
+				v-if="isInput && mainTrigger"
+				:id="`${handlePrefix}-trigger-${handleVerb}-${mainTrigger.name}`"
+				:type="handleDirection"
+				:position="handlePosition"
+				:style="triggerStyle"
+			/>
+		</div>
+
+		<!-- Body: trigger extras + data ports, one per row. Layout mirrors
+		     GroupNode.vue: row is `relative` so each Handle (absolute)
+		     anchors to its row's vertical center; an inner flex-1 column
+		     reserves a track for the label so the absolute handle doesn't
+		     crowd it on narrow nodes. -->
+		<div v-if="bodyRows.length > 0" class="py-2 text-xs text-dimmed">
+			<div
+				v-for="(row, idx) in bodyRows"
+				:key="`${rowKeyPrefix}-${row.kind}-${idx}`"
+				class="relative flex items-stretch py-1"
+			>
+				<div
+					class="flex-1 flex items-center gap-1"
+					:class="isInput ? 'justify-end pr-3' : 'pl-3'"
+				>
+					<template v-if="isInput">
+						<span>{{ row.port.name }}</span>
+						<Handle
+							:id="handleId(row)"
+							:type="handleDirection"
+							:position="handlePosition"
+							:style="row.kind === 'trigger' ? triggerStyle : dataHandleStyle(row.port)"
+						/>
+					</template>
+					<template v-else>
+						<Handle
+							:id="handleId(row)"
+							:type="handleDirection"
+							:position="handlePosition"
+							:style="row.kind === 'trigger' ? triggerStyle : dataHandleStyle(row.port)"
+						/>
+						<span>{{ row.port.name }}</span>
+					</template>
+				</div>
+			</div>
+		</div>
+		<div
+			v-else-if="!mainTrigger"
+			class="py-2 px-3 text-xs text-dimmed italic"
+		>
+			{{ emptyText }}
+		</div>
+	</div>
+</template>

package/frontend-vue/app/components/Editor/nodes/styles.ts

@@ -0,0 +1,53 @@
+/**
+ * Shared handle styling for the editor's node Vue components. Trigger and
+ * data handles use a fixed color and size; data handles can additionally
+ * pick a per-JSON-schema-type color via `dataHandleStyle(port)` (keyed off
+ * `port.schema`) for the group/sentinel node variants.
+ */
+
+import type {
+  GroupPort,
+  JsonSchema,
+} from "../../../composables/useGraphConnect";
+
+// Trigger (control-flow) handles use the DMS accent cyan so the procedure's
+// main flow reads as the brand colour; data handles stay emerald (success).
+export const triggerStyle = {
+  background: "#2dc1cf",
+  width: "10px",
+  height: "10px",
+};
+
+export const dataStyle = {
+  background: "#10b981",
+  width: "8px",
+  height: "8px",
+};
+
+// Per-JSON-schema-type color for data handles. Falls back to the
+// emerald baseline (the data-port default) for unknown / missing types.
+const TYPE_COLORS: Record<string, string> = {
+  string: "#10b981", // emerald — matches DataNode default
+  number: "#f59e0b", // amber
+  integer: "#f59e0b", // amber
+  boolean: "#ef4444", // red
+  object: "#8b5cf6", // violet
+  array: "#06b6d4", // cyan
+  null: "#6b7280", // gray
+};
+
+function schemaType(schema: JsonSchema | undefined): string {
+  if (!schema) return "";
+  const t = schema.type;
+  if (Array.isArray(t)) return typeof t[0] === "string" ? (t[0] as string) : "";
+  return typeof t === "string" ? t : "";
+}
+
+export function dataHandleStyle(port: Pick<GroupPort, "schema">): {
+  background: string;
+  width: string;
+  height: string;
+} {
+  const color = TYPE_COLORS[schemaType(port.schema)] ?? "#10b981";
+  return { background: color, width: "8px", height: "8px" };
+}