WIP - ai process builder codex attempt

frontend/components/ai-processes/NeedInputForm.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="rounded-lg border border-amber-200 bg-amber-50 p-4">
+    <p class="mb-3 text-sm font-semibold text-amber-900">{{ prompt }}</p>
+    <form class="space-y-3" @submit.prevent="submit">
+      <div v-for="field in fields" :key="field.name" class="space-y-1">
+        <label class="text-xs font-medium text-slate-600">
+          {{ field.label }}
+        </label>
+        <input
+          v-model="form[field.name]"
+          class="w-full rounded border border-slate-300 px-3 py-2 text-sm"
+          :type="field.type === 'number' ? 'number' : 'text'"
+          :required="field.required"
+        />
+      </div>
+      <button
+        type="submit"
+        class="rounded bg-slate-900 px-4 py-2 text-sm font-semibold text-white"
+      >
+        Submit
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  schema: Record<string, any>
+  prompt: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'submit', payload: Record<string, unknown>): void
+}>()
+
+const form = reactive<Record<string, string>>({})
+
+const fields = computed(() => {
+  const properties = props.schema?.properties || {}
+  const required = props.schema?.required || []
+  return Object.entries(properties).map(([name, config]: [string, any]) => ({
+    name,
+    label: config.title || name,
+    type: config.type || 'string',
+    required: required.includes(name),
+  }))
+})
+
+const submit = () => {
+  emit('submit', { ...form })
+}
+</script>

frontend/components/ai-processes/ReactFlowIframe.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="rounded-lg border border-slate-200 bg-white shadow">
+    <div class="border-b border-slate-200 px-4 py-3 text-sm font-semibold text-slate-700">
+      Process Graph Editor
+    </div>
+    <iframe
+      class="h-[640px] w-full"
+      :src="editorUrl"
+      title="AI Process Builder"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+const config = useRuntimeConfig()
+const editorUrl = computed(() =>
+  config.public.aiProcessEditorUrl || 'http://localhost:5174'
+)
+</script>