phase 2

ui/framework/src/renderers/GraphRenderer.vue

@@ -6,7 +6,7 @@ import '@vue-flow/core/dist/theme-default.css'
 
 export interface GraphNode {
   id: string
-  status: 'pending' | 'running' | 'done' | 'error' | 'skipped'
+  status: 'pending' | 'running' | 'done' | 'error' | 'skipped' | 'placeholder'
   /** Whether a checkpoint exists at this stage */
   hasCheckpoint?: boolean
   /** Stage category (e.g. 'cv', 'ai', 'preprocessing') */
@@ -44,6 +44,7 @@ const STATUS_COLORS: Record<string, string> = {
   done: 'var(--status-live)',
   error: 'var(--status-error)',
   skipped: '#4a6fa5',
+  placeholder: 'transparent',
 }
 
 function nodeAppearance(node: GraphNode) {
@@ -84,6 +85,16 @@ function nodeAppearance(node: GraphNode) {
     }
   }
 
+  // Placeholder: hollow, no text
+  if (node.status === 'placeholder') {
+    return {
+      color: 'transparent',
+      textColor: 'transparent',
+      opacity: 0.6,
+      outline: false,
+    }
+  }
+
   // Default: observe mode or downstream in edit-in-pipeline
   return {
     color: STATUS_COLORS[node.status] ?? STATUS_COLORS.pending,
@@ -158,6 +169,7 @@ function onNodeClick(id: string) {
             active: data.isActive,
             outline: data.outline,
             dimmed: data.opacity < 1,
+            placeholder: data.status === 'placeholder',
           }"
           :style="{
             background: data.color,
@@ -248,6 +260,18 @@ function onNodeClick(id: string) {
   pointer-events: none;
 }
 
+.stage-node.placeholder {
+  border: 1px dashed var(--text-secondary);
+  background: transparent;
+  color: transparent;
+  pointer-events: none;
+}
+
+.stage-node.placeholder .stage-actions,
+.stage-node.placeholder .checkpoint-badge {
+  display: none;
+}
+
 .stage-label {
   flex: 1;
 }