WIP - using deep agent to create dog using workflow

frontend/pages/ai-processes/[id]/edit.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { Save, Play, ArrowLeft } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { useApi } from '@/composables/useApi'
+import { useRouter, useRoute } from 'vue-router'
+
+interface ProcessGraph {
+  id: string
+  name: string
+  description?: string
+  nodes: any[]
+  edges: any[]
+}
+
+const { api } = useApi()
+const router = useRouter()
+const route = useRoute()
+const processId = computed(() => route.params.id === 'new' ? null : String(route.params.id))
+
+const processName = ref('')
+const processDescription = ref('')
+const graphDefinition = ref<ProcessGraph | null>(null)
+const saving = ref(false)
+const loading = ref(true)
+
+const getTenantId = () => {
+  if (!import.meta.client) return 'tenant1'
+  return localStorage.getItem('tenantId') || 'tenant1'
+}
+
+const loadProcess = async () => {
+  if (!processId.value) {
+    loading.value = false
+    return
+  }
+
+  loading.value = true
+  try {
+    const data = await api.get(`/tenants/${getTenantId()}/ai-processes/${processId.value}`)
+    processName.value = data.name
+    processDescription.value = data.description || ''
+    
+    if (data.versions && data.versions.length > 0) {
+      const latestVersion = data.versions[data.versions.length - 1]
+      graphDefinition.value = latestVersion.graphJson
+      
+      // Send graph to iframe
+      sendGraphToEditor(latestVersion.graphJson)
+    }
+  } catch (error) {
+    console.error('Failed to load process:', error)
+    alert('Failed to load process')
+  } finally {
+    loading.value = false
+  }
+}
+
+const sendGraphToEditor = (graph: any) => {
+  const iframe = document.getElementById('process-editor-iframe') as HTMLIFrameElement
+  if (iframe && iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: 'LOAD_GRAPH',
+      payload: graph
+    }, '*')
+  }
+}
+
+const saveProcess = async () => {
+  if (!processName.value.trim()) {
+    alert('Process name is required')
+    return
+  }
+
+  if (!graphDefinition.value) {
+    alert('Please design the process graph first')
+    return
+  }
+
+  saving.value = true
+  try {
+    if (processId.value) {
+      // Update existing process (create new version)
+      await api.post(`/tenants/${getTenantId()}/ai-processes/${processId.value}/versions`, {
+        graph: graphDefinition.value
+      })
+      alert('Process version saved successfully!')
+    } else {
+      // Create new process
+      const result = await api.post(`/tenants/${getTenantId()}/ai-processes`, {
+        name: processName.value,
+        description: processDescription.value,
+        graph: graphDefinition.value
+      })
+      alert('Process created successfully!')
+      router.push(`/ai-processes/${result.id}/edit`)
+    }
+  } catch (error: any) {
+    console.error('Failed to save process:', error)
+    alert(`Save failed: ${error.message || 'Unknown error'}`)
+  } finally {
+    saving.value = false
+  }
+}
+
+const testRun = async () => {
+  if (!processId.value) {
+    alert('Please save the process first')
+    return
+  }
+
+  try {
+    const result = await api.post(`/tenants/${getTenantId()}/ai-processes/${processId.value}/runs`, {
+      input: { test: true }
+    })
+    console.log('Test run result:', result)
+    alert('Test run started! Check the console for details.')
+  } catch (error: any) {
+    alert(`Test failed: ${error.message}`)
+  }
+}
+
+const handleEditorMessage = (event: MessageEvent) => {
+  if (event.data.type === 'GRAPH_UPDATED') {
+    graphDefinition.value = event.data.payload
+  }
+}
+
+onMounted(() => {
+  loadProcess()
+  window.addEventListener('message', handleEditorMessage)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('message', handleEditorMessage)
+})
+</script>
+
+<template>
+  <div class="h-screen flex flex-col">
+    <!-- Header -->
+    <div class="border-b bg-background px-6 py-3 flex items-center justify-between">
+      <div class="flex items-center gap-4 flex-1">
+        <Button variant="ghost" size="icon" @click="router.push('/ai-processes')">
+          <ArrowLeft class="h-4 w-4" />
+        </Button>
+        <div class="flex-1 max-w-md">
+          <Input 
+            v-model="processName" 
+            placeholder="Process Name"
+            class="font-semibold"
+          />
+        </div>
+      </div>
+      <div class="flex items-center gap-2">
+        <Button variant="outline" @click="testRun" :disabled="!processId">
+          <Play class="h-4 w-4 mr-2" />
+          Test Run
+        </Button>
+        <Button @click="saveProcess" :disabled="saving">
+          <Save class="h-4 w-4 mr-2" />
+          {{ saving ? 'Saving...' : 'Save' }}
+        </Button>
+      </div>
+    </div>
+
+    <!-- Process Description -->
+    <div class="border-b bg-background px-6 py-2">
+      <Textarea 
+        v-model="processDescription" 
+        placeholder="Process description (optional)"
+        class="resize-none text-sm"
+        rows="2"
+      />
+    </div>
+
+    <!-- Editor Iframe -->
+    <div class="flex-1 relative">
+      <div v-if="loading" class="absolute inset-0 flex items-center justify-center bg-background/80">
+        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+      <iframe
+        id="process-editor-iframe"
+        src="/ai-processes-editor/index.html"
+        class="w-full h-full border-0"
+        title="Process Editor"
+      />
+    </div>
+  </div>
+</template>

frontend/pages/ai-processes/index.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { Plus, Workflow, Play } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { useApi } from '@/composables/useApi'
+import { useRouter } from 'vue-router'
+
+interface Process {
+  id: string
+  name: string
+  description?: string
+  latestVersion: number
+  createdAt: string
+  versions?: any[]
+}
+
+const { api } = useApi()
+const router = useRouter()
+const processes = ref<Process[]>([])
+const loading = ref(true)
+
+const getTenantId = () => {
+  if (!import.meta.client) return 'tenant1'
+  return localStorage.getItem('tenantId') || 'tenant1'
+}
+
+const loadProcesses = async () => {
+  loading.value = true
+  try {
+    const data = await api.get(`/tenants/${getTenantId()}/ai-processes`)
+    processes.value = data || []
+  } catch (error) {
+    console.error('Failed to load processes:', error)
+  } finally {
+    loading.value = false
+  }
+}
+
+const createNewProcess = () => {
+  router.push('/ai-processes/new')
+}
+
+const editProcess = (processId: string) => {
+  router.push(`/ai-processes/${processId}/edit`)
+}
+
+const testProcess = async (processId: string) => {
+  try {
+    const result = await api.post(`/tenants/${getTenantId()}/ai-processes/${processId}/runs`, {
+      input: { test: true },
+    })
+    console.log('Test run result:', result)
+    alert('Process test started! Check console for details.')
+  } catch (error: any) {
+    alert(`Test failed: ${error.message}`)
+  }
+}
+
+onMounted(() => {
+  loadProcesses()
+})
+</script>
+
+<template>
+  <div class="container mx-auto p-6 space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold tracking-tight">AI Process Builder</h1>
+        <p class="text-muted-foreground mt-1">
+          Create and manage intelligent business process workflows
+        </p>
+      </div>
+      <Button @click="createNewProcess">
+        <Plus class="mr-2 h-4 w-4" />
+        New Process
+      </Button>
+    </div>
+
+    <div v-if="loading" class="flex items-center justify-center py-12">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+    </div>
+
+    <div v-else-if="processes.length === 0" class="text-center py-12">
+      <Workflow class="mx-auto h-12 w-12 text-muted-foreground/50" />
+      <h3 class="mt-4 text-lg font-semibold">No processes yet</h3>
+      <p class="text-muted-foreground mt-1">
+        Get started by creating your first AI-powered business process
+      </p>
+      <Button @click="createNewProcess" class="mt-4">
+        <Plus class="mr-2 h-4 w-4" />
+        Create Process
+      </Button>
+    </div>
+
+    <div v-else class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <Card 
+        v-for="process in processes" 
+        :key="process.id"
+        class="hover:shadow-lg transition-shadow cursor-pointer"
+        @click="editProcess(process.id)"
+      >
+        <CardHeader>
+          <div class="flex items-start justify-between">
+            <Workflow class="h-5 w-5 text-primary" />
+            <Badge variant="secondary">v{{ process.latestVersion }}</Badge>
+          </div>
+          <CardTitle class="mt-2">{{ process.name }}</CardTitle>
+          <CardDescription>{{ process.description || 'No description' }}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="flex gap-2">
+            <Button 
+              size="sm" 
+              variant="outline" 
+              @click.stop="editProcess(process.id)"
+            >
+              Edit
+            </Button>
+            <Button 
+              size="sm" 
+              variant="ghost"
+              @click.stop="testProcess(process.id)"
+            >
+              <Play class="h-3 w-3 mr-1" />
+              Test
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>