phase 9

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, watch, computed } from 'vue'
 import { Panel, GraphRenderer } from 'mpr-ui-framework'
-import type { GraphNode, DataSource } from 'mpr-ui-framework'
+import type { GraphNode, GraphMode, DataSource } from 'mpr-ui-framework'
 import { usePipelineStore } from '../stores/pipeline'
 import { useStageRegistry } from '../composables/useStageRegistry'
 
@@ -15,6 +15,13 @@ const { stageNames, editableStages } = useStageRegistry()
 
 const nodes = ref<GraphNode[]>([])
 
+// Derive graph mode from pipeline layout mode
+const graphMode = computed<GraphMode>(() => {
+  if (pipeline.layoutMode === 'bbox_editor') return 'edit-isolated'
+  if (pipeline.layoutMode === 'stage_editor') return 'edit-in-pipeline'
+  return 'observe'
+})
+
 // Initialize nodes from registry when it loads
 watch(stageNames, (names) => {
   if (names.length > 0 && nodes.value.length === 0) {
@@ -54,6 +61,8 @@ function onOpenStageEditor(stage: string) {
   <Panel title="Pipeline" :status="status">
     <GraphRenderer
       :nodes="nodes"
+      :mode="graphMode"
+      :active-stage="pipeline.editorStage"
       :region-stages="editableStages"
       @open-region-editor="onOpenRegionEditor"
       @open-stage-editor="onOpenStageEditor"