feat: add version history and AI diff highlighting in editor

editor/components/SceneGraph.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watch, nextTick } from 'vue'
-import { VueFlow, useVueFlow, SmoothStepEdge } from '@vue-flow/core'
+import { VueFlow, useVueFlow, SmoothStepEdge, Handle, Position } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import '@vue-flow/core/dist/style.css'
@@ -8,6 +8,7 @@ import '@vue-flow/controls/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 import type { Connection } from '@vue-flow/core'
 import { computePositions, savePosition } from '../composables/useLayout'
+import { useEditorStore } from '../stores/editorStore'
 
 const props = defineProps<{
   sceneNodes: { id: string; label: string }[]
@@ -23,6 +24,8 @@ const emit = defineEmits<{
   clearSelection: []
 }>()
 
+const store = useEditorStore()
+
 const nodes = ref<any[]>([])
 const edges = ref<any[]>([])
 const { onNodeClick, onConnect, onNodeContextMenu, onNodeDragStop, onPaneClick, fitView } = useVueFlow()
@@ -33,13 +36,23 @@ const ctxMenuNodeId = ref('')
 
 function makeNodes() {
   const positions = computePositions(props.sceneNodes, props.sceneEdges, props.startScene)
+  const changes = store.aiChanges
   return props.sceneNodes.map((n) => {
     const pos = positions.get(n.id) ?? { x: 0, y: 0 }
+    let badge = ''
+    if (changes) {
+      if (changes.added.includes(n.id)) badge = 'NEW'
+      else if (changes.modified.includes(n.id)) badge = 'MOD'
+      else if (changes.deleted.includes(n.id)) badge = 'DEL'
+    }
     return {
       id: n.id,
       type: 'default',
       position: pos,
-      data: { label: n.id === props.startScene ? `\u25b6 ${n.label}` : n.label },
+      data: {
+        label: n.id === props.startScene ? `\u25b6 ${n.label}` : n.label,
+        badge,
+      },
       style: n.id === props.startScene
         ? { background: '#1b5e20', color: '#fff', borderColor: '#388e3c' }
         : n.id === props.selectedNodeId
@@ -99,7 +112,7 @@ function inlineRebuild() {
 }
 
 watch(
-  () => [props.sceneNodes, props.sceneEdges, props.startScene, props.selectedNodeId] as const,
+  () => [props.sceneNodes, props.sceneEdges, props.startScene, props.selectedNodeId, store.aiChanges] as const,
   () => {
     const nc = props.sceneNodes.length
     const ec = props.sceneEdges.length
@@ -152,6 +165,16 @@ onConnect((conn: Connection) => {
       :min-zoom="0.2"
       :max-zoom="2"
     >
+      <template #node-default="nodeProps">
+        <div class="custom-node">
+          <Handle type="target" :position="Position.Left" />
+          <div class="custom-node-label">{{ nodeProps.data.label }}</div>
+          <span v-if="nodeProps.data.badge" class="diff-badge" :class="`diff-badge-${nodeProps.data.badge}`">
+            {{ nodeProps.data.badge }}
+          </span>
+          <Handle type="source" :position="Position.Right" />
+        </div>
+      </template>
       <Background :gap="20" />
       <Controls />
     </VueFlow>
@@ -207,4 +230,44 @@ onConnect((conn: Connection) => {
   background: rgba(100,200,255,0.12);
   color: #fff;
 }
+
+.custom-node {
+  position: relative;
+  padding: 8px 30px 8px 12px;
+  min-width: 120px;
+  font-size: 12px;
+}
+
+.custom-node-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.diff-badge {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  padding: 1px 5px;
+  font-size: 9px;
+  font-weight: 600;
+  border-radius: 2px;
+  line-height: 1.4;
+}
+
+.diff-badge-NEW {
+  background: #2e7d32;
+  color: #c8e6c9;
+}
+
+.diff-badge-MOD {
+  background: #e65100;
+  color: #ffe0b2;
+}
+
+.diff-badge-DEL {
+  background: #c62828;
+  color: #ffcdd2;
+  text-decoration: line-through;
+}
 </style>