feat: meaningful labels by status

frontend/src/components/graph/AnimatedEdge.tsx

@@ -7,6 +7,7 @@ import {
 import { useCanvasStore } from '@/app/canvas/canvasStore'
 import { selectConnectionStatusForEdge } from '@/app/canvas/canvasStore.selectors'
 import { CONNECTION_STATUS_CLASS } from '@/lib/graph/connectionStatus'
+import { getConnectionLabelForTargetAndStatus } from '@/lib/graph/nodeRegistry'
 
 const EDGE_STROKE_WIDTH = 2
 const DOT_MARKER_R = 1.5
@@ -31,7 +32,10 @@ function AnimatedEdgeInner({
   )
   const statusClass = CONNECTION_STATUS_CLASS[connectionStatus]
 
-  const label = labelProp ?? (data as { connectionLabel?: string } | undefined)?.connectionLabel
+  const targetType = (data as { targetType?: string } | undefined)?.targetType ?? ''
+  const dataLabel = (data as { connectionLabel?: string } | undefined)?.connectionLabel
+  const displayLabel =
+    getConnectionLabelForTargetAndStatus(targetType, connectionStatus) ?? labelProp ?? dataLabel
 
   const [edgePath, edgeLabelX, edgeLabelY] = getBezierPath({
     sourceX,
@@ -92,7 +96,7 @@ function AnimatedEdgeInner({
         className={`animated-edge-path${statusClass ? ` ${statusClass}` : ''}`}
         interactionWidth={interactionWidth}
       />
-      {label != null && (
+      {displayLabel != null && displayLabel !== '' && (
         <g transform={`translate(${edgeLabelX}, ${edgeLabelY})`} className="nodrag nopan">
           <rect
             x={-32}
@@ -109,7 +113,7 @@ function AnimatedEdgeInner({
             dominantBaseline="middle"
             className="fill-foreground text-[10px] font-medium"
           >
-            {label}
+            {displayLabel}
           </text>
         </g>
       )}
@@ -130,8 +134,10 @@ function edgePropsAreEqual(prev: EdgeProps, next: EdgeProps): boolean {
     prev.targetPosition === next.targetPosition &&
     prev.style === next.style &&
     prev.label === next.label &&
-    (prev.data as { connectionLabel?: string } | undefined)?.connectionLabel ===
-      (next.data as { connectionLabel?: string } | undefined)?.connectionLabel
+    (prev.data as { connectionLabel?: string; targetType?: string } | undefined)?.connectionLabel ===
+      (next.data as { connectionLabel?: string; targetType?: string } | undefined)?.connectionLabel &&
+    (prev.data as { targetType?: string } | undefined)?.targetType ===
+      (next.data as { targetType?: string } | undefined)?.targetType
   )
 }
 

frontend/src/components/nodes/agent/descriptor.tsx

@@ -17,7 +17,7 @@ export function getAgentNodeDescriptor(): NodeTypeDescriptor {
     .allowedTargetTypes(['render'])
     .help(NODE_HELP.agent)
     .menu('Agent', <Bot className={ICON_CLASS} />)
-    .connectionLabel('prompt/context')
+    .connectionLabelByStatus({ default: 'prompt/context', updating: 'running', paused: 'pending', error: 'corrupted' })
     .withFullscreen()
     .sourceRenderingLogic(agentRenderingLogic)
     .outputMenuContent(() => null)

frontend/src/components/nodes/config/descriptor.tsx

@@ -82,7 +82,7 @@ export function getConfigNodeDescriptor(): NodeTypeDescriptor {
       content: '@startuml\n\n@enduml\n',
       title: nodeId ?? '',
     }))
-    .connectionLabel('adding input')
+    .connectionLabelByStatus({ default: 'adding input', updating: 'pushing new form', paused: 'pending', error: 'corrupted' })
     .withFullscreen()
     .sourceRenderingLogic({
       defaultUpdateMode: 'auto',

frontend/src/components/nodes/data/descriptor.tsx

@@ -20,7 +20,7 @@ export function getDataNodeDescriptor(): NodeTypeDescriptor {
     .allowedTargetTypes(['config', 'agent'])
     .help(NODE_HELP.data)
     .menu('Data', <Database className={ICON_CLASS} />)
-    .connectionLabel('data source')
+    .connectionLabelByStatus({ default: 'data source' })
     .withFullscreen()
     .build()
 }

frontend/src/components/nodes/function/descriptor.tsx

@@ -21,7 +21,7 @@ export function getFunctionNodeDescriptor(): NodeTypeDescriptor {
     .help(NODE_HELP.function)
     .menu('Function', <Code2 className={ICON_CLASS} />)
     .getResetData(() => ({ body: '' }))
-    .connectionLabel('adding input')
+    .connectionLabelByStatus({ default: 'adding input', updating: 'running', paused: 'pending', error: 'corrupted' })
     .withFullscreen()
     .build()
 }

frontend/src/components/nodes/render/descriptor.tsx

@@ -20,7 +20,7 @@ export function getRenderNodeDescriptor(): NodeTypeDescriptor {
     .allowedSourceTypes(['config', 'agent'])
     .help(NODE_HELP.render)
     .menu('Renderer', <Sparkles className={ICON_CLASS} />)
-    .connectionLabel('rendering')
+    .connectionLabelByStatus({ default: 'listening', updating: 'giving life', paused: 'pending', error: 'corrupted' })
     .withFullscreen()
     .build()
 }