basic docker config, fixes several critical faults, allows status manager to get status via sse

islands/statusManager.tsx

@@ -18,30 +18,43 @@ export function StatusManager(
     props.onAction && props.onAction(body);
   };
 
-  const [status, setStatus] = useState('');
+  const [status, setStatus] = useState("");
 
-  const getStatus = async () => {
-    const res = await fetch('/api/manage');
-    const body = await res.text();
+  const getStatus = () => {
+    globalThis.statusSource = globalThis.statusSource || new EventSource('/api/manage');
 
-    setStatus(body);
-  }
+    globalThis.statusSource.addEventListener('status', (e) => {
+      setStatus(e.data);
+    })
+  };
 
   useEffect(() => {
     if (IS_BROWSER) getStatus();
-  },[])
+  }, []);
 
   return (
     <div {...props}>
       {!!status && <small>Server is {status}</small>}
       <div class="flex gap-4">
-        <Button color="wasabi" disabled={!status || status === 'running'} onClick={() => sendCommand(ManageAction.start)}>
+        <Button
+          color="wasabi"
+          disabled={!status || status === "running"}
+          onClick={() => sendCommand(ManageAction.start)}
+        >
           Start
         </Button>
-        <Button color="fire" disabled={!status || status === 'stopped'} onClick={() => sendCommand(ManageAction.stop)}>
+        <Button
+          color="fire"
+          disabled={!status || status === "stopped"}
+          onClick={() => sendCommand(ManageAction.stop)}
+        >
           Stop
         </Button>
-        <Button color="sky" disabled={!status} onClick={() => sendCommand(ManageAction.restart)}>
+        <Button
+          color="sky"
+          disabled={!status}
+          onClick={() => sendCommand(ManageAction.restart)}
+        >
           Restart
         </Button>
       </div>

islands/terminal.tsx

@@ -4,7 +4,7 @@ import { JSX } from "preact/jsx-runtime";
 import { Sockpuppet } from "puppet/client";
 
 export function Terminal(props: { channelId: string }) {
-  const puppet = useRef(new Sockpuppet("ws://sockpuppet.cyborggrizzly.com"));
+  const puppet = useRef<Sockpuppet>();
   const [lines, setLines] = useState<string[]>([]);
   const divRef = useRef<HTMLDivElement>(null);
   const storeKey = "commandHistory";
@@ -18,15 +18,21 @@ export function Terminal(props: { channelId: string }) {
   const changeHistoryIndex = (by: number) => setHistoryIndex((i) => i + by);
 
   useEffect(() => {
-    if (!IS_BROWSER) return;
-    puppet.current.joinChannel(props.channelId, (line) => {
-      setLines((l) => [...l, line]);
+    if (!IS_BROWSER || puppet.current) return;
+    puppet.current = new Sockpuppet("ws://sockpuppet.cyborggrizzly.com", () => {
+      puppet.current?.joinChannel(props.channelId, (line) => {
+        if (line === "clear") {
+          setLines([]);
+        } else {
+          setLines((l) => [...l, line]);
+        }
+      });
+      setTimeout(() => {
+        const channel = puppet.current?.getChannel(props.channelId);
+        // console.log(channel)
+        channel?.send("log");
+      }, 200);
     });
-    setTimeout(() => {
-      const channel = puppet.current.getChannel(props.channelId)
-      // console.log(channel)
-      channel?.send("log");
-    }, 200);
 
     document.addEventListener("keyup", (e) => {
       switch (e.key) {
@@ -50,12 +56,12 @@ export function Terminal(props: { channelId: string }) {
 
   const sendCommand = (e: Event) => {
     e.preventDefault();
-    puppet.current.getChannel(props.channelId)?.send(
-      historyIndex === commandHistory.length
-        ? command
-        : commandHistory[historyIndex],
+    puppet.current?.getChannel(props.channelId)?.send(
+      commandHistory.at(historyIndex) || command,
     );
-    setCommandHistory((c) => [...c, command]);
+    setCommandHistory((
+      c,
+    ) => [...c, commandHistory.at(historyIndex) || command]);
     setHistoryIndex(commandHistory.length + 1);
     setCommand("");
   };