add basic condfig and rendering

src/components/RenderingNode.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { Handle, Position } from 'reactflow'
+import yaml from 'js-yaml'
+import FlowContext from '../lib/flowContext'
+
+type Props = {
+    id: string
+    data: any
+}
+
+export default function RenderingNode({ id }: Props) {
+    const [output, setOutput] = React.useState<string>('')
+
+    const ctx = React.useContext(FlowContext)
+    const nodes = ctx?.nodes ?? []
+    const edges = ctx?.edges ?? []
+
+    const incomingEdges = edges.filter((e: any) => e.target === id)
+    const incomingIds = incomingEdges.map((e: any) => e.source).sort()
+    const srcId = incomingIds.length > 0 ? incomingIds[0] : null
+    const srcNode = nodes.find((n: any) => n.id === srcId)
+    const yamlText = srcNode && srcNode.type === 'config' ? srcNode?.data?.yaml ?? '' : ''
+
+    React.useEffect(() => {
+        // debug
+        // eslint-disable-next-line no-console
+        console.debug('RenderingNode:selection', { id, incomingIds, srcNode: srcNode ? { id: srcNode.id, type: srcNode.type, yaml: (srcNode.data?.yaml ?? '').slice(0, 60) } : null })
+
+        if (!yamlText) {
+            if (incomingIds.length === 0) {
+                setOutput(`No configuration connected (nodes: ${nodes.length}, edges: ${edges.length})`)
+                return
+            }
+            setOutput('No YAML found on connected configuration node')
+            return
+        }
+
+        try {
+            const parsed = yaml.load(yamlText)
+            const newOutput = JSON.stringify(parsed, null, 2)
+            setOutput((prev) => (prev === newOutput ? prev : newOutput))
+        } catch (err: any) {
+            const msg = 'YAML parse error: ' + err.message
+            setOutput((prev) => (prev === msg ? prev : msg))
+        }
+    }, [id, incomingIds.join(','), yamlText, nodes.length, edges.length])
+
+    return (
+        <div className="w-72 bg-white rounded shadow-sm border p-3">
+            <div className="text-sm font-medium mb-2">Rendering</div>
+            <pre className="text-xs text-gray-800 max-h-40 overflow-auto">{output}</pre>
+            <Handle type="target" position={Position.Left} id="in" style={{ background: '#F97316' }} />
+        </div>
+    )
+}