@antelopejs/dms-automation 0.0.1

package/frontend-vue/app/components/Catalog/TypeConfigForm.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import type { JsonSchema } from '../../composables/useGraphConnect'
+
+interface CatalogType {
+	id: string
+	name: string
+	description?: string
+	icon?: string
+}
+
+// `schema` is the JSON schema of the selected type's configuration, read from
+// whichever field the catalog exposes it under (trigger types: `configSchema`,
+// action types: `inputSchema`). Rendered read-only next to the config editor.
+const props = defineProps<{
+	type: CatalogType | null
+	schema?: JsonSchema
+	savedConfig: string | null
+	savedEnabled: boolean
+}>()
+
+const emit = defineEmits<{
+	(e: 'save', payload: { enabled: boolean; config: string }): void
+}>()
+
+const enabled = ref<boolean>(props.savedEnabled)
+const configText = ref<string>(props.savedConfig ?? '{}')
+const parseError = ref<string | null>(null)
+
+watch(
+	() => props.type?.id,
+	() => {
+		enabled.value = props.savedEnabled
+		configText.value = props.savedConfig ?? '{}'
+		parseError.value = null
+	},
+)
+
+watch(
+	() => props.savedConfig,
+	(v) => {
+		if (v !== null && v !== undefined) {
+			configText.value = v
+		}
+	},
+)
+
+watch(
+	() => props.savedEnabled,
+	(v) => {
+		enabled.value = v
+	},
+)
+
+function validate() {
+	try {
+		JSON.parse(configText.value || '{}')
+		parseError.value = null
+		return true
+	} catch (e) {
+		parseError.value = (e as Error).message
+		return false
+	}
+}
+
+const schemaPretty = computed(() =>
+	props.schema ? JSON.stringify(props.schema, null, 2) : '',
+)
+
+function onSave() {
+	if (!validate()) return
+	emit('save', {
+		enabled: enabled.value,
+		config: configText.value || '{}',
+	})
+}
+</script>
+
+<template>
+	<DmsCard
+		v-if="!type"
+		class="flex min-h-[16rem] items-center justify-center text-center"
+	>
+		<div class="flex flex-col items-center gap-3 text-dimmed">
+			<UIcon name="i-ph-faders" class="size-8" />
+			<p class="max-w-xs text-sm">
+				{{ $t('dms_automation.catalog.selectPrompt') }}
+			</p>
+		</div>
+	</DmsCard>
+
+	<DmsCard v-else :padded="false" class="flex flex-col">
+		<div class="flex items-start gap-3 border-b border-default px-5 py-4 sm:px-6">
+			<div
+				class="grid size-10 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary ring ring-primary/20"
+			>
+				<UIcon :name="type.icon || 'i-ph-puzzle-piece'" class="size-5" />
+			</div>
+			<div class="min-w-0 flex-1">
+				<h2 class="truncate text-lg font-semibold text-highlighted">
+					{{ type.name }}
+				</h2>
+				<p v-if="type.description" class="text-sm text-muted">
+					{{ type.description }}
+				</p>
+				<p class="mt-1 font-mono text-xs text-dimmed">{{ type.id }}</p>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-5 px-5 py-4 sm:px-6">
+			<div class="flex items-center justify-between gap-4">
+				<div>
+					<div class="text-sm font-medium text-highlighted">
+						{{ $t('dms_automation.catalog.enabled') }}
+					</div>
+					<div class="text-xs text-muted">
+						{{ $t('dms_automation.catalog.enabledHelp') }}
+					</div>
+				</div>
+				<USwitch v-model="enabled" />
+			</div>
+
+			<div v-if="schemaPretty" class="flex flex-col gap-1.5">
+				<div class="text-sm font-medium text-highlighted">
+					{{ $t('dms_automation.catalog.configSchema') }}
+				</div>
+				<pre
+					class="max-h-48 overflow-auto rounded-lg border border-default bg-muted p-3 font-mono text-xs text-toned"
+				>{{ schemaPretty }}</pre>
+			</div>
+
+			<div class="flex flex-col gap-1.5">
+				<div class="text-sm font-medium text-highlighted">
+					{{ $t('dms_automation.catalog.globalConfig') }}
+				</div>
+				<UTextarea
+					v-model="configText"
+					:rows="10"
+					class="w-full font-mono"
+					autoresize
+					@blur="validate"
+				/>
+			</div>
+
+			<UAlert
+				v-if="parseError"
+				color="error"
+				variant="subtle"
+				icon="i-ph-warning"
+				:title="$t('dms_automation.catalog.invalidJson')"
+				:description="parseError"
+			/>
+
+			<div class="flex justify-end">
+				<UButton
+					color="primary"
+					icon="i-ph-floppy-disk"
+					:disabled="!!parseError"
+					@click="onSave"
+				>
+					{{ $t('dms_automation.catalog.save') }}
+				</UButton>
+			</div>
+		</div>
+	</DmsCard>
+</template>

package/frontend-vue/app/components/Catalog/TypeList.vue

@@ -0,0 +1,198 @@
+<script lang="ts">
+// The `generic` attribute is compiled into the component's module scope, where
+// a type declared inside `<script setup>` does not exist yet. Catalog entries
+// therefore describe themselves here.
+export interface CatalogType {
+	id: string
+	name: string
+	description?: string
+	icon?: string
+}
+</script>
+
+<script setup lang="ts" generic="T extends CatalogType">
+import { computed, ref } from 'vue'
+
+const props = withDefaults(
+	defineProps<{
+		types: T[]
+		modelValue: string | null
+		groupBy?: (t: T) => string
+		title?: string
+		/** Show the inline search box (on by default). */
+		searchable?: boolean
+		/** Placeholder for the search box; falls back to a generic label. */
+		searchPlaceholder?: string
+	}>(),
+	// A bare `boolean` prop defaults to `false` when omitted, which would
+	// silently hide search on every catalog; pin the intended on-by-default.
+	{ searchable: true },
+)
+
+const emit = defineEmits<{
+	(e: 'update:modelValue', value: string): void
+}>()
+
+function select(id: string) {
+	emit('update:modelValue', id)
+}
+
+const isSelected = (id: string) => props.modelValue === id
+
+// Search defaults to on; pass `:searchable="false"` to opt out.
+const searchEnabled = computed(() => props.searchable !== false)
+const query = ref('')
+
+// Case-insensitive substring filter over name / description / id. Catalogs hold
+// at most a few hundred registered types, so a per-keystroke scan is cheap and
+// avoids pulling in a fuzzy-match dependency.
+const visibleTypes = computed<T[]>(() => {
+	const q = query.value.trim().toLowerCase()
+	if (!searchEnabled.value || !q) return props.types
+	return props.types.filter(
+		(t) =>
+			t.name?.toLowerCase().includes(q) ||
+			t.description?.toLowerCase().includes(q) ||
+			t.id?.toLowerCase().includes(q),
+	)
+})
+
+// Group the types by the optional groupBy callback. Preserve insertion order:
+// groups appear in the order of their first-seen member.
+const grouped = computed<Array<{ key: string; items: T[] }> | null>(() => {
+	if (!props.groupBy) return null
+	const order: string[] = []
+	const byKey = new Map<string, T[]>()
+	for (const t of visibleTypes.value) {
+		const key = props.groupBy(t)
+		const bucket = byKey.get(key)
+		if (bucket) {
+			bucket.push(t)
+		} else {
+			byKey.set(key, [t])
+			order.push(key)
+		}
+	}
+	return order.map((key) => ({ key, items: byKey.get(key) as T[] }))
+})
+
+const itemClass = (id: string) =>
+	isSelected(id)
+		? 'bg-primary/10 text-primary ring-1 ring-primary/20'
+		: 'text-toned hover:bg-elevated/60'
+</script>
+
+<template>
+	<DmsCard :padded="false" class="flex flex-col overflow-hidden">
+		<div
+			v-if="title"
+			class="flex items-center justify-between gap-2 border-b border-default px-4 py-3"
+		>
+			<h2 class="text-sm font-semibold text-highlighted">{{ title }}</h2>
+			<UBadge color="neutral" variant="subtle" size="sm" class="tabular-nums">
+				{{ visibleTypes.length }}
+			</UBadge>
+		</div>
+
+		<div
+			v-if="searchEnabled && types.length"
+			class="border-b border-default px-3 py-2"
+		>
+			<UInput
+				v-model="query"
+				:placeholder="searchPlaceholder || $t('dms_automation.catalog.search')"
+				icon="i-ph-magnifying-glass"
+				size="sm"
+				autocomplete="off"
+				class="w-full"
+			/>
+		</div>
+
+		<div class="flex-1 overflow-y-auto p-2">
+			<div
+				v-if="!types || types.length === 0"
+				class="px-3 py-6 text-center text-sm text-dimmed"
+			>
+				{{ $t('dms_automation.catalog.empty') }}
+			</div>
+
+			<div
+				v-else-if="visibleTypes.length === 0"
+				class="px-3 py-6 text-center text-sm text-dimmed"
+			>
+				{{ $t('dms_automation.catalog.noResults') }}
+			</div>
+
+			<template v-else-if="grouped">
+				<div
+					v-for="group in grouped"
+					:key="group.key"
+					class="mb-2 flex flex-col gap-1 last:mb-0"
+				>
+					<div
+						class="px-3 pb-1 pt-2 text-xs font-semibold uppercase tracking-wide text-dimmed"
+					>
+						{{ group.key }}
+					</div>
+					<ul class="flex flex-col gap-1">
+						<li v-for="t in group.items" :key="t.id">
+							<button
+								type="button"
+								class="flex w-full items-start gap-3 rounded-lg px-3 py-2 text-left transition-colors"
+								:class="itemClass(t.id)"
+								@click="select(t.id)"
+							>
+								<UIcon
+									v-if="t.icon"
+									:name="t.icon"
+									class="mt-0.5 size-4 shrink-0"
+									:class="isSelected(t.id) ? 'text-primary' : 'text-dimmed'"
+								/>
+								<div class="min-w-0 flex-1">
+									<div
+										class="truncate text-sm font-medium"
+										:class="isSelected(t.id) ? 'text-primary' : 'text-highlighted'"
+									>
+										{{ t.name }}
+									</div>
+									<div v-if="t.description" class="truncate text-xs text-muted">
+										{{ t.description }}
+									</div>
+								</div>
+							</button>
+						</li>
+					</ul>
+				</div>
+			</template>
+
+			<ul v-else class="flex flex-col gap-1">
+				<li v-for="t in visibleTypes" :key="t.id">
+					<button
+						type="button"
+						class="flex w-full items-start gap-3 rounded-lg px-3 py-2 text-left transition-colors"
+						:class="itemClass(t.id)"
+						@click="select(t.id)"
+					>
+						<UIcon
+							v-if="t.icon"
+							:name="t.icon"
+							class="mt-0.5 size-4 shrink-0"
+							:class="isSelected(t.id) ? 'text-primary' : 'text-dimmed'"
+						/>
+						<div class="min-w-0 flex-1">
+							<div
+								class="truncate text-sm font-medium"
+								:class="isSelected(t.id) ? 'text-primary' : 'text-highlighted'"
+							>
+								{{ t.name }}
+							</div>
+							<div v-if="t.description" class="truncate text-xs text-muted">
+								{{ t.description }}
+							</div>
+						</div>
+					</button>
+				</li>
+			</ul>
+		</div>
+	</DmsCard>
+</template>

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

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { type ListEnvelope, unwrapList } from '../utils/automation'
+import type {
+	DataNodeType,
+	JsonSchema,
+	JsonSchemaProperty,
+} from '../composables/useGraphConnect'
+
+// Catalog-side shape: backend returns DataNodeType minus `evaluate`.
+type DataNodeTypeItem = Omit<DataNodeType, 'inputSchema' | 'outputSchema'> & {
+	inputSchema?: JsonSchema
+	outputSchema?: JsonSchema
+}
+
+type JsonSchemaProp = JsonSchemaProperty
+
+interface PortRow {
+	name: string
+	type: string | string[]
+	description?: string
+}
+
+// `embedded` drops the page-head when this catalog is rendered inside a Library tab.
+defineProps<{ embedded?: boolean }>()
+
+const { $authFetch } = useAuthFetch()
+
+const items = ref<DataNodeTypeItem[]>([])
+const loading = ref(false)
+const loadError = ref<string | null>(null)
+const selectedId = ref<string | null>(null)
+
+async function loadList() {
+	loading.value = true
+	loadError.value = null
+	try {
+		const data = await $authFetch<DataNodeTypeItem[] | ListEnvelope<DataNodeTypeItem>>(
+			'/api/automation/data-node-types',
+		)
+		items.value = unwrapList(data)
+		if (!selectedId.value && items.value[0]) {
+			selectedId.value = items.value[0].id
+		}
+	} catch (e) {
+		loadError.value = (e as Error).message ?? 'Failed to load data node types'
+	} finally {
+		loading.value = false
+	}
+}
+
+await loadList()
+
+const selectedType = computed<DataNodeTypeItem | null>(
+	() => items.value.find((t) => t.id === selectedId.value) ?? null,
+)
+
+function propsOf(schema: JsonSchema | undefined): PortRow[] {
+	const props = schema?.properties ?? {}
+	return Object.entries(props).map(([name, p]) => ({
+		name,
+		type: (p as JsonSchemaProp)?.type ?? 'any',
+		description: (p as JsonSchemaProp)?.description,
+	}))
+}
+
+const inputs = computed<PortRow[]>(() => propsOf(selectedType.value?.inputSchema))
+const outputs = computed<PortRow[]>(() => propsOf(selectedType.value?.outputSchema))
+
+function categoryOf(t: DataNodeTypeItem): string {
+	return t.category ?? 'other'
+}
+</script>
+
+<template>
+	<div :class="embedded ? 'flex flex-col gap-5' : 'flex flex-col gap-6 p-4 sm:p-6'">
+		<section v-if="!embedded" class="flex flex-wrap items-center gap-4">
+			<div
+				class="grid size-11 shrink-0 place-items-center rounded-xl bg-primary/10 text-primary ring ring-primary/20"
+			>
+				<UIcon name="i-ph-cube" class="size-6" />
+			</div>
+			<div class="min-w-0 flex-1">
+				<h1 class="text-2xl font-semibold tracking-tight text-highlighted">
+					{{ $t('dms_automation.data_nodes.title') }}
+				</h1>
+				<p class="text-sm text-muted">
+					{{ $t('dms_automation.data_nodes.description') }}
+				</p>
+			</div>
+			<UButton
+				class="ml-auto"
+				color="neutral"
+				variant="outline"
+				icon="i-ph-arrows-clockwise"
+				:loading="loading"
+				@click="loadList"
+			>
+				{{ $t('dms_automation.data_nodes.refresh') }}
+			</UButton>
+		</section>
+
+		<UAlert
+			v-if="loadError"
+			color="error"
+			variant="subtle"
+			icon="i-ph-warning"
+			:title="$t('dms_automation.data_nodes.loadError')"
+			:description="loadError"
+		/>
+
+		<div
+			class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(280px,340px)_1fr] lg:items-start"
+		>
+			<DmsAutomationTypeList
+				:types="items"
+				:model-value="selectedId"
+				:group-by="categoryOf"
+				:title="$t('dms_automation.data_nodes.listLabel')"
+				class="lg:max-h-[calc(100vh-12rem)]"
+				@update:model-value="selectedId = $event"
+			/>
+
+			<DmsCard v-if="selectedType" :padded="false" class="flex flex-col">
+				<div class="flex items-start gap-3 border-b border-default px-5 py-4 sm:px-6">
+					<div
+						class="grid size-10 shrink-0 place-items-center rounded-lg bg-primary/10 text-primary ring ring-primary/20"
+					>
+						<UIcon :name="selectedType.icon || 'i-ph-cube'" class="size-5" />
+					</div>
+					<div class="min-w-0 flex-1">
+						<h2 class="truncate text-lg font-semibold text-highlighted">
+							{{ selectedType.name }}
+						</h2>
+						<p class="mt-1 font-mono text-xs text-dimmed">{{ selectedType.id }}</p>
+					</div>
+					<UBadge
+						v-if="selectedType.category"
+						color="neutral"
+						variant="subtle"
+						class="shrink-0"
+					>
+						{{ selectedType.category }}
+					</UBadge>
+				</div>
+
+				<div class="flex flex-col gap-6 px-5 py-4 sm:px-6">
+					<p v-if="selectedType.description" class="text-sm text-toned">
+						{{ selectedType.description }}
+					</p>
+
+					<div class="flex flex-col gap-2">
+						<div class="text-sm font-semibold text-highlighted">
+							{{ $t('dms_automation.data_nodes.inputs') }}
+						</div>
+						<div v-if="inputs.length === 0" class="text-sm text-dimmed">
+							{{ $t('dms_automation.data_nodes.noPorts') }}
+						</div>
+						<div
+							v-else
+							class="overflow-hidden rounded-lg border border-default"
+						>
+							<table class="w-full text-sm">
+								<thead>
+									<tr class="border-b border-default bg-muted">
+										<th class="px-4 py-2.5 text-left text-xs font-semibold text-dimmed">
+											{{ $t('dms_automation.data_nodes.col.name') }}
+										</th>
+										<th class="px-4 py-2.5 text-left text-xs font-semibold text-dimmed">
+											{{ $t('dms_automation.data_nodes.col.type') }}
+										</th>
+										<th class="px-4 py-2.5 text-left text-xs font-semibold text-dimmed">
+											{{ $t('dms_automation.data_nodes.col.description') }}
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr
+										v-for="row in inputs"
+										:key="`in-${row.name}`"
+										class="border-b border-default/60 last:border-0"
+									>
+										<td class="px-4 py-2.5 font-mono text-highlighted">
+											{{ row.name }}
+										</td>
+										<td class="whitespace-nowrap px-4 py-2.5 font-mono text-primary">
+											{{ row.type }}
+										</td>
+										<td class="px-4 py-2.5 text-muted">
+											{{ row.description ?? '' }}
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
+
+					<div class="flex flex-col gap-2">
+						<div class="text-sm font-semibold text-highlighted">
+							{{ $t('dms_automation.data_nodes.outputs') }}
+						</div>
+						<div v-if="outputs.length === 0" class="text-sm text-dimmed">
+							{{ $t('dms_automation.data_nodes.noPorts') }}
+						</div>
+						<div
+							v-else
+							class="overflow-hidden rounded-lg border border-default"
+						>
+							<table class="w-full text-sm">
+								<thead>
+									<tr class="border-b border-default bg-muted">
+										<th class="px-4 py-2.5 text-left text-xs font-semibold text-dimmed">
+											{{ $t('dms_automation.data_nodes.col.name') }}
+										</th>
+										<th class="px-4 py-2.5 text-left text-xs font-semibold text-dimmed">
+											{{ $t('dms_automation.data_nodes.col.type') }}
+										</th>
+										<th class="px-4 py-2.5 text-left text-xs font-semibold text-dimmed">
+											{{ $t('dms_automation.data_nodes.col.description') }}
+										</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr
+										v-for="row in outputs"
+										:key="`out-${row.name}`"
+										class="border-b border-default/60 last:border-0"
+									>
+										<td class="px-4 py-2.5 font-mono text-highlighted">
+											{{ row.name }}
+										</td>
+										<td class="whitespace-nowrap px-4 py-2.5 font-mono text-primary">
+											{{ row.type }}
+										</td>
+										<td class="px-4 py-2.5 text-muted">
+											{{ row.description ?? '' }}
+										</td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+			</DmsCard>
+
+			<DmsCard
+				v-else
+				class="flex min-h-[16rem] items-center justify-center text-center"
+			>
+				<div class="flex flex-col items-center gap-3 text-dimmed">
+					<UIcon name="i-ph-cube" class="size-8" />
+					<p class="max-w-xs text-sm">
+						{{ $t('dms_automation.data_nodes.empty') }}
+					</p>
+				</div>
+			</DmsCard>
+		</div>
+	</div>
+</template>