LLeMbas/src/lembas/web/static/js/ui.js

/*
  Toasts and dialogs.

  Replaces window.confirm/prompt, which cannot be styled, ignore the theme, and
  block the whole tab. Dialogs are built on <dialog>, so focus trapping, Escape
  and inertness of the page behind come from the browser rather than from
  hand-written key handling.

  Everything returns a Promise, so callers read as if they were still using the
  built-ins:

      if (await lembas.confirm({ message: "Delete this?" })) { ... }
      const name = await lembas.prompt({ message: "New name", value: old });
      lembas.notify("Saved.", { kind: "success" });
*/
(function () {
  "use strict";

  var TOAST_MS = 4000;

  function el(tag, className, text) {
    var node = document.createElement(tag);
    if (className) node.className = className;
    // textContent, never innerHTML: these messages carry filenames, chat
    // titles and upstream error text, none of which is ours to trust.
    if (text != null) node.textContent = text;
    return node;
  }

  /* --- Toasts ------------------------------------------------------------ */
  function toastHost() {
    var host = document.getElementById("toasts");
    if (!host) {
      host = el("div", "toasts");
      host.id = "toasts";
      // Announced politely so a screen reader hears it without being yanked
      // away from whatever it was reading.
      host.setAttribute("role", "status");
      host.setAttribute("aria-live", "polite");
      document.body.appendChild(host);
    }
    return host;
  }

  function notify(message, options) {
    options = options || {};
    var toast = el("div", "toast toast--" + (options.kind || "info"));
    toast.appendChild(el("span", "toast__text", message));

    var close = el("button", "toast__close");
    close.type = "button";
    close.setAttribute("aria-label", "Dismiss");
    close.textContent = "×";
    close.addEventListener("click", function () { dismiss(toast); });
    toast.appendChild(close);

    toastHost().appendChild(toast);
    // Next frame, so the entry transition has a state to move from.
    requestAnimationFrame(function () { toast.classList.add("is-in"); });

    var timeout = options.timeout == null ? TOAST_MS : options.timeout;
    if (timeout > 0) setTimeout(function () { dismiss(toast); }, timeout);
    return toast;
  }

  function dismiss(toast) {
    if (!toast || toast.dataset.going) return;
    toast.dataset.going = "1";
    toast.classList.remove("is-in");
    setTimeout(function () { toast.remove(); }, 180);
  }

  /* --- Dialogs ----------------------------------------------------------- */
  function buildDialog(options) {
    var dialog = el("dialog", "dialog");
    var form = el("form", "dialog__form");
    form.method = "dialog";

    if (options.title) form.appendChild(el("h2", "dialog__title", options.title));
    if (options.message) form.appendChild(el("p", "dialog__message", options.message));

    var input = null;
    if (options.kind === "prompt") {
      input = el("input", "input");
      input.type = "text";
      input.value = options.value || "";
      if (options.placeholder) input.placeholder = options.placeholder;
      input.setAttribute("aria-label", options.title || options.message || "Value");
      form.appendChild(input);
    }

    var actions = el("div", "dialog__actions");

    var cancel = el("button", "btn", options.cancelLabel || "Cancel");
    cancel.type = "button";
    cancel.value = "cancel";
    actions.appendChild(cancel);

    var accept = el(
      "button",
      "btn " + (options.danger ? "btn--danger-solid" : "btn--primary"),
      options.confirmLabel || "OK"
    );
    accept.type = "submit";
    accept.value = "accept";
    actions.appendChild(accept);

    form.appendChild(actions);
    dialog.appendChild(form);
    document.body.appendChild(dialog);

    return { dialog: dialog, form: form, input: input, cancel: cancel, accept: accept };
  }

  function open(options) {
    return new Promise(function (resolve) {
      var parts = buildDialog(options);
      var settled = false;

      function finish(value) {
        if (settled) return;
        settled = true;
        resolve(value);
        parts.dialog.close();
        // Let the closing transition finish before the node disappears.
        setTimeout(function () { parts.dialog.remove(); }, 200);
      }

      parts.cancel.addEventListener("click", function () { finish(options.kind === "prompt" ? null : false); });
      parts.form.addEventListener("submit", function (event) {
        event.preventDefault();
        finish(options.kind === "prompt" ? (parts.input.value || "") : true);
      });
      // Escape and the backdrop both mean "no".
      parts.dialog.addEventListener("cancel", function (event) {
        event.preventDefault();
        finish(options.kind === "prompt" ? null : false);
      });
      parts.dialog.addEventListener("click", function (event) {
        if (event.target === parts.dialog) finish(options.kind === "prompt" ? null : false);
      });

      parts.dialog.showModal();
      if (parts.input) {
        parts.input.focus();
        parts.input.select();
      } else {
        (options.danger ? parts.cancel : parts.accept).focus();
      }
    });
  }

  function confirm(options) {
    if (typeof options === "string") options = { message: options };
    return open(Object.assign({ kind: "confirm", confirmLabel: "OK" }, options));
  }

  function prompt(options) {
    if (typeof options === "string") options = { message: options };
    return open(Object.assign({ kind: "prompt", confirmLabel: "Save" }, options));
  }

  window.lembas = window.lembas || {};
  window.lembas.notify = notify;
  window.lembas.confirm = confirm;
  window.lembas.prompt = prompt;

  /* --- htmx integration --------------------------------------------------
     hx-confirm normally calls window.confirm. Intercepting the event lets every
     existing hx-confirm attribute keep working while getting the themed dialog,
     with no change at the call sites. */
  document.addEventListener("htmx:confirm", function (event) {
    if (!event.detail.question) return;  // no confirmation asked for
    event.preventDefault();

    var trigger = event.detail.elt;
    confirm({
      title: trigger && trigger.dataset.confirmTitle,
      message: event.detail.question,
      confirmLabel: (trigger && trigger.dataset.confirmLabel) || "Delete",
      danger: !trigger || trigger.dataset.confirmDanger !== "false",
    }).then(function (ok) {
      if (ok) event.detail.issueRequest(true);
    });
  });

  /* A submit button that acts on its own (formaction) rather than the form it
     sits in. Confirming the whole form would be wrong: the same form also has
     a plain Save. */
  document.addEventListener("click", function (event) {
    var button = event.target.closest("[data-confirm-button]");
    if (!button || button.dataset.confirmed) return;
    event.preventDefault();
    event.stopPropagation();
    confirm({
      title: button.dataset.confirmTitle,
      message: button.dataset.confirmButton,
      confirmLabel: button.dataset.confirmLabel || "Delete",
      danger: button.dataset.confirmDanger !== "false",
    }).then(function (ok) {
      if (!ok) return;
      button.dataset.confirmed = "1";
      button.click();
      delete button.dataset.confirmed;
    });
  }, true);

  /* Asking for one line of text before a request goes out: renaming a folder,
     renaming a chat.

     Deliberately NOT htmx's own hx-prompt. htmx calls the browser's prompt()
     synchronously and only then fires htmx:prompt with the answer already in
     hand -- so intercepting the event cannot supply a different one, and the
     native box appears regardless. Cancelling the event only aborts the
     request. This is the data-confirm-button shape instead: swallow the click,
     ask in our own dialog, write the answer where htmx will collect it, and
     click again behind a guard flag.

     The answer goes into hx-vals as a normal field rather than into a header,
     because every route that wants it already reads a form. htmx reads
     attributes when the request is built, so setting it just before the second
     click is enough. It is JSON.stringify'd, never concatenated: a folder
     called `"` would otherwise produce hx-vals that does not parse, and the
     request would go out with the field missing rather than with the name. */
  document.addEventListener("click", function (event) {
    var el = event.target.closest("[data-prompt]");
    if (!el || el.dataset.prompted) return;
    event.preventDefault();
    event.stopPropagation();

    var field = el.dataset.promptField || "name";
    prompt({
      title: el.dataset.promptTitle,
      message: el.dataset.prompt,
      value: el.dataset.promptValue || "",
      confirmLabel: el.dataset.promptLabel || "Save",
    }).then(function (value) {
      /* null is Cancel. An empty string is somebody clearing the box and
         pressing Save, which is not a rename either -- the routes ignore a
         blank name, so sending it would be a request that does nothing. */
      if (value === null || !String(value).trim()) return;
      var values = {};
      values[field] = String(value).trim();
      el.setAttribute("hx-vals", JSON.stringify(values));
      el.dataset.prompted = "1";
      el.click();
      delete el.dataset.prompted;
    });
  }, true);

  /* Plain forms opt in with data-confirm, so they need no inline onsubmit. */
  document.addEventListener("submit", function (event) {
    var form = event.target;
    if (!form.dataset || !form.dataset.confirm || form.dataset.confirmed) return;
    event.preventDefault();
    confirm({
      title: form.dataset.confirmTitle,
      message: form.dataset.confirm,
      confirmLabel: form.dataset.confirmLabel || "Delete",
      danger: form.dataset.confirmDanger !== "false",
    }).then(function (ok) {
      if (!ok) return;
      form.dataset.confirmed = "1";
      form.submit();
    });
  }, true);
})();

/*
  The model picker.

  A <select> cannot render an avatar, a description or capability badges, so
  the control is built out of buttons and a hidden input. Keyboard behaviour is
  written out by hand for the same reason -- there is no native widget doing it
  for us.
*/
(function () {
  "use strict";

  function close(picker) {
    var menu = picker.querySelector("[data-picker-menu]");
    var toggle = picker.querySelector("[data-picker-toggle]");
    if (!menu || menu.hidden) return;
    menu.hidden = true;
    toggle.setAttribute("aria-expanded", "false");
  }

  function closeAll(except) {
    document.querySelectorAll("[data-picker]").forEach(function (picker) {
      if (picker !== except) close(picker);
    });
  }

  function open(picker) {
    var menu = picker.querySelector("[data-picker-menu]");
    var toggle = picker.querySelector("[data-picker-toggle]");
    closeAll(picker);
    menu.hidden = false;
    toggle.setAttribute("aria-expanded", "true");

    var filter = menu.querySelector("[data-picker-filter]");
    if (filter) {
      filter.value = "";
      applyFilter(menu, "");
      filter.focus();
    } else {
      var selected = menu.querySelector(".picker__option.is-selected") ||
                     menu.querySelector(".picker__option");
      if (selected) selected.focus();
    }
    // Keep the chosen model in view when the list is long.
    var current = menu.querySelector(".picker__option.is-selected");
    if (current) current.scrollIntoView({ block: "nearest" });
  }

  function applyFilter(menu, needle) {
    var shown = 0;
    menu.querySelectorAll(".picker__option").forEach(function (option) {
      var match = !needle || option.dataset.pickerSearch.indexOf(needle) !== -1;
      option.hidden = !match;
      if (match) shown += 1;
    });
    var empty = menu.querySelector("[data-picker-empty]");
    if (empty) empty.hidden = shown > 0;
  }

  function choose(picker, value) {
    var navigate = picker.querySelector("[data-picker-navigate]");
    if (navigate) {
      window.location = navigate.dataset.pickerNavigate + encodeURIComponent(value);
      return;
    }
    var input = picker.querySelector("[data-picker-input]");
    if (input) {
      input.value = value;
      // htmx listens for change on the input; assigning .value does not fire it.
      input.dispatchEvent(new Event("change", { bubbles: true }));
    }

    // Reflect the choice immediately rather than waiting for a reload.
    picker.querySelectorAll(".picker__option").forEach(function (option) {
      var selected = option.dataset.pickerValue === value;
      option.classList.toggle("is-selected", selected);
      option.setAttribute("aria-selected", selected ? "true" : "false");
    });
    var chosen = picker.querySelector('[data-picker-value="' + CSS.escape(value) + '"]');
    var label = picker.querySelector(".picker__label");
    var avatar = picker.querySelector(".picker__button .picker__avatar");
    if (chosen && label) {
      label.textContent = chosen.querySelector(".picker__option-name").textContent.trim();
    }
    if (chosen && avatar) {
      var source = chosen.querySelector(".picker__avatar");
      if (source) avatar.replaceWith(source.cloneNode(true));
    }
    close(picker);
    if (window.lembas && window.lembas.notify) {
      window.lembas.notify("Model switched to " + (label ? label.textContent : value), {
        kind: "info", timeout: 2000,
      });
    }
  }

  document.addEventListener("click", function (event) {
    var toggle = event.target.closest("[data-picker-toggle]");
    if (toggle) {
      var picker = toggle.closest("[data-picker]");
      var menu = picker.querySelector("[data-picker-menu]");
      if (menu.hidden) open(picker); else close(picker);
      return;
    }

    var option = event.target.closest("[data-picker-value]");
    if (option) {
      choose(option.closest("[data-picker]"), option.dataset.pickerValue);
      return;
    }

    /* A menu item is an action, so the menu has served its purpose the moment
       one is pressed. Only `choose` used to close anything, which left the
       attach menu standing open over the composer after picking from it. The
       item's own handler -- htmx, or the [data-attach] and [data-toggle]
       delegates in app.js -- still runs; this only puts the menu away. */
    var item = event.target.closest('[data-picker-menu] [role="menuitem"]');
    if (item) {
      close(item.closest("[data-picker]"));
      return;
    }

    if (!event.target.closest("[data-picker-menu]")) closeAll(null);
  });

  document.addEventListener("input", function (event) {
    if (!event.target.matches("[data-picker-filter]")) return;
    applyFilter(
      event.target.closest("[data-picker-menu]"),
      event.target.value.trim().toLowerCase()
    );
  });

  document.addEventListener("keydown", function (event) {
    var picker = event.target.closest("[data-picker]");
    if (!picker) return;
    var menu = picker.querySelector("[data-picker-menu]");

    if (event.key === "Escape" && !menu.hidden) {
      event.preventDefault();
      close(picker);
      picker.querySelector("[data-picker-toggle]").focus();
      return;
    }

    if (menu.hidden) {
      if (event.key === "ArrowDown" || event.key === "Enter") {
        if (event.target.matches("[data-picker-toggle]")) {
          event.preventDefault();
          open(picker);
        }
      }
      return;
    }

    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
    event.preventDefault();
    var options = Array.prototype.filter.call(
      menu.querySelectorAll(".picker__option"), function (o) { return !o.hidden; }
    );
    if (!options.length) return;
    var at = options.indexOf(document.activeElement);
    var step = event.key === "ArrowDown" ? 1 : -1;
    var next = at === -1 ? 0 : (at + step + options.length) % options.length;
    options[next].focus();
  });
})();

/*
  Unread replies.

  The sidebar polls /api/chats/unread; the response carries out-of-band spans
  for the dots and, when something has just landed, an HX-Trigger asking for a
  toast. Announcing it here rather than server-side keeps the wording and the
  timing in one place.
*/
document.addEventListener("lembas:unread", function (event) {
  var titles = (event.detail && event.detail.titles) || [];
  if (!titles.length || !window.lembas || !window.lembas.notify) return;

  var message = titles.length === 1
    ? "Reply ready in “" + titles[0] + "”"
    : titles.length + " chats have new replies";
  window.lembas.notify(message, { kind: "success", timeout: 6000 });
});

/*
  A toast asked for by the server.

  Some routes answer 204 because there is nothing to swap, and still have
  something to say -- answering a question that has already timed out, for
  instance. `HX-Trigger: {"lembas:notify": {"message": …}}` is how they say it.
*/
document.addEventListener("lembas:notify", function (event) {
  var detail = event.detail || {};
  if (!detail.message || !window.lembas || !window.lembas.notify) return;
  window.lembas.notify(detail.message, { kind: detail.kind || "" });
});

/*
  Send becomes Stop while a reply is being written.

  One button in the markup (see chat/_composer.html), retargeted here. The
  composer and the streaming bubble are far apart in the document, so the link
  between them is made at runtime: whenever the thread changes, look for a
  message that is still streaming and point the button at it. A
  MutationObserver rather than htmx events, because the bubble is replaced by
  an SSE swap that does not always surface as one.

  This used to build a second button and hide it with the `hidden` attribute,
  which did nothing at all: `.btn` sets `display: inline-flex`, and that beats
  the browser's `[hidden] { display: none }`. app.css now forces the attribute
  to win, and there is only one button to get wrong.
*/
(function () {
  "use strict";

  function streamingMessage() {
    var live = document.querySelector(".msg[sse-connect]");
    if (!live) return null;
    var id = live.id.replace(/^msg-/, "");
    var chat = (live.getAttribute("sse-connect") || "").match(/\/api\/chats\/([^/]+)\//);
    return chat ? { messageId: id, chatId: chat[1] } : null;
  }

  function sync() {
    var button = document.querySelector("[data-composer-action]");
    if (!button) return;
    var active = streamingMessage();

    button.dataset.composerAction = active ? "stop" : "send";
    // As a submit button the form sends; as a plain button the click handler
    // below stops. Nothing else distinguishes the two states.
    button.type = active ? "button" : "submit";
    button.setAttribute("aria-label", active ? "Stop generating" : "Send");
    button.title = active ? "Stop generating" : "";
    button.disabled = false;
  }

  document.addEventListener("click", function (event) {
    var button = event.target.closest('[data-composer-action="stop"]');
    if (!button) return;
    event.preventDefault();

    var target = streamingMessage();
    if (!target) return;
    // Disabled until the next sync, so a second click cannot fire a second
    // request at a generation that is already stopping.
    button.disabled = true;
    fetch(
      "/api/chats/" + target.chatId + "/messages/" + target.messageId + "/stop",
      { method: "POST", credentials: "same-origin" }
    ).catch(function () { button.disabled = false; });
  });

  function watch() {
    var thread = document.getElementById("thread");
    if (thread) {
      new MutationObserver(sync).observe(thread, { childList: true, subtree: true });
    }
    sync();
  }

  document.addEventListener("DOMContentLoaded", watch);
  document.body && document.body.addEventListener("htmx:afterSettle", sync);
})();

/*
  Chat or Agent, on the new-chat composer.

  Two radios rather than a checkbox because they are two kinds of conversation,
  not a setting on one -- and the choice is permanent, so it should read as a
  fork. Picking Agent reveals the connection and directory; picking Chat hides
  them and sets the hidden `kind` back, so a form submitted either way carries
  exactly what it means.
*/
(function () {
  function wire(root) {
    var kind = root.querySelector("#chat-kind");
    var extra = root.querySelector("[data-agent-extra]");
    var picker = root.querySelector('select[name="ssh_profile_id"]');
    var dir = root.querySelector("[data-dir-value]");
    var dirLabel = root.querySelector("[data-dir-label]");
    if (!kind || !extra) return;

    /* The directory is a hidden field plus a button, so the two have to be set
       together or the button shows one path and the form submits another. */
    function setDir(value) {
      if (!dir) return;
      dir.value = value || "";
      if (dirLabel) dirLabel.textContent = value || "the login directory";
    }

    function sync() {
      var chosen = root.querySelector('input[name="kind_choice"]:checked');
      var agent = chosen && chosen.value === "agent";
      kind.value = agent ? "agent" : "chat";
      extra.hidden = !agent;
    }

    function profileDefault() {
      var option = picker && picker.options[picker.selectedIndex];
      return (option && option.dataset.dir) || "";
    }

    root.addEventListener("change", function (event) {
      if (event.target.name === "kind_choice") sync();
      // Following the profile's own directory is a convenience, not a rule:
      // once someone has chosen their own it is left alone.
      if (event.target === picker && dir && !dir.dataset.touched) {
        setDir(profileDefault());
      }
    });

    root.addEventListener("click", function (event) {
      if (!event.target.closest("[data-dir-browse]")) return;
      event.preventDefault();
      var profileId = picker ? picker.value : "";
      if (!profileId) return;
      window.lembas.chooseDirectory(profileId, dir.value, function (chosen) {
        dir.dataset.touched = "1";
        setDir(chosen);
      });
    });

    sync();
    /* Seeded from whichever profile the select is actually showing, not from
       the first in the list -- an unverified first profile renders `disabled`,
       so the two disagreed and the box offered a directory on a machine the
       chat was not going to use. */
    setDir(profileDefault());
  }

  /* The same directory picker, on a form that is not the composer.

     Scoped to `[data-dir-field]`, which the composer's own markup does not
     carry -- otherwise this and `wire()` above would both answer one click and
     open two dialogs. The composer keeps its own handler because it has more to
     do: it follows the selected profile's default directory until somebody
     chooses their own, which only makes sense while a chat is being created.

     A path is something you would rather find than spell, and the text box this
     replaced was the one control on the folder page that asked somebody to
     remember an absolute path on another machine. */
  document.addEventListener("click", function (event) {
    var field = event.target.closest("[data-dir-field]");
    if (!field) return;

    var value = field.querySelector("[data-dir-value]");
    var label = field.querySelector("[data-dir-label]");
    if (!value) return;

    function show(path) {
      value.value = path || "";
      if (label) label.textContent = path || "the connection's own default";
    }

    if (event.target.closest("[data-dir-clear]")) {
      event.preventDefault();
      show("");
      return;
    }
    if (!event.target.closest("[data-dir-browse]")) return;
    event.preventDefault();

    /* The connection this folder points at. Browsing needs one, and saying so
       beats a dialog that opens onto nothing. */
    var form = field.closest("form");
    var picker = form && form.querySelector('select[name="ssh_profile_id"]');
    var profileId = picker ? picker.value : "";
    if (!profileId) {
      window.lembas.notify("Choose a connection first — there is nothing to browse without one.");
      return;
    }
    window.lembas.chooseDirectory(profileId, value.value, show);
  });

  function scan() {
    document.querySelectorAll("[data-agent-picker]").forEach(function (el) {
      if (!el.dataset.wired) { el.dataset.wired = "1"; wire(el); }
    });
  }

  document.addEventListener("DOMContentLoaded", scan);
  document.body && scan();
  document.addEventListener("htmx:afterSettle", scan);
})();