feat(agent-mui): add agent canvas, nodes, and related components

docs(agent-hooks-guide): add comprehensive guide for agent hooks usage and implementation

src/pages/agent-mui/canvas/node/ReadonlyNode.tsx

@@ -0,0 +1,15 @@
+import { Box } from '@mui/material';
+import { Handle, Position, type NodeProps } from '@xyflow/react';
+
+export default function ReadonlyNode({ data }: NodeProps) {
+  const label = (data as any)?.label || '';
+  const name = (data as any)?.name || '';
+  return (
+    <Box sx={{ p: 1.25, bgcolor: 'background.paper', border: '1px solid', borderColor: 'divider', borderRadius: 1.5, minWidth: 160 }}>
+      <Box sx={{ fontSize: 12, color: 'text.secondary', mb: 0.5 }}>{label}</Box>
+      <Box sx={{ fontSize: 14, fontWeight: 600 }}>{name}</Box>
+      <Handle type="target" position={Position.Left} id="left" />
+      <Handle type="source" position={Position.Right} id="right" />
+    </Box>
+  );
+}