feat: rendering for agents

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

@@ -9,7 +9,7 @@ import {
     useAbstractNode,
 } from '@/lib/graph/abstractNode'
 import { getConfigContent, getConfigType, getConfigTypeId } from '@/lib/graph/configTypes'
-import { getSourceRenderingLogic } from '@/lib/graph/sourceRenderingLogic'
+import { getSourceRenderingLogic, type SourceRenderingLogicContext } from '@/lib/graph/sourceRenderingLogic'
 import { useSyncConnectionStatus } from '@/lib/graph/nodeLifecycle'
 import { useResizeHeight } from '@/hooks/useResizeHeight'
 import { plantumlLanguage } from '@/lib/plantumlLanguage'
@@ -41,6 +41,7 @@ import {
     DropdownMenuLabel,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
+import { usePlatform } from '@/app/kosmos/KosmosContext'
 import { cn } from '@/lib/utils'
 import { useTheme } from '@/lib/themeContext'
 import { toast } from 'sonner'
@@ -79,6 +80,7 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
     const minLoadingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
     const lastManualRunTriggerRef = useRef<number>(0)
     const { nodes, edges, setNodes, setEdges, sourceIds, updateData } = useAbstractNode<RenderingNodeData>(id, data ?? {})
+    const { aiConnection } = usePlatform()
     const viewportWidth = data?.viewportWidth ?? DEFAULT_VIEWPORT_WIDTH
     const viewportHeight = data?.viewportHeight ?? DEFAULT_VIEWPORT_HEIGHT
 
@@ -265,7 +267,7 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
             setResolvedContent(null)
             setError({
                 kind: 'no-content',
-                message: isAgentSource ? 'Run the Agent node to generate output, then click Run here.' : 'Click Run to render.',
+                message: 'Click Run to render.',
             })
             setLoading(false)
             return
@@ -289,11 +291,13 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
                 const context = {
                     nodes,
                     edges,
-                    sourceNodeId: srcId,
+                    sourceNodeId: srcId!,
                     renderNodeId: id,
                     viewportWidth,
                     viewportHeight,
-                }
+                    setNodes: setNodes ?? undefined,
+                    aiConnection,
+                } as SourceRenderingLogicContext
                 const { resolved, outputTypeId } = await logic.getResolvedContent(context)
                 if (cancelled || thisRunId !== runIdRef.current) return
                 setResolvedContent(resolved)
@@ -351,7 +355,7 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
             }
             setLoading(false)
         }
-    }, [id, srcId, srcNode?.type, effectiveUpdateMode, runTrigger, sourceContent, sourceSignature, configSignature, edgesSignature, variablesSignature, functionsSignature, dataSignature, viewportWidth, viewportHeight, retryCount, nodes, edges, updateData])
+    }, [id, srcId, srcNode?.type, effectiveUpdateMode, runTrigger, sourceContent, sourceSignature, configSignature, edgesSignature, variablesSignature, functionsSignature, dataSignature, viewportWidth, viewportHeight, retryCount, nodes, edges, updateData, setNodes, aiConnection])
 
 
     const dimensions =
@@ -579,9 +583,9 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
                                     >
                                         Raw
                                     </MenubarCheckboxItem>
-                                    <MenubarSeparator />
                                     {outputType === 'image' && (
                                         <MenubarSub>
+                                            <MenubarSeparator />
                                             <MenubarSubTrigger className="text-xs">Viewport size</MenubarSubTrigger>
                                             <MenubarSubContent className="min-w-[12rem] p-2">
                                                 <div className="grid gap-2">