add heavy loggin

ui/framework/src/components/Panel.vue

@@ -9,6 +9,7 @@ defineProps<{
   <div class="panel">
     <div class="panel-header">
       <span class="panel-title">{{ title }}</span>
+      <span class="panel-actions"><slot name="actions" /></span>
       <span class="panel-status" :class="status ?? 'idle'" />
     </div>
     <div class="panel-body">
@@ -51,11 +52,17 @@ defineProps<{
   letter-spacing: 0.04em;
 }
 
+.panel-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
 .panel-status {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  margin-left: auto;
 }
 .panel-status.idle { background: var(--status-idle); }
 .panel-status.live { background: var(--status-live); }

ui/framework/src/datasources/SSEDataSource.ts

@@ -69,10 +69,9 @@ export class SSEDataSource extends DataSource {
       })
     }
 
-    // Also listen to the generic 'done' terminal event
+    // Terminal event — pipeline finished (success, failure, or cancel)
     this.es.addEventListener('done', () => {
       this.status.value = 'idle'
-      this.disconnect()
     })
   }
 

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'
+  status: 'pending' | 'running' | 'done' | 'error' | 'skipped'
 }
 
 const props = defineProps<{
@@ -29,6 +29,7 @@ const statusColors: Record<string, string> = {
   running: 'var(--status-processing)',
   done: 'var(--status-live)',
   error: 'var(--status-error)',
+  skipped: '#4a6fa5',
 }
 
 const flowNodes = computed(() =>