@terminus-ai/cli 0.0.1

package/bin/dev-notification-popup.mjs

@@ -0,0 +1,628 @@
+/*
+ * The local host's notification corner.
+ *
+ * On Terminus a notification lands on the account, the bell in the menu bar
+ * grows a red dot, and a card arrives at the top right in the desk's own
+ * glass. `terminus dev` has no menu bar and no desk, so this is the stand-in:
+ * the same corner, the same card, the same two answers on an invitation —
+ * drawn here in a shadow root so an app's own stylesheet can neither reach it
+ * nor be reached by it.
+ *
+ * It says DEV on every card, because a local harness that cannot be told
+ * from the real thing is a lie about which world you are in. Beyond that it
+ * is cut to match the app it floats over rather than the desk it imitates: the
+ * app's 13px panel radius, the desk's frost made nearly opaque (a card over
+ * somebody's controls must not show them through it), and two lines — who,
+ * then what.
+ *
+ * The measurements are the desk card's, carried here by hand because nothing
+ * of the product's CSS reaches a dev server: 244px wide, an 18px face in the
+ * line of facts rather than an avatar down the side, that line in 12px grey,
+ * the thing itself in 13px, and 22px answers. Keep them in step with
+ * `DraftNoticeBody` and `.aqua-notice-card` in terminus-frontend.
+ */
+
+const POPUP_STYLES = String.raw`
+:host {
+  all: initial;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+/* The column: notifications stack down from the corner, newest on top. */
+.stack {
+  position: fixed;
+  z-index: 2147483647;
+  top: 12px;
+  right: 12px;
+  display: grid;
+  gap: 8px;
+  width: min(244px, calc(100vw - 24px));
+  font: 400 13px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", sans-serif;
+  letter-spacing: -0.01em;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Two lines for one thought: who, then what. It was three — the app's name on
+   a line of its own, then the sender, then the message — and the app's name
+   said nothing, because every card on a dev server comes from the app being
+   developed. The face, the sender and the message are the whole of it; DEV
+   and the time are metadata, so they sit at the end of the first line where
+   metadata goes. */
+.notice {
+  position: relative;
+  display: block;
+  padding: 8px 12px;
+  border: 0.5px solid rgb(0 0 0 / 0.22);
+  /* The app's own panel radius, not the desk's menu radius: this card lives
+     inside an app window and should be cut like the panels next to it. */
+  border-radius: 13px;
+  /* Frosted, not see-through. On the desk a notification floats on wallpaper
+     and translucency is the point; over an app it floats on somebody's
+     controls, and a header icon showing through a card reads as a second
+     button on the card. The blur stays; the see-through does not. */
+  background: color-mix(in srgb, #2d68d8 4%, rgb(250 251 254 / 0.92));
+  -webkit-backdrop-filter: blur(36px) saturate(200%);
+  backdrop-filter: blur(36px) saturate(200%);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.4);
+  color: #1c1c1c;
+  animation: notice-in 200ms cubic-bezier(0.2, 1.24, 0.36, 1) both;
+}
+
+.face {
+  position: relative;
+  display: grid;
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  overflow: hidden;
+  border-radius: 50%;
+  background: linear-gradient(180deg, hsl(var(--hue, 211) 44% 69%), hsl(var(--hue, 211) 42% 53%));
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 0.5px rgb(0 0 0 / 0.06);
+  color: #fff;
+  font-size: 8px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.face img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.text { min-width: 0; }
+
+.top {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: #55565f;
+  font-size: 12px;
+}
+
+.who {
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Which world this is, said once and small. */
+.meta {
+  flex: 0 0 auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.tag {
+  /* The chip and the time share one span, so the line's gap does not reach
+     between them; this does. */
+  margin-right: 4px;
+  padding: 0 4px;
+  border-radius: 3px;
+  background: rgb(8 20 48 / 0.08);
+  color: #4a4d57;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.line {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 4px 0 0;
+  font-size: 13px;
+  line-height: 18px;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.error {
+  margin: 3px 0 0;
+  color: #b03a34;
+  font-size: 11.5px;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.action {
+  border: 0;
+  border-radius: 7px;
+  min-height: 22px;
+  padding: 0 10px;
+  cursor: pointer;
+  font: 590 11px/1.25 inherit;
+  letter-spacing: -0.01em;
+  transition: background 140ms ease, opacity 140ms ease, scale 140ms cubic-bezier(0.2, 1.24, 0.36, 1);
+}
+
+.action:focus-visible {
+  outline: 2px solid rgb(45 104 216 / 0.45);
+  outline-offset: 2px;
+}
+
+.action:active:not(:disabled) { scale: 0.97; }
+.action:disabled { cursor: wait; opacity: 0.55; }
+
+/* The app's own gel, so Accept is the same object as every other affirmative
+   control in the window it floats over. */
+.accept {
+  border: 1px solid transparent;
+  background-image:
+    linear-gradient(rgb(255 255 255 / 0.85), transparent 9px),
+    linear-gradient(rgb(255 255 255 / 0.25) 9px, transparent 9px),
+    linear-gradient(#2d68d8, color-mix(in srgb, #2d68d8 18%, #ffffff)),
+    linear-gradient(color-mix(in srgb, #2d68d8 62%, #06122c), hsl(0 0% 38%));
+  background-origin: padding-box, padding-box, padding-box, border-box;
+  background-clip: padding-box, padding-box, padding-box, border-box;
+  box-shadow: 0 1px 2px rgb(10 35 90 / 0.28);
+  color: #fff;
+}
+
+.accept:hover:not(:disabled) { filter: brightness(1.05); }
+
+.decline {
+  background: rgb(8 20 48 / 0.07);
+  color: #1c1c1c;
+}
+
+.decline:hover:not(:disabled) { background: rgb(8 20 48 / 0.12); }
+
+/* The dismiss, at the end of the first line. Revealed by pointing at the
+   card; always there on a surface that has nothing to point with. */
+.close {
+  display: grid;
+  width: 15px;
+  height: 15px;
+  flex: 0 0 15px;
+  align-self: center;
+  place-items: center;
+  border: 0;
+  border-radius: 9999px;
+  padding: 0;
+  background: rgb(8 20 48 / 0.08);
+  color: rgb(28 28 28 / 0.7);
+  cursor: pointer;
+  font: 400 11px/1 ui-sans-serif, system-ui, sans-serif;
+  opacity: 0;
+  transition: opacity 140ms cubic-bezier(0.2, 0.9, 0.3, 1);
+}
+
+.close:hover { background: rgb(8 20 48 / 0.14); color: #1c1c1c; }
+
+.notice:hover .close,
+.close:focus-visible {
+  opacity: 1;
+  outline: none;
+}
+
+@media (hover: none) {
+  .close { opacity: 1; }
+}
+
+@keyframes notice-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .notice { animation: none; }
+  .action, .close { transition: none; }
+}
+`;
+
+export const DEV_NOTIFICATION_POPUP_PATH = "/__terminus_dev/notification-popup.js";
+/** The corner's own account stream: the member's account frames, which is
+ * what the desk listens to on Terminus — not an app stream, so an open page
+ * never makes its member "online". */
+export const DEV_NOTIFICATION_STREAM_PATH = "/__terminus_dev/notifications/stream";
+/** How often the corner looks without a stream to tell it: never faster. */
+export const DEV_NOTIFICATION_SLOW_POLL_MS = 15_000;
+
+/**
+ * A local-host control, intentionally outside the app SDK. The built app may
+ * create invitations and notifications through `/_terminus`; only this dev
+ * harness surface presents and resolves them, because on Terminus that is the
+ * account's Notification Center, which an app never draws.
+ *
+ * Both kinds are shown, because both are what a person testing an app is
+ * actually told: an invitation is a question with two answers and stays until
+ * one is given, and a notification is a statement that steps aside after a
+ * few seconds the way the desk's does.
+ */
+export const DEV_NOTIFICATION_POPUP_SCRIPT = String.raw`
+(() => {
+  if (document.querySelector("terminus-dev-notification-popup")) return;
+
+  const host = document.createElement("terminus-dev-notification-popup");
+  const root = host.attachShadow({ mode: "open" });
+  const style = document.createElement("style");
+  style.textContent = ${JSON.stringify(POPUP_STYLES)};
+  const stack = document.createElement("div");
+  stack.className = "stack";
+  stack.setAttribute("aria-live", "polite");
+  stack.setAttribute("role", "status");
+  root.append(style, stack);
+  document.documentElement.append(host);
+
+  /** How many arrive at once before the rest wait their turn. */
+  const COLUMN = 3;
+  /** How long a card that only says something stays. */
+  const NOTICE_MS = 8000;
+  /** What is being tested, from the runtime's own bootstrap. The port's owner
+   *  is not named on a card: this window IS that person, and telling them
+   *  their own handle where the sender's belongs is how the first version of
+   *  this read as though @person-2 had written to themselves. */
+  let appName = "";
+  let booted = false;
+  /** The seven hues Chats draws contact monograms in, so a face without a
+   *  picture is the same face here as it is inside the app. */
+  const HUES = [211, 254, 291, 338, 14, 32, 168];
+  const dismissed = new Set();
+  const seen = new Set();
+  let cards = new Map();
+  let refreshing = false;
+  /** A reason to look again that arrived while a look was under way. */
+  let again = false;
+  let resolving = false;
+
+  function ago(value) {
+    const at = Date.parse(value || "");
+    if (!Number.isFinite(at)) return "now";
+    const seconds = Math.max(0, Math.round((Date.now() - at) / 1000));
+    if (seconds < 45) return "now";
+    if (seconds < 3600) return Math.round(seconds / 60) + "m";
+    return Math.round(seconds / 3600) + "h";
+  }
+
+  function build(item) {
+    const notice = document.createElement("div");
+    notice.className = "notice";
+    notice.innerHTML =
+      "<div class='text'><div class='top'><span class='face' aria-hidden='true'></span>"
+      + "<span class='who'></span>"
+      + "<span class='meta'><span class='tag'>Dev</span><span class='when'></span></span>"
+      + "<button class='close' aria-label='Clear notification' title='Clear' type='button'>&times;</button>"
+      + "</div>"
+      + "<p class='line'></p>"
+      + "<p class='error' hidden></p>"
+      + "<div class='actions' hidden>"
+      + "<button class='action accept' type='button'>Accept</button>"
+      + "<button class='action decline' type='button'>Decline</button>"
+      + "</div></div>";
+
+    const face = notice.querySelector(".face");
+    const who = notice.querySelector(".who");
+    const when = notice.querySelector(".when");
+    const line = notice.querySelector(".line");
+    const error = notice.querySelector(".error");
+    const actions = notice.querySelector(".actions");
+    const accept = notice.querySelector(".accept");
+    const decline = notice.querySelector(".decline");
+    const close = notice.querySelector(".close");
+
+    who.textContent = item.who;
+    when.textContent = ago(item.createdAt);
+    paintFace(face, item.from, item.who);
+    line.textContent = item.line;
+    line.hidden = !item.line;
+    actions.hidden = !item.invitation;
+
+    function fail(message) {
+      error.textContent = message;
+      error.hidden = false;
+    }
+
+    function busy(on, label) {
+      resolving = on;
+      accept.disabled = on;
+      decline.disabled = on;
+      close.disabled = on;
+      accept.textContent = label === "accept" ? "Accepting…" : "Accept";
+      decline.textContent = label === "decline" ? "Declining…" : "Decline";
+    }
+
+    async function answer(action) {
+      if (resolving) return;
+      error.hidden = true;
+      busy(true, action);
+      try {
+        const reply = await fetch(
+          "/__terminus_dev/requests/" + encodeURIComponent(item.invitation) + "/" + action,
+          { method: "POST" },
+        );
+        const body = await reply.json().catch(() => null);
+        if (!reply.ok) {
+          throw new Error((body && body.error && body.error.message) || "Could not answer this request");
+        }
+        drop(item.id);
+      } catch (caught) {
+        fail(caught instanceof Error ? caught.message : "Could not answer this request");
+      } finally {
+        busy(false, null);
+        void refresh();
+      }
+    }
+
+    accept.addEventListener("click", () => void answer("accept"));
+    decline.addEventListener("click", () => void answer("decline"));
+    close.addEventListener("click", () => {
+      if (resolving) return;
+      retire(item);
+    });
+
+    // A statement steps aside on its own. A question waits to be answered.
+    if (!item.invitation) {
+      window.setTimeout(() => retire(item), NOTICE_MS);
+    }
+    return notice;
+  }
+
+  /** A monogram, with the platform's portrait over it when there is one — the
+   *  same order the app itself draws, so a face that fails to load reads as
+   *  somebody without a picture rather than as a broken image. */
+  function paintFace(node, person, fallback) {
+    const label = (person && (person.handle || person.display_name)) || fallback || "?";
+    let hash = 0;
+    for (const character of String(label)) hash = (hash * 31 + character.charCodeAt(0)) | 0;
+    node.style.setProperty("--hue", String(HUES[Math.abs(hash) % HUES.length]));
+    const parts = String(label).replace(/^@/, "").split(/[\s._-]+/).filter(Boolean);
+    node.textContent = (parts.slice(0, 2).map((part) => part[0]).join("") || "?").toUpperCase();
+    const source = person && person.avatar_url;
+    if (!source) return;
+    const image = document.createElement("img");
+    image.alt = "";
+    image.src = source;
+    image.addEventListener("load", () => {
+      node.textContent = "";
+      node.append(image);
+    });
+  }
+
+  /**
+   * A statement leaves, and is read when it does — whether it was put away or
+   * simply ran its eight seconds. Only the put-away path used to mark it read,
+   * so a card that timed out stayed unread on the runtime, and every refresh
+   * raised every past message again in a fresh stack: the page's memory of
+   * what it had shown is gone after a reload, and the row still said unread.
+   * A question is only hidden; it comes back until it is actually answered.
+   */
+  function retire(item) {
+    if (!item.invitation && item.notificationId) {
+      void fetch(
+        "/_terminus/notifications/" + encodeURIComponent(item.notificationId) + "/read",
+        { method: "POST" },
+      ).catch(() => undefined);
+    }
+    drop(item.id);
+  }
+
+  function drop(id) {
+    dismissed.add(id);
+    const node = cards.get(id);
+    if (node) node.remove();
+    cards.delete(id);
+  }
+
+  function paint(items) {
+    const wanted = items.filter((item) => !dismissed.has(item.id)).slice(0, COLUMN);
+    const keep = new Set(wanted.map((item) => item.id));
+    for (const [id, node] of cards) {
+      if (keep.has(id)) continue;
+      node.remove();
+      cards.delete(id);
+    }
+    // Newest on top — and a card already on screen is NEVER moved. This used
+    // to re-append every wanted card on every poll to keep the order, and
+    // re-inserting a DOM node restarts its CSS animation: once a second, each
+    // card replayed its entrance from opacity 0, which is the twinkle. A card
+    // is inserted once, at its place; only a genuinely new one goes in, and it
+    // goes in ahead of the ones already there without displacing them.
+    wanted.forEach((item, index) => {
+      let node = cards.get(item.id);
+      if (!node) {
+        node = build(item);
+        cards.set(item.id, node);
+      }
+      const at = stack.children[index] || null;
+      if (at !== node) stack.insertBefore(node, at);
+    });
+  }
+
+  // Signed out of the app (/_terminus/logout): no door answers until the app
+  // is opened again — a page load, which brings a new corner with it — so
+  // this one stops listening and asking instead of collecting 401s.
+  let signedOut = false;
+
+  async function read(path) {
+    const reply = await fetch(path, { cache: "no-store", headers: { accept: "application/json" } });
+    if (reply.status === 401) signedOut = true;
+    if (!reply.ok) throw new Error(path);
+    return reply.json();
+  }
+
+  /** Look again. A reason that arrives while a look is under way is kept and
+   *  answered by one more look as soon as it ends — never dropped, never a
+   *  pile of them. */
+  async function refresh() {
+    if (resolving || signedOut) return;
+    if (refreshing) {
+      again = true;
+      return;
+    }
+    refreshing = true;
+    try {
+      do {
+        again = false;
+        await look();
+      } while (again && !signedOut);
+    } finally {
+      // Same turn as the last check of again: nothing slips between them.
+      refreshing = false;
+    }
+    if (signedOut) quiet();
+  }
+
+  async function look() {
+    try {
+      if (!booted) {
+        booted = true;
+        const boot = await read("/_terminus/bootstrap").catch(() => null);
+        appName = (boot && boot.app && boot.app.name) || "";
+      }
+      const [requests, notices] = await Promise.all([
+        read("/__terminus_dev/requests").catch(() => ({ requests: [] })),
+        read("/_terminus/notifications").catch(() => ({ notifications: [] })),
+      ]);
+      const items = [];
+      for (const request of Array.isArray(requests.requests) ? requests.requests : []) {
+        const inviter = request.inviter || {};
+        items.push({
+          createdAt: request.created_at,
+          from: inviter,
+          id: "invite:" + request.id,
+          invitation: request.id,
+          // The question, in the words it would be asked in: the sender is
+          // already the first line, so the second does not repeat them.
+          line: request.kind === "group"
+            ? "Invited you to " + (request.space_name || "a group")
+            : "Wants to chat with you",
+          who: inviter.display_name || (inviter.handle ? "@" + inviter.handle : "Someone"),
+        });
+      }
+      for (const notice of Array.isArray(notices.notifications) ? notices.notifications : []) {
+        // An invitation's own row is the same question, said twice.
+        if (notice.read_at || notice.kind === "invite") continue;
+        const id = "notice:" + notice.id;
+        // A row that was already on screen once does not come back after it
+        // has stepped aside; only new ones do.
+        if (seen.has(id) && !cards.has(id)) continue;
+        seen.add(id);
+        const from = notice.data && notice.data.from;
+        items.push({
+          createdAt: notice.created_at,
+          from,
+          id,
+          line: notice.body || "",
+          notificationId: notice.id,
+          who: (from && from.display_name) || notice.title || appName || "Notification",
+        });
+      }
+      items.sort((left, right) => (
+        Date.parse(right.createdAt || "") - Date.parse(left.createdAt || "")
+      ));
+      paint(items);
+    } catch {
+      // The app stays usable if the local control plane restarts. The next
+      // look restores the corner rather than turning a dev aid into an error
+      // overlay over the app being developed.
+    }
+  }
+
+  // What tells the corner to look: the member's account stream — a
+  // notification, an invitation answered in another window, a space joined
+  // or gone. Only a corner without one (no EventSource, or a stream that
+  // gave up) polls, and never faster than every ${DEV_NOTIFICATION_SLOW_POLL_MS / 1000} seconds; a
+  // window that comes back always looks.
+  let source = null;
+  let poll = null;
+
+  function slowPoll(on) {
+    if (on && !poll && !signedOut) poll = window.setInterval(() => void refresh(), ${DEV_NOTIFICATION_SLOW_POLL_MS});
+    if (!on && poll) {
+      window.clearInterval(poll);
+      poll = null;
+    }
+  }
+
+  function quiet() {
+    slowPoll(false);
+    if (source) source.close();
+    source = null;
+  }
+
+  function listen() {
+    if (typeof EventSource !== "function") return slowPoll(true);
+    source = new EventSource(${JSON.stringify(DEV_NOTIFICATION_STREAM_PATH)});
+    // Opened, or opened again after the harness restarted: what was missed
+    // meanwhile is read once.
+    source.onopen = () => {
+      slowPoll(false);
+      void refresh();
+    };
+    source.onmessage = (message) => {
+      let frame = null;
+      try {
+        frame = JSON.parse(message.data);
+      } catch {
+        return;
+      }
+      if (frame && frame.type === "account_event") void refresh();
+    };
+    source.onerror = () => {
+      // A dropped stream reconnects by itself; one that gave up leaves the
+      // slow poll in its place.
+      if (source && source.readyState === EventSource.CLOSED) slowPoll(true);
+    };
+  }
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || resolving) return;
+    const newest = [...cards.keys()].pop();
+    if (newest) drop(newest);
+  });
+  window.addEventListener("focus", () => void refresh());
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) void refresh();
+  });
+  listen();
+  void refresh();
+})();
+`;
+
+
+const POPUP_TAG = `<script src="${DEV_NOTIFICATION_POPUP_PATH}" type="module"></script>`;
+
+/** Add the local Terminus host control without touching an app's source. */
+export function injectDevNotificationPopup(html) {
+  if (html.includes(DEV_NOTIFICATION_POPUP_PATH)) return html;
+  const closingBody = html.toLowerCase().lastIndexOf("</body>");
+  if (closingBody < 0) return `${html}${POPUP_TAG}`;
+  return `${html.slice(0, closingBody)}${POPUP_TAG}${html.slice(closingBody)}`;
+}