refactoring: graph state

frontend/src/components/nodes/render/useRenderingNodeState.ts

@@ -21,6 +21,7 @@ import {
     stripTemplateSyntax,
 } from '@/lib/graph/rendering'
 import { buildSourceSignatures, type NodeLike, type EdgeLike } from '@/lib/graph/renderingSignatures'
+import { getNodeDisplayStatus, type NodeDisplayStatus } from '@/lib/graph/state'
 import type { ConfigTypeId, SourceRenderingLogicContext } from '@/lib/graph/rendering'
 
 export type RenderingNodeData = {
@@ -38,7 +39,19 @@ const DEFAULT_VIEWPORT_WIDTH = 1200
 const DEFAULT_VIEWPORT_HEIGHT = 800
 const RENDER_DEBOUNCE_MS = 250
 
+/** Lifecycle state to pass to useSyncConnectionStatus so edge status (updating/paused/error) stays in sync. */
+export type RenderingNodeLifecycle = {
+    updating: boolean
+    error: boolean
+    paused: boolean
+}
+
 export type RenderingNodeState = {
+    /** For NodeStatusIndicator and empty/error UI. Derived from loading, error, renderedContent. */
+    displayStatus: NodeDisplayStatus
+    /** Pass to useSyncConnectionStatus so edges show correct status (blue/yellow/red). */
+    lifecycle: RenderingNodeLifecycle
+
     // Connection & run control
     incomingIds: string[]
     effectiveUpdateMode: 'auto' | 'manual'
@@ -183,7 +196,11 @@ export function useRenderingNodeState(
         incomingIds.length > 0 &&
         sourceSignature !== lastRunSourceSignature
 
-    useSyncConnectionStatus(id, { updating: loading, error: error != null, paused: hasPendingInputs })
+    const lifecycle = useMemo<RenderingNodeLifecycle>(
+        () => ({ updating: loading, error: error != null, paused: hasPendingInputs }),
+        [loading, error, hasPendingInputs]
+    )
+    useSyncConnectionStatus(id, lifecycle)
 
     useEffect(() => {
         if (incomingIds.length === 0) {
@@ -472,7 +489,14 @@ export function useRenderingNodeState(
     const sourceData = useMemo(() => (srcNode?.data as Record<string, unknown>) ?? {}, [srcNode?.data])
     const sourceNodeType = (srcNode?.type as string) ?? null
 
+    const displayStatus = useMemo<NodeDisplayStatus>(
+        () => getNodeDisplayStatus({ loading, error, hasContent: !!renderedContent }),
+        [loading, error, renderedContent]
+    )
+
     return {
+        displayStatus,
+        lifecycle,
         incomingIds,
         effectiveUpdateMode,
         runTrigger,