phase 7

ui/detection-app/src/panels/PipelineGraphPanel.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { Panel, GraphRenderer } from 'mpr-ui-framework'
 import type { GraphNode, DataSource } from 'mpr-ui-framework'
 import { usePipelineStore } from '../stores/pipeline'
-
-const PIPELINE_NODES = [
-  'extract_frames', 'filter_scenes', 'detect_edges', 'detect_objects', 'preprocess',
-  'run_ocr', 'match_brands', 'escalate_vlm', 'escalate_cloud', 'compile_report',
-]
+import { useStageRegistry } from '../composables/useStageRegistry'
 
 const props = defineProps<{
   source: DataSource
@@ -15,10 +11,16 @@ const props = defineProps<{
 }>()
 
 const pipeline = usePipelineStore()
+const { stageNames, editableStages } = useStageRegistry()
 
-const nodes = ref<GraphNode[]>(
-  PIPELINE_NODES.map((id) => ({ id, status: 'pending' }))
-)
+const nodes = ref<GraphNode[]>([])
+
+// Initialize nodes from registry when it loads
+watch(stageNames, (names) => {
+  if (names.length > 0 && nodes.value.length === 0) {
+    nodes.value = names.map((id) => ({ id, status: 'pending' }))
+  }
+}, { immediate: true })
 
 props.source.on<{ nodes: GraphNode[] }>('graph_update', (e) => {
   nodes.value = e.nodes
@@ -52,6 +54,7 @@ function onOpenStageEditor(stage: string) {
   <Panel title="Pipeline" :status="status">
     <GraphRenderer
       :nodes="nodes"
+      :region-stages="editableStages"
       @open-region-editor="onOpenRegionEditor"
       @open-stage-editor="onOpenStageEditor"
     />