More cleanup and fixing react errors.

components/header.js

@@ -0,0 +1,14 @@
+import React from "react";
+const $ = React.createElement;
+
+export default function Header({ side, title }) {
+    const className = `header ${side}`;
+
+    return $('div', { className },
+        $('hr', {}),
+        $('hr', {}),
+        $('span', {}, title),
+        $('hr', {}),
+        $('hr', {})
+    );
+}

components/magi.js

@@ -1,7 +1,12 @@
 import React from "react";
+const $ = React.createElement;
 
-export default function Magi(props) {
-    const { setProps, children } = props;
-
-    return React.createElement("div", { className: "magi" }, children);
+export default function Magi({ children }) {
+    return $('div', { className: 'magi' },
+        $('div', { className: 'connection casper-balthasar' }),
+        $('div', { className: 'connection casper-melchior' }),
+        $('div', { className: 'connection balthasar-melchior' }),
+        ...children,
+        $('div', { className: 'title' }, 'MAGI')
+    );
 }

components/modal.js

@@ -1,4 +1,5 @@
 import React from 'react';
+const $ = React.createElement;
 
 export default function Modal({ setProps, name, is_open, question, answer }) {
     if (!is_open) return null;
@@ -7,28 +8,28 @@ export default function Modal({ setProps, name, is_open, question, answer }) {
     const answerId = answer.id;
 
     if (questionId !== answerId)
-        answer = { id: questionId, status: 'error', error: 'questionId !== answerId' };
+        answer = { id: questionId, status: 'error', error: 'loading...' };
 
     const close = () => {
         setProps({ is_open: false });
     };
 
-    return React.createElement('div', { className: 'modal' }, [
-        React.createElement('div', { className: 'modal-header' }, [
-            React.createElement('div', { className: 'modal-title' }, [name]),
-            React.createElement('div', { className: 'close', onClick: close }, ['X']),
-        ]),
-        React.createElement('div', { className: 'modal-body' }, [
-            React.createElement('div', {}, 'question: '),
-            React.createElement('div', {}, question.query),
-            React.createElement('div', {}, 'status: '),
-            React.createElement('div', {}, answer.status),
-            React.createElement('div', {}, 'error: '),
-            React.createElement('div', {}, answer.error),
-            React.createElement('div', {}, 'conditions: '),
-            React.createElement('div', {}, answer.conditions),
-            React.createElement('div', {}, 'full response: '),
-            React.createElement('div', {}, answer.response)
-        ]),
-    ]);
+    return $('div', { className: 'modal' },
+        $('div', { className: 'modal-header' },
+            $('div', { className: 'modal-title' }, name),
+            $('div', { className: 'close', onClick: close }, 'X'),
+        ),
+        $('div', { className: 'modal-body' },
+            $('div', {}, 'question: '),
+            $('div', {}, question.query),
+            $('div', {}, 'status: '),
+            $('div', {}, answer.status),
+            $('div', {}, 'error: '),
+            $('div', {}, answer.error),
+            $('div', {}, 'conditions: '),
+            $('div', {}, answer.conditions),
+            $('div', {}, 'full response: '),
+            $('div', {}, answer.response)
+        ),
+    );
 }

components/response.js

@@ -1,4 +1,5 @@
 import React from 'react';
+const $ = React.createElement;
 
 function getStatusText(status) {
     if (status === 'info')
@@ -38,16 +39,17 @@ function getStatusColor(status) {
     throw new Error('Invalid status: ' + status);
 }
 
-export default function Response(props) {
-    const { status, question_id, answer_id } = props;
-
+export default function Response({ status, question_id, answer_id }) {
     const text = getStatusText(status);
     const color = getStatusColor(status);
 
-    return React.createElement('div', { className: `response ${question_id !== answer_id ? 'flicker' : ''}`, style: { color: color, borderColor: color } },
-        [
-            React.createElement('div', { className: 'inner' }, [text])
-        ]);
+    let className = 'response';
+    if (question_id !== answer_id)
+        className += ' flicker';
+
+    return $('div', { className, style: { color: color, borderColor: color } },
+        $('div', { className: 'inner' }, text)
+    );
 }
 
 Response.defaultProps = {

components/status.js

@@ -0,0 +1,18 @@
+import React from 'react';
+const $ = React.createElement;
+
+export default function Status({ extention }) {
+    const extentionLabel = `EXTENTION:${extention}`;
+
+    return $('div', { className: 'system-status' },
+        $('div', {}, 'CODE:473'),
+        $('div', {}, 'FILE:MAGI_SYS'),
+        $('div', {}, extentionLabel),
+        $('div', {}, 'EX_MODE:OFF'),
+        $('div', {}, 'PRIORITY:AAA')
+    );
+}
+
+Status.defaultProps = {
+    extention: '????'
+};

components/wise_man.js

@@ -1,7 +1,7 @@
 import React from 'react';
+const $ = React.createElement;
 
-
-function useColor(status) {
+function getColor(status) {
     if (status === 'yes')
         return '#52e691';
 
@@ -20,22 +20,23 @@ function useColor(status) {
     throw new Error(`Invalid status: ${status}`);
 }
 
-export default function WiseMan(props) {
-    const { setProps, name, order_number, question_id, answer, n_clicks } = props;
+export default function WiseMan({ setProps, name, order_number, question_id, answer, n_clicks }) {
     const fullName = `${name.toUpperCase()} • ${order_number}`;
-    const color = useColor(answer['status']);
+    const color = getColor(answer['status']);
     const processing = question_id !== answer['id'];
 
     const onClick = () => {
         setProps({ n_clicks: n_clicks + 1 });
     };
 
-    return React.createElement('div', { className: `wise-man ${name}`, onClick: onClick, key: name },
-        [
-            React.createElement('div', { className: `inner ${processing ? 'flicker' : ''}`, style: { background: color } }, [
-                fullName
-            ])
-        ])
+    let outerClassName = `wise-man ${name}`;
+    let innerClassName = 'inner';
+    if (processing)
+        innerClassName += ' flicker';
+
+    return $('div', { className: outerClassName, onClick: onClick, key: name },
+        $('div', { className: innerClassName, style: { background: color } }, fullName)
+    )
 }
 
 WiseMan.defaultProps = {