Add a per-user lead agent and make the right pane task-focused

web/src/dom.ts

@@ -71,6 +71,28 @@ function modal(text: string, buttons: { label: string; value: string; class?: st
   });
 }
 
+export function openPanel(title: string, mount: (root: HTMLElement) => () => void): void {
+  if (document.querySelector("dialog.panel[open]")) {
+    return;
+  }
+  const close = h("button", { type: "button", class: "panel-close", title: "Close (Esc)" }, "×");
+  const body = h("div", { class: "panel-body" });
+  const dialog = h("dialog", { class: "modal panel" }, h("header", { class: "panel-head" }, h("h2", {}, title), close), body);
+  close.onclick = () => dialog.close();
+  dialog.onclick = (e) => {
+    if (e.target === dialog || (e.target as Element).closest("a[href^='#']")) {
+      dialog.close();
+    }
+  };
+  document.body.append(dialog);
+  const dispose = mount(body);
+  dialog.onclose = () => {
+    dispose();
+    dialog.remove();
+  };
+  dialog.showModal();
+}
+
 export async function showAlert(text: string): Promise<void> {
   await modal(text, [{ label: "OK", value: "ok", class: "primary" }]);
 }