dev: main entity info on dashboard

app/react-components/devtools.jsx

@@ -1,6 +1,10 @@
+import {useState} from 'react';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import 'react-tabs/style/react-tabs.css';
 
+import {useEcs, useEcsTick} from '@/context/ecs.js';
+import {useMainEntity} from '@/context/main-entity.js';
+
 import styles from './devtools.module.css';
 
 import Tiles from './devtools/tiles.jsx';
@@ -10,15 +14,22 @@ export default function Devtools({
   eventsChannel,
   setApplyFilters,
 }) {
+  const [ecs] = useEcs();
+  const [mainEntity] = useMainEntity();
+  const [mainEntityJson, setMainEntityJson] = useState({});
+  useEcsTick(() => {
+    if (!ecs || !mainEntity) {
+      return;
+    }
+    setMainEntityJson(ecs.get(mainEntity).toJSON());
+  }, [ecs, mainEntity]);
   return (
     <div className={styles.devtools}>
-
       <Tabs>
         <TabList>
           <Tab>Dashboard</Tab>
           <Tab>Tiles</Tab>
         </TabList>
-
         <TabPanel>
           <div className={styles.dashboard}>
             <form>
@@ -35,9 +46,9 @@ export default function Devtools({
                 </label>
               </div>
             </form>
+            <pre><code><small>{JSON.stringify(mainEntityJson, null, 2)}</small></code></pre>
           </div>
         </TabPanel>
-
         <TabPanel>
           <Tiles
             eventsChannel={eventsChannel}