bom-pi 0.0.0-stage → 0.0.2

package/apps/web/public/avatar.js

@@ -0,0 +1,87 @@
+// People's avatars: their initials in a color of the theme, the same color for the same person everywhere; and the
+// colors of folders, which mark their sessions the same way.
+
+import { html } from "./ui.js";
+
+// The theme's own colors, so people keep their colors in every theme and each one fits it.
+const COLORS = [
+    "var(--o-blue)",
+    "var(--o-green)",
+    "var(--o-yellow)",
+    "var(--o-magenta)",
+    "var(--o-cyan)",
+    "var(--o-red)",
+    "var(--o-orange)",
+    "var(--o-fg-bright)",
+];
+
+/** Folders' colors: the same, without yellow and red, which mark sessions waiting for you and subagents that failed. */
+const FOLDER_COLORS = [
+    "var(--o-blue)",
+    "var(--o-green)",
+    "var(--o-magenta)",
+    "var(--o-cyan)",
+    "var(--o-orange)",
+    "var(--o-fg-bright)",
+];
+
+function hashOf(text) {
+    let hash = 0;
+
+    for (const char of String(text)) {
+        hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+    }
+
+    return hash;
+}
+
+/** A steady color per person, so the same person looks the same on every device. */
+export function personColor(id) {
+    return COLORS[hashOf(id) % COLORS.length];
+}
+
+/** Each folder's color, by path: the list asks for every row as it draws, and a few folders hold most sessions. */
+const folderColors = new Map();
+
+/** A steady color per folder, from its last part, for the mark on its sessions' rows. */
+export function folderColor(path) {
+    const key = String(path ?? "");
+    let color = folderColors.get(key);
+
+    if (color === undefined) {
+        const name = key.replace(/\/+$/, "").split("/").pop();
+
+        color = FOLDER_COLORS[hashOf(name) % FOLDER_COLORS.length];
+        folderColors.set(key, color);
+    }
+
+    return color;
+}
+
+/** "Tanner - Mac" → "TM", "alex" → "AL". */
+export function initials(name) {
+    const words = String(name ?? "?")
+        .trim()
+        .split(/[\s\-_.]+/)
+        .filter(Boolean);
+    const first = words[0] ?? "?";
+
+    return (first[0] + (words.length > 1 ? words[1][0] : (first[1] ?? ""))).toUpperCase();
+}
+
+export function Avatar({ person, size = 24 }) {
+    const state = person.typing ? "typing" : person.away ? "away" : "";
+    const title = person.typing
+        ? `${person.name} is typing`
+        : person.away
+          ? `${person.name} (away)`
+          : person.name;
+
+    return html`<span
+        class=${`avatar ${state}`}
+        style=${`--who:${personColor(person.id)};width:${size}px;height:${size}px`}
+        title=${title}
+    >
+        ${initials(person.name)}
+    </span>`;
+}

package/apps/web/public/back.js

@@ -0,0 +1,554 @@
+// The back stack: what back (a phone's swipe or back button, the browser's) closes, newest first.
+//
+// Each layer over the conversation (a sheet, the drawer, the launcher, the Files tile or Browser panel where they
+// cover the screen, a file opened in the Files tile) is a history entry of its own, so back closes what opened last
+// instead of leaving the session. Routes (`/s/12`) are history entries too, written here so that routes and the layers
+// above them stay in order. This module knows nothing of the app's state: store.js asks for routes and hears when back
+// changes one, and components register their layers with `useBack` (or `addLayer` and `removeLayer`).
+//
+// Each entry this module writes says how many layers it stands for (`history.state.pocket.layers`), and how many steps
+// back the session list's entry is (`back`), when known. A home screen app keeps an entry of the list's under the list
+// itself: the system's swipe back there has no browser page to land on, and would otherwise leave the app blank.
+// The app is the truth and history follows it: a layer closed by a tap takes its entry back off; one opened adds an
+// entry. Going back (the person's own) closes the layers above the entry it lands on.
+
+import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
+
+/** The open layers, oldest first: `{ close, gone, shown }`. */
+const layers = [];
+/** How many layers the current history entry stands for. Entries from before this app wrote any count none. */
+const depth = () => history.state?.pocket?.layers ?? 0;
+/** An iPhone or iPad home screen app: no browser around it, so a back it takes must find something of the app's. */
+const homeScreen = () => navigator.standalone === true;
+/** How long to wait for layers that open and close together (one sheet swapped for another) before writing history. */
+const SETTLE_MS = 40;
+/** How long a traversal this module asked for may take to arrive; one that cannot happen never does. */
+const TRAVERSE_MS = 500;
+
+let routeListener = () => {};
+
+/** Hear when going back or forward changes the route: store.js shows the conversation it names. */
+export function onRoute(listener) {
+    routeListener = listener;
+}
+
+// ─── History, one step at a time ──────────────────────────────────────────────────
+
+/** History's changes, in order: a traversal finishes before the next push, which would otherwise be undone by it. */
+let chain = Promise.resolve();
+
+function queue(step) {
+    chain = chain.then(step).catch((error) => console.error("back stack:", error));
+
+    return chain;
+}
+
+/** The traversal this module asked for: `done` when its popstate arrives. */
+let expected = null;
+
+/**
+ * Go `delta` entries through history and wait until there. With `follow`, the traversal should stay on the route the
+ * app shows, and should it land on another one, the app follows the address.
+ */
+function traverse(delta, { follow = false } = {}) {
+    return new Promise((resolve) => {
+        const done = () => {
+            clearTimeout(timer);
+            expected = null;
+            resolve();
+        };
+
+        const timer = setTimeout(done, TRAVERSE_MS);
+
+        expected = { done, follow };
+        history.go(delta);
+    });
+}
+
+/**
+ * Make history match the open layers: add an entry for each new one, or go back past those closed by a tap. New
+ * entries wait for the page's first tap or key: Chrome's back button skips entries added before anyone touched it.
+ */
+async function reconcile() {
+    // A layer registered by a render that never showed (it threw, and a boundary caught it) was never open.
+    for (const layer of layers.filter((each) => !each.shown)) {
+        removeLayer(layer);
+    }
+
+    // Bounded: an entry that cannot be reached (history cut short) leaves history as it is rather than looping.
+    for (let tries = 0; tries < 4; tries++) {
+        const at = depth();
+
+        if (at > layers.length) {
+            await traverse(layers.length - at, { follow: true });
+        } else {
+            if (at < layers.length && !touched()) {
+                if (!waitingForTap) {
+                    waitingForTap = true;
+                    afterFirstTap(() => {
+                        waitingForTap = false;
+                        settle();
+                    });
+                }
+
+                return;
+            }
+
+            for (let count = at + 1; count <= layers.length; count++) {
+                history.pushState(entry(count), "", location.href);
+            }
+
+            guardRoot();
+
+            return;
+        }
+    }
+}
+
+let waitingForTap = false;
+
+/** Someone has tapped or typed on this page (where the browser says; elsewhere, assume so). */
+const touched = () => navigator.userActivation?.hasBeenActive ?? true;
+
+/**
+ * Run `then` at the page's first tap or key, before what the tap itself does. A finger's lift counts: a long press (a
+ * session row's) makes no click.
+ */
+function afterFirstTap(then) {
+    const once = () => {
+        removeEventListener("click", once, true);
+        removeEventListener("pointerup", once, true);
+        removeEventListener("keydown", once, true);
+        then();
+    };
+
+    addEventListener("click", once, true);
+    addEventListener("pointerup", once, true);
+    addEventListener("keydown", once, true);
+}
+
+/** A layer's entry: its route's, standing for `count` layers. The list goes under the route itself only. */
+function entry(count) {
+    const { listUnder, ...route } = history.state?.pocket ?? {};
+
+    return { pocket: { ...route, layers: count } };
+}
+
+let timer = 0;
+
+function settle() {
+    clearTimeout(timer);
+    timer = setTimeout(() => queue(reconcile), SETTLE_MS);
+}
+
+addEventListener("popstate", (event) => {
+    if (expected) {
+        const { done, follow } = expected;
+
+        done();
+
+        if (follow && location.pathname !== shown) {
+            shown = location.pathname;
+            routeListener();
+        }
+
+        return;
+    }
+
+    // The browser showed back as it does (Safari's swipe slides the page before): what closes goes at once, not again.
+    if (event.hasUAVisualTransition) {
+        document.documentElement.dataset.backShown = "on";
+        setTimeout(() => delete document.documentElement.dataset.backShown, 500);
+    }
+
+    // The person went back or forward: the route first, then the layers above the entry it landed on. Forward goes
+    // further from the session list; anything else counts as back.
+    const back = event.state?.pocket?.back;
+
+    if (location.pathname !== shown) {
+        shown = location.pathname;
+        heading(
+            event.hasUAVisualTransition
+                ? "shown"
+                : typeof back === "number" && typeof shownBack === "number" && back > shownBack
+                  ? "forward"
+                  : "back",
+        );
+    }
+
+    shownBack = back;
+
+    routeListener();
+    const at = event.state?.pocket?.layers ?? 0;
+
+    while (layers.length > at) {
+        const layer = layers.pop();
+
+        layer.gone = true;
+        layer.close();
+    }
+
+    // Forward onto layers that are gone: back down to the ones open.
+    if (at > layers.length) {
+        settle();
+    }
+
+    // A home screen app has no browser page behind it: the swipe must find the app's own list, not a blank page.
+    if (homeScreen()) {
+        guardRoot();
+    }
+});
+
+// ─── Taps that land on what just moved ─────────────────────────────────────────────
+
+/**
+ * When something last came or went at a tap: a layer opened or closed, or a route opened, right after a finger (or a
+ * mouse button) let go. A second tap that follows quickly (a double tap, an impatient one) would land on whatever slid
+ * in under the finger (a tile of the sheet that just rose, a row of the screen that just pushed in, the scrim that
+ * closes it) rather than on anything the person saw, so it is let go, focus and all. Only a finger's or a mouse's:
+ * keys and scripts are not held back. What moves on its own (a reply that opens a session, a sheet the server closes,
+ * Escape) is not at a tap, and holds nothing back.
+ */
+let movedAt = -Infinity;
+let liftedAt = -Infinity;
+const SETTLING_MS = 280;
+const AT_TAP_MS = 400;
+
+const moved = () => {
+    if (performance.now() - liftedAt < AT_TAP_MS) {
+        movedAt = performance.now();
+    }
+};
+
+addEventListener("pointerup", () => (liftedAt = performance.now()), {
+    capture: true,
+    passive: true,
+});
+
+/** A finger's or a mouse's press or click, just after something moved under it. */
+const tooSoon = (event) =>
+    event.isTrusted && event.detail > 0 && performance.now() - movedAt < SETTLING_MS;
+
+// Held back from the press too: a field that slid in under the finger does not take the focus (and the keyboard).
+addEventListener(
+    "mousedown",
+    (event) => {
+        if (tooSoon(event)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    },
+    true,
+);
+addEventListener(
+    "click",
+    (event) => {
+        if (tooSoon(event)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    },
+    true,
+);
+
+// ─── Layers ───────────────────────────────────────────────────────────────────────
+
+/**
+ * A layer opened: back closes it with `close` until `removeLayer` says it closed some other way. `shown` false waits for
+ * the caller to say it showed (`useBack`, once its render is on screen).
+ */
+export function addLayer(close, { shown = true } = {}) {
+    const layer = { close, gone: false, shown };
+
+    layers.push(layer);
+    moved();
+    settle();
+
+    return layer;
+}
+
+/** A layer closed by a tap, a key, or its owner: its history entry goes too. */
+export function removeLayer(layer) {
+    const at = layers.indexOf(layer);
+
+    layer.gone = true;
+
+    if (at !== -1) {
+        layers.splice(at, 1);
+        moved();
+        settle();
+    }
+}
+
+/**
+ * A layer for as long as `open` is true: back calls `close`, which must make `open` false. Registered while rendering,
+ * so a panel and a layer inside it that show together (after a reload) stack in that order, the inner one on top.
+ */
+export function useBack(open, close) {
+    const layer = useRef(null);
+
+    if (layer.current) {
+        layer.current.close = close;
+    }
+
+    if (open && (layer.current === null || layer.current.gone)) {
+        layer.current = addLayer(close, { shown: false });
+    }
+
+    useLayoutEffect(() => {
+        if (layer.current) {
+            layer.current.shown = true;
+        }
+    });
+    useEffect(() => {
+        if (!open && layer.current) {
+            removeLayer(layer.current);
+            layer.current = null;
+        }
+    });
+    useEffect(
+        () => () => {
+            if (layer.current) {
+                removeLayer(layer.current);
+            }
+        },
+        [],
+    );
+}
+
+/** Back has somewhere to go in the app: a layer to close, or a route opened from the session list's. */
+export const canGoBack = () =>
+    layers.length > 0 || depth() > 0 || (history.state?.pocket?.back ?? 0) > 0;
+
+/** Back, as the system's back does it: for gestures of the app's own. */
+export const goBack = () => history.back();
+
+// ─── Routes ───────────────────────────────────────────────────────────────────────
+
+/** The session list's route. */
+const HOME = "/";
+
+/** The route the app shows, ahead of history while layers come off for a new one; how far back the list is from it. */
+let shown = location.pathname;
+let shownBack = history.state?.pocket?.back;
+let routeTimer = 0;
+let homeRequest = 0;
+
+/**
+ * One entry of the list's under it, where the app is a home screen app's root: the system's swipe back then lands on
+ * the app, not on the blank page outside it. An entry already guarded adds none.
+ */
+function guardRoot() {
+    if (
+        !homeScreen() ||
+        location.pathname !== HOME ||
+        layers.length > 0 ||
+        history.state?.pocket?.guard
+    ) {
+        return;
+    }
+
+    history.pushState({ pocket: { layers: 0, back: 0, guard: true } }, "", location.href);
+    shownBack = 0;
+}
+
+/** The window a route slides into (the conversation's, or the list's on phones), whose mark says which way. */
+let routeWindow = null;
+
+/** The route slide ended: its mark goes. A slide that never played (a wide screen, reduced motion) ends on a timer. */
+function landed() {
+    clearTimeout(routeTimer);
+    routeWindow?.removeEventListener("animationend", slid);
+    delete routeWindow?.dataset.route;
+    routeWindow = null;
+}
+
+const slid = (event) => /^route-(forward|back)$/.test(event.animationName) && landed();
+
+/**
+ * Which way the last route change went, for the screen it brings to slide in from that side (style.css): `forward` to
+ * a session, `back` to the one before or up to the list. Only while it slides. On the window, not the page's root: a
+ * mark there would restyle the whole page twice for each route.
+ */
+function heading(way) {
+    landed();
+    routeWindow = document.querySelector(".pane");
+
+    if (routeWindow === null) {
+        return;
+    }
+
+    routeWindow.dataset.route = way;
+    routeWindow.addEventListener("animationend", slid);
+    routeTimer = setTimeout(landed, 600);
+}
+
+/**
+ * A route's slide plays now: what it brings in needs no entrance of its own (`transcript.js`). Only narrower than the
+ * sidebar shows (style.css).
+ */
+export const routeSliding = () => routeWindow !== null && matchMedia("(max-width: 959px)").matches;
+
+/**
+ * Show a route: its own entry, after the layers above this one, so back from it comes back here. With `replace`, it
+ * takes this route's place instead. The history entry follows the app a moment later while open layers come off.
+ */
+export function pushRoute(path, { replace = false } = {}) {
+    // There already, or on the way (history lags while layers come off): nothing more to write.
+    if (path === shown && !replace) {
+        return;
+    }
+
+    homeRequest++;
+    heading(path === HOME ? "back" : "forward");
+    moved();
+    shown = path;
+    queue(async () => {
+        if (depth() > 0) {
+            await traverse(-depth());
+        }
+
+        const here = history.state?.pocket?.back;
+        const back =
+            path === HOME ? 0 : replace ? here : typeof here === "number" ? here + 1 : undefined;
+        const state = { pocket: { layers: 0, back } };
+
+        shownBack = back;
+
+        if (replace) {
+            history.replaceState(state, "", path);
+        } else {
+            history.pushState(state, "", path);
+        }
+    });
+    // Layers still open (a panel that stays) get their entries again, above the new route.
+    settle();
+}
+
+/**
+ * Go up to the session list: back to its entry when it is known, past the sessions opened from it, so back from the
+ * list leaves the app as it would from any first page. Otherwise `fallback`, which shows the list some other way.
+ */
+export function goHome(fallback) {
+    const request = ++homeRequest;
+
+    return queue(() => {
+        if (request !== homeRequest) {
+            return;
+        }
+
+        const state = history.state;
+        const path = shown;
+        const back = state?.pocket?.back;
+        const steps = typeof back === "number" && back > 0 ? back + depth() : 0;
+
+        // Old entries can be dropped. The length also counts forward entries, so even a jump within it may fail.
+        if (steps <= 0 || steps > history.length - 1) {
+            fallback();
+
+            return;
+        }
+
+        return new Promise((resolve) => {
+            const done = () => {
+                clearTimeout(timer);
+                removeEventListener("popstate", done);
+                resolve();
+            };
+
+            const timer = setTimeout(() => {
+                done();
+
+                // A newer request or route must not be undone by recovery from this one.
+                if (request === homeRequest && shown === path && history.state === state) {
+                    fallback();
+                }
+            }, TRAVERSE_MS);
+
+            // Keep normal popstate handling: Home closes layers as well as changing the route.
+            addEventListener("popstate", done);
+            history.go(-steps);
+        });
+    });
+}
+
+/**
+ * Start: on a fresh page (not a reload, which keeps its entries), mark the entry, and when it opens a conversation
+ * straight away (a link, a notification, a home screen icon that remembers) and `home` asks for it, put the session
+ * list under it, so back goes there rather than out of the app.
+ */
+export function startHistory({ home }) {
+    const pocket = history.state?.pocket;
+
+    if (pocket && !pocket.listUnder) {
+        settle();
+
+        return;
+    }
+
+    if (location.pathname === HOME) {
+        history.replaceState({ pocket: { layers: 0, back: 0 } }, "", location.href);
+        guardRoot();
+    } else if (home) {
+        if (homeScreen()) {
+            listUnderNow();
+        } else {
+            listUnderOnFirstTap();
+        }
+    } else {
+        history.replaceState({ pocket: { layers: 0 } }, "", location.href);
+    }
+
+    shownBack = history.state.pocket.back;
+    settle();
+}
+
+/**
+ * Put the list's entry under a conversation opened in a home screen app at once, not at the first tap: a system swipe
+ * back there must find the list before anyone has touched the page. The list's own entry under it keeps the next one
+ * from leaving too (`guardRoot`).
+ */
+function listUnderNow() {
+    const here = location.pathname + location.search + location.hash;
+
+    history.replaceState({ pocket: { layers: 0, back: 0 } }, "", HOME);
+    history.pushState({ pocket: { layers: 0, back: 0, guard: true } }, "", HOME);
+    history.pushState({ pocket: { layers: 0, back: 1 } }, "", here);
+}
+
+/**
+ * Put the session list's entry under this conversation's at the first tap or key, not before: Chrome's back button
+ * skips entries a page adds before anyone has touched it. Marked meanwhile, so a reload before then still does it.
+ */
+function listUnderOnFirstTap() {
+    history.replaceState({ pocket: { layers: 0, listUnder: true } }, "", location.href);
+
+    const put = () => {
+        // A layer open above it (a notification opened the chat): at a tap once it has closed.
+        if (depth() > 0) {
+            return;
+        }
+
+        removeEventListener("click", put, true);
+        removeEventListener("keydown", put, true);
+
+        // Gone to another route already: history stays as it is.
+        if (!history.state?.pocket?.listUnder) {
+            return;
+        }
+
+        const here = location.pathname + location.search + location.hash;
+
+        history.replaceState({ pocket: { layers: 0, back: 0 } }, "", HOME);
+        history.pushState({ pocket: { layers: 0, back: 1 } }, "", here);
+        shownBack = 1;
+    };
+
+    addEventListener("click", put, true);
+    addEventListener("keydown", put, true);
+}
+
+/** Change the address without a new entry (dropping a query the app has read), keeping what this module wrote. */
+export function replaceAddress(path) {
+    history.replaceState(history.state, "", path);
+}