byre/web/src/app.ts

import { get, put, subscribe } from "./api.js";
import { errorText, h, replace, showAlert } from "./dom.js";
import { mountNavbar } from "./navbar.js";
import { Pane } from "./panes.js";
import { handleEvent, loadInbox, loadMe, loadProjects, notify, on, selectTask, state } from "./state.js";

function identityBanner(root: HTMLElement): void {
  const render = () => {
    const me = state.me;
    if (!me || (me.git_name && me.git_email)) {
      replace(root);
      root.hidden = true;
      return;
    }
    const name = h("input", { placeholder: "Git name", value: me.display_name, required: true });
    const email = h("input", { type: "email", placeholder: "Git email", required: true });
    const form = h("form", { class: "inline-form" }, "Set the identity agents commit as: ", name, email, h("button", { type: "submit" }, "Save"));
    form.onsubmit = async (e) => {
      e.preventDefault();
      try {
        state.me = await put("/api/me", { body: { git_name: name.value, git_email: email.value } });
        render();
      } catch (err) {
        void showAlert(errorText(err));
      }
    };
    root.hidden = false;
    replace(root, form);
  };
  on("me", render);
  render();
}

function route(): void {
  const match = /^#\/task\/(\w+)$/.exec(location.hash);
  const taskId = match?.[1];
  if (taskId !== state.selectedTaskId) {
    void selectTask(taskId);
  }
}

async function main(): Promise<void> {
  const navbar = h("header", { class: "navbar" });
  const banner = h("div", { class: "banner", hidden: true });
  const left = new Pane("left", "transcript");
  const right = new Pane("right", "inbox");
  replace(document.body, navbar, banner, h("div", { class: "panes" }, left.el, right.el));

  mountNavbar(navbar, (view) => right.show(view));
  identityBanner(banner);

  const status = await get("/api/admin/status");
  await Promise.all([loadMe(), loadProjects(), loadInbox()]);

  subscribe(status.last_event_seq, handleEvent, (connected) => {
    state.connected = connected;
    notify("connection");
  });

  addEventListener("hashchange", route);
  route();

  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.onmessage = (e: MessageEvent<{ open: string }>) => {
      location.hash = new URL(e.data.open, location.origin).hash;
    };
    await navigator.serviceWorker.register("/sw.js");
  }
}

main().catch((err: unknown) => {
  replace(document.body, h("pre", { class: "fatal" }, `byre failed to start: ${errorText(err)}`));
});