swarm-ui: start page setup assistant offers to create ruth

frontend/packages/swarm-ui/src/pages/SetupAssistant.tsx

@@ -0,0 +1,77 @@
+// <SetupAssistant> - the start page's first-time helper: a paperclip with a
+// speech bubble offering to set up an agent. It renders only while the swarm
+// has no `ruth` (see `ruthIsMissing`), and a click opens the create-agent
+// form with her name filled in; the form already selects the default
+// permissions and the only hive. No dismiss: once ruth exists it goes away.
+import { useEffect, useState } from "preact/hooks";
+import { Dialog } from "../ui/dialog/Dialog.js";
+import { ruthIsMissing } from "../shell/ruth-missing.js";
+import { CreateAgentForm } from "./CreateAgentForm.js";
+import "./SetupAssistant.css";
+
+export function SetupAssistant() {
+  const [missing, setMissing] = useState(false);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    void ruthIsMissing((url) => fetch(url)).then((m) => {
+      if (!cancelled) setMissing(m);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!missing) return null;
+  return (
+    <>
+      <button
+        type="button"
+        class="setup-assistant"
+        onClick={() => setOpen(true)}
+      >
+        <span class="setup-assistant-bubble">
+          want to help me set up an agent? click here
+        </span>
+        <svg
+          class="setup-assistant-clip"
+          viewBox="0 0 40 80"
+          aria-hidden="true"
+        >
+          <path
+            d="M27 22v34a9 9 0 0 1-18 0V16a6 6 0 0 1 12 0v36a3 3 0 0 1-6 0V24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="3.5"
+            stroke-linecap="round"
+          />
+          <circle
+            cx="13"
+            cy="38"
+            r="3.2"
+            fill="var(--bg)"
+            stroke="currentColor"
+          />
+          <circle
+            cx="23"
+            cy="38"
+            r="3.2"
+            fill="var(--bg)"
+            stroke="currentColor"
+          />
+          <circle cx="13.6" cy="38.4" r="1.2" fill="currentColor" />
+          <circle cx="23.6" cy="38.4" r="1.2" fill="currentColor" />
+        </svg>
+      </button>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        label="create agent"
+        plain
+      >
+        <CreateAgentForm initialName="ruth" onClose={() => setOpen(false)} />
+      </Dialog>
+    </>
+  );
+}