fauna-api 0.0.0-stage → 1.0.679

package/dist/src/ui/chatPanel.js

@@ -0,0 +1,768 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+import gsap from "gsap";
+import { Fauna } from "../../index.js";
+import { View, createView } from "./view.js";
+export function createPanelBus() {
+    const listeners = new Set();
+    return {
+        open: (a) => { for (const l of listeners)
+            l.open?.(a); },
+        point: (a) => { for (const l of listeners)
+            l.point?.(a); },
+        added: () => { for (const l of listeners)
+            l.added?.(); },
+        listen(handlers) {
+            listeners.add(handlers);
+            return () => { listeners.delete(handlers); };
+        },
+    };
+}
+/** A file part from a message as an attachment of this chat. */
+export function attachmentOf(room, part, message) {
+    return Fauna.Parrot.Share.Attachment.fromJSON({ ...part, chat: room.chatId ?? "", ...(message !== undefined ? { message } : {}) }, room.getAuthorization());
+}
+function keyOf(attachment) {
+    const auth = attachment.file.authorization;
+    return attachment.ref || auth.accessCode || attachment.file.name;
+}
+function iconOf(contentType, name) {
+    if (contentType.startsWith("image/"))
+        return "image";
+    if (contentType.startsWith("video/"))
+        return "movie";
+    if (contentType.startsWith("audio/"))
+        return "audio_file";
+    if (contentType === "application/pdf")
+        return "picture_as_pdf";
+    if (contentType === "text/csv" || /\.csv$/i.test(name))
+        return "table_chart";
+    if (Fauna.View.isText(contentType, name))
+        return "description";
+    return "draft";
+}
+function when(at) {
+    const seconds = Math.round((Date.now() - at.getTime()) / 1000);
+    if (seconds < 60)
+        return "just now";
+    if (seconds < 3600)
+        return `${Math.floor(seconds / 60)} min ago`;
+    if (seconds < 86400)
+        return `${Math.floor(seconds / 3600)} h ago`;
+    return at.toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}
+function personName(profile) {
+    return profile?.displayName || profile?.email?.split("@")[0] || "Someone";
+}
+/** One object URL per file for the session; null when the file has no preview. */
+const previewUrls = new Map();
+const previewListeners = new Map();
+const previewStarts = new WeakMap();
+const nearScreen = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+        if (!entry.isIntersecting)
+            continue;
+        nearScreen.unobserve(entry.target);
+        previewStarts.get(entry.target)?.();
+        previewStarts.delete(entry.target);
+    }
+}, { rootMargin: "200px" });
+function loadPreview(file, revalidate) {
+    return file.preview(revalidate).then((bytes) => bytes ? URL.createObjectURL(new Blob([new Uint8Array(bytes)], { type: "image/webp" })) : null, () => null);
+}
+/**
+ * Tell `onUrl` the file's preview once `target` nears the screen, and again whenever
+ * it's refreshed. Returns a function that stops listening.
+ */
+export function watchPreview(target, source, onUrl) {
+    const { key, file } = source;
+    let listeners = previewListeners.get(key);
+    if (!listeners)
+        previewListeners.set(key, listeners = new Set());
+    listeners.add(onUrl);
+    const start = () => {
+        let url = previewUrls.get(key);
+        if (!url)
+            previewUrls.set(key, url = loadPreview(file, false));
+        void url.then((u) => { if (listeners.has(onUrl))
+            onUrl(u); });
+    };
+    if (previewUrls.has(key) || !nearScreen)
+        start();
+    else {
+        previewStarts.set(target, start);
+        nearScreen.observe(target);
+    }
+    return () => {
+        listeners.delete(onUrl);
+        nearScreen?.unobserve(target);
+        previewStarts.delete(target);
+    };
+}
+/** The file changed: fetch its preview again and show it everywhere it's shown. */
+export function refreshPreview(source) {
+    const old = previewUrls.get(source.key);
+    const url = loadPreview(source.file, true);
+    previewUrls.set(source.key, url);
+    void url.then((u) => {
+        for (const onUrl of [...(previewListeners.get(source.key) ?? [])])
+            onUrl(u);
+        void old?.then((o) => { if (o && o !== u)
+            URL.revokeObjectURL(o); });
+    });
+}
+/** Show `url` in a holder that keeps its type icon underneath for when there's none. */
+export function paintPreview(holder, url) {
+    let img = holder.querySelector(":scope > img");
+    if (!url) {
+        img?.remove();
+        holder.classList.remove("chat-file-thumb-on");
+        return;
+    }
+    if (!img) {
+        img = document.createElement("img");
+        img.alt = "";
+        img.draggable = false;
+        holder.appendChild(img);
+    }
+    img.src = url;
+    holder.classList.add("chat-file-thumb-on");
+}
+/** A file's preview in a holder built outside React; it stops listening once the holder leaves the page. */
+export function showPreview(holder, source) {
+    let shown = false;
+    const stop = watchPreview(holder, source, (url) => {
+        if (shown && !holder.isConnected)
+            return stop();
+        shown = true;
+        paintPreview(holder, url);
+    });
+}
+/** A file card for a message: its preview when the file has one, else its type icon. Click opens it. */
+export function buildAttachmentCard(name, contentType, onOpen, iconMap, preview) {
+    const card = document.createElement(onOpen ? "button" : "div");
+    card.className = "chat-message-file";
+    if (onOpen) {
+        ;
+        card.type = "button";
+        card.classList.add("chat-message-file-open");
+        card.title = `Open ${name}`;
+        card.addEventListener("click", (e) => {
+            e.stopPropagation();
+            onOpen();
+        });
+    }
+    const thumb = document.createElement("span");
+    thumb.className = "chat-file-thumb chat-message-file-thumb";
+    if (contentType.startsWith("video/"))
+        thumb.classList.add("chat-file-thumb-video");
+    const icon = document.createElement("span");
+    icon.className = "material-symbols-outlined chat-message-file-preview";
+    icon.textContent = iconMap?.[contentType] ?? iconOf(contentType, name);
+    thumb.appendChild(icon);
+    card.appendChild(thumb);
+    if (preview)
+        showPreview(thumb, preview);
+    const label = document.createElement("span");
+    label.className = "chat-message-file-label";
+    label.textContent = name;
+    card.appendChild(label);
+    return card;
+}
+/** A file's view in a popup, for hosts without a side panel. */
+export function openViewModal(target) {
+    const veil = document.createElement("div");
+    veil.className = "chat-view-modal";
+    const box = document.createElement("div");
+    box.className = "chat-view-modal-box";
+    const close = document.createElement("button");
+    close.type = "button";
+    close.className = "material-symbols-outlined chat-view-modal-close";
+    close.title = "Close";
+    close.textContent = "close";
+    const body = document.createElement("div");
+    body.className = "chat-view-modal-body";
+    box.append(close, body);
+    veil.appendChild(box);
+    document.body.appendChild(veil);
+    const view = createView(body, target);
+    const shut = () => {
+        view.destroy();
+        veil.remove();
+        document.removeEventListener("keydown", onKey);
+    };
+    const onKey = (e) => { if (e.key === "Escape")
+        shut(); };
+    close.onclick = shut;
+    veil.addEventListener("click", (e) => { if (e.target === veil)
+        shut(); });
+    document.addEventListener("keydown", onKey);
+}
+// ─── The side panel ──────────────────────────────────────────────────────────
+/** A row's small preview, with the type icon until (or unless) the file has one. */
+function RowThumb({ attachment }) {
+    const holder = useRef(null);
+    const [url, setUrl] = useState(null);
+    const key = keyOf(attachment);
+    useEffect(() => {
+        if (!holder.current)
+            return;
+        return watchPreview(holder.current, { key, file: attachment.file }, setUrl);
+    }, [key, attachment.file]);
+    return (_jsxs("span", { ref: holder, className: `chat-file-thumb chat-panel-row-thumb${url ? " chat-file-thumb-on" : ""}`, children: [_jsx("span", { className: "material-symbols-outlined chat-panel-row-icon", children: iconOf(attachment.file.contentType, attachment.file.name) }), url && _jsx("img", { src: url, alt: "", draggable: false })] }));
+}
+const WIDTH_KEY = "fauna-chat-panel-width";
+const MIN_WIDTH = 280;
+/** The chat keeps at least this much beside the panel; narrower, the panel covers it. */
+const CHAT_MIN_WIDTH = 400;
+/** The panel slides in and out like the apps' left navigation. */
+const SLIDE = { duration: 0.5, ease: "power2.out" };
+export function ChatPanel({ room, bus, open, onOpenChange }) {
+    const [attachments, setAttachments] = useState(null);
+    const [failed, setFailed] = useState(false);
+    const [tabs, setTabs] = useState([]);
+    const [active, setActive] = useState("attachments");
+    const [selected, setSelected] = useState(null);
+    const [width, setWidth] = useState(() => Number(localStorage.getItem(WIDTH_KEY)) || 440);
+    const [rootWidth, setRootWidth] = useState(0);
+    const panel = useRef(null);
+    const loaded = useRef(false);
+    const refresh = useRef(null);
+    const entered = useRef(false);
+    const closing = useRef(null);
+    const layout = useRef({ cover: false, shown: 0 });
+    /** Slide back open from wherever a close got to. */
+    const slideBack = useCallback(() => {
+        const el = panel.current;
+        if (!el || !closing.current)
+            return;
+        closing.current.kill();
+        closing.current = null;
+        gsap.to(el, layout.current.cover ? { xPercent: 0, ...SLIDE } : { width: layout.current.shown, ...SLIDE });
+    }, []);
+    const load = useCallback(() => {
+        room.attachments().then((list) => {
+            setAttachments(list);
+            setFailed(false);
+        }, () => setFailed(true));
+    }, [room]);
+    useEffect(() => {
+        if (open && !loaded.current) {
+            loaded.current = true;
+            load();
+        }
+    }, [open, load]);
+    const openTab = useCallback((attachment, everyone) => {
+        const key = keyOf(attachment);
+        setTabs((current) => current.some((t) => t.key === key) ? current : [...current, { key, attachment, people: [] }]);
+        setActive(key);
+        slideBack();
+        if (everyone || !open)
+            onOpenChange(true);
+    }, [open, onOpenChange, slideBack]);
+    useEffect(() => bus.listen({
+        open: (a) => openTab(a, false),
+        point: (a) => openTab(a, true),
+        added: () => {
+            if (!loaded.current)
+                return;
+            if (refresh.current)
+                clearTimeout(refresh.current);
+            refresh.current = setTimeout(load, 400);
+        },
+    }), [bus, openTab, load]);
+    const closeTab = (key) => {
+        setTabs((current) => current.filter((t) => t.key !== key));
+        if (active === key)
+            setActive("attachments");
+    };
+    const setPeople = useCallback((key, people) => {
+        setTabs((current) => current.map((t) => t.key === key ? { ...t, people } : t));
+    }, []);
+    useLayoutEffect(() => {
+        const root = panel.current?.parentElement;
+        if (!open || !root)
+            return;
+        const observer = new ResizeObserver(() => setRootWidth(root.clientWidth));
+        observer.observe(root);
+        setRootWidth(root.clientWidth);
+        return () => observer.disconnect();
+    }, [open]);
+    const cover = rootWidth > 0 && rootWidth < MIN_WIDTH + CHAT_MIN_WIDTH;
+    const shown = rootWidth > 0 ? Math.max(MIN_WIDTH, Math.min(width, rootWidth - CHAT_MIN_WIDTH)) : width;
+    layout.current = { cover, shown };
+    // Slide in once the room for it is measured, so it lands at its real width.
+    useLayoutEffect(() => {
+        if (!open) {
+            entered.current = false;
+            return;
+        }
+        const el = panel.current;
+        if (!el || rootWidth === 0 || entered.current)
+            return;
+        entered.current = true;
+        if (cover)
+            gsap.fromTo(el, { xPercent: 100 }, { xPercent: 0, ...SLIDE });
+        else
+            gsap.fromTo(el, { width: 0 }, { width: shown, ...SLIDE });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open, rootWidth]);
+    const hide = () => {
+        const el = panel.current;
+        if (!el)
+            return onOpenChange(false);
+        gsap.killTweensOf(el);
+        closing.current = gsap.to(el, {
+            ...(layout.current.cover ? { xPercent: 100 } : { width: 0 }),
+            ...SLIDE,
+            onComplete: () => {
+                closing.current = null;
+                onOpenChange(false);
+            },
+        });
+    };
+    const startResize = (e) => {
+        e.preventDefault();
+        if (panel.current)
+            gsap.killTweensOf(panel.current);
+        const startX = e.clientX;
+        const startWidth = shown;
+        const move = (ev) => {
+            const most = (panel.current?.parentElement?.clientWidth ?? window.innerWidth) - CHAT_MIN_WIDTH;
+            setWidth(Math.max(MIN_WIDTH, Math.min(most, startWidth + (startX - ev.clientX))));
+        };
+        const up = () => {
+            window.removeEventListener("pointermove", move);
+            window.removeEventListener("pointerup", up);
+            setWidth((w) => { localStorage.setItem(WIDTH_KEY, String(Math.round(w))); return w; });
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+    };
+    if (!open)
+        return null;
+    return (_jsxs("div", { className: `chat-panel${cover ? " chat-panel-cover" : ""}`, ref: panel, style: cover ? undefined : { width: shown }, children: [!cover && _jsx("div", { className: "chat-panel-handle", onPointerDown: startResize, title: "Drag to resize" }), _jsxs("div", { className: "chat-panel-inner", style: cover ? undefined : { width: shown }, children: [_jsxs("div", { className: "chat-panel-tabs", children: [_jsxs("button", { className: `chat-panel-tab${active === "attachments" ? " chat-panel-tab-on" : ""}`, onClick: () => setActive("attachments"), children: [_jsx("span", { className: "material-symbols-outlined", children: "attach_file" }), _jsx("span", { className: "chat-panel-tab-name", children: "Attachments" })] }), tabs.map((tab) => (_jsxs("div", { className: `chat-panel-tab${active === tab.key ? " chat-panel-tab-on" : ""}`, onClick: () => setActive(tab.key), title: tab.attachment.file.name, children: [_jsx("span", { className: "material-symbols-outlined", children: iconOf(tab.attachment.file.contentType, tab.attachment.file.name) }), _jsx("span", { className: "chat-panel-tab-name", children: tab.attachment.file.name }), tab.people.length > 0 && _jsx("span", { className: "chat-panel-tab-people", title: tab.people.map((p) => personName(p.profile)).join(", "), children: tab.people.length }), _jsx("button", { className: "material-symbols-outlined chat-panel-tab-close", title: "Close", "aria-label": `Close ${tab.attachment.file.name}`, onClick: (e) => { e.stopPropagation(); closeTab(tab.key); }, children: "close" })] }, tab.key))), _jsx("span", { className: "chat-panel-tabs-gap" }), _jsx("button", { className: "material-symbols-outlined chat-panel-hide", title: "Hide", "aria-label": "Hide attachments", onClick: hide, children: "right_panel_close" })] }), _jsxs("div", { className: "chat-panel-body", children: [_jsx("div", { className: "chat-panel-list", style: active === "attachments" ? undefined : { display: "none" }, children: attachments === null
+                                    ? _jsx("div", { className: "chat-panel-empty", children: failed ? "Couldn't load the attachments." : "Loading\u2026" })
+                                    : attachments.length === 0
+                                        ? _jsx("div", { className: "chat-panel-empty", children: "Files sent in this chat, and files Parrot opens, show up here." })
+                                        : attachments.map((a) => {
+                                            const key = keyOf(a);
+                                            return (_jsxs("div", { className: `chat-panel-row${selected === key ? " chat-panel-row-on" : ""}`, tabIndex: 0, onClick: () => setSelected(key), onDoubleClick: () => openTab(a, false), onKeyDown: (e) => { if (e.key === "Enter")
+                                                    openTab(a, false); }, children: [_jsx(RowThumb, { attachment: a }), _jsxs("div", { className: "chat-panel-row-text", children: [_jsx("div", { className: "chat-panel-row-name", children: a.file.name }), _jsxs("div", { className: "chat-panel-row-meta", children: [a.author ? personName(a.author) : "Parrot", ", ", when(a.createdAt)] })] })] }, key));
+                                        }) }), tabs.map((tab) => (_jsx("div", { className: "chat-panel-view", style: active === tab.key ? undefined : { display: "none" }, children: _jsx(View, { target: tab.attachment, onPeople: (people) => setPeople(tab.key, people), onSaved: () => refreshPreview({ key: tab.key, file: tab.attachment.file }) }) }, tab.key)))] })] })] }));
+}
+function reducedMotion() {
+    return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+}
+/** A popup coming in: a short rise and scale from `origin`, then its `rows` one after another. */
+function popIn(el, origin, rows) {
+    if (reducedMotion())
+        return;
+    gsap.fromTo(el, { autoAlpha: 0, y: 8, scale: 0.96, transformOrigin: origin }, { autoAlpha: 1, y: 0, scale: 1, duration: 0.28, ease: "back.out(1.7)" });
+    const items = el.querySelectorAll(rows);
+    if (items.length) {
+        gsap.fromTo(items, { autoAlpha: 0, y: 6 }, { autoAlpha: 1, y: 0, duration: 0.24, stagger: 0.035, delay: 0.05, ease: "power2.out", clearProps: "opacity,visibility,transform" });
+    }
+}
+/** A dialog coming in over its veil. */
+function popInDialog(veil, box) {
+    if (reducedMotion())
+        return;
+    gsap.fromTo(veil, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.22, ease: "power1.out" });
+    popIn(box, "50% 60%", ":scope > *");
+}
+/** A popup going away, then `done`. With `inner`, `el` is a veil that fades while `inner` sinks. */
+function popOut(el, done, inner) {
+    if (reducedMotion()) {
+        done();
+        return;
+    }
+    if (inner) {
+        gsap.killTweensOf([el, inner]);
+        gsap.to(inner, { y: 8, scale: 0.97, duration: 0.18, ease: "power2.in" });
+        gsap.to(el, { autoAlpha: 0, duration: 0.18, ease: "power2.in", onComplete: done });
+        return;
+    }
+    gsap.killTweensOf(el);
+    gsap.to(el, { autoAlpha: 0, y: 6, scale: 0.97, duration: 0.16, ease: "power2.in", onComplete: done });
+}
+/** A holder that only keeps its pick, for a form that saves it later (a new timeline's repository). */
+export function pickedRepository(authorization, group) {
+    const listeners = new Set();
+    const holder = {
+        picked: null,
+        get repository() { return holder.picked?.id ?? null; },
+        group,
+        getAuthorization: () => authorization,
+        async setRepository(repository) {
+            holder.picked = repository;
+            for (const listener of listeners)
+                listener(repository?.id ?? null);
+        },
+        watchRepository(listener) {
+            listeners.add(listener);
+            return () => { listeners.delete(listener); };
+        },
+    };
+    return holder;
+}
+/** Resolves once the room has `repository` (an app passes it on), or after a while either way. */
+export function roomHas(room, repository, signal, ms = 15000) {
+    if (room.repository === repository)
+        return Promise.resolve();
+    return new Promise((resolve) => {
+        let stop = () => { };
+        const finish = () => { clearTimeout(timer); stop(); resolve(); };
+        const timer = setTimeout(finish, ms);
+        stop = room.watchRepository((current) => { if (current === repository)
+            finish(); });
+        signal?.addEventListener("abort", finish, { once: true });
+    });
+}
+function statusLabel(repository) {
+    const status = repository?.machine?.status;
+    if (status === "RUNNING")
+        return "Running";
+    if (status === "BOOTING")
+        return "Starting";
+    if (status === "STOPPING")
+        return "Saving";
+    return "Stopped";
+}
+/**
+ * The chat's repository in the message box: a button to attach one (pick or make
+ * one of the chat owner's), and once attached a chip with its name and whether its
+ * machine is running, with Open in Termite and Detach. While a reply runs it
+ * rests, faded and out of reach: the reply finishes on the repository it started with.
+ */
+export function RepositoryControl({ holder, replying = false, onOpenRepository, onChange, suggestedName = "", placement = "up" }) {
+    const [id, setId] = useState(holder.repository);
+    const [info, setInfo] = useState(null);
+    const [menu, setMenu] = useState(false);
+    const [list, setList] = useState(null);
+    const [name, setName] = useState(suggestedName);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+    const box = useRef(null);
+    const menuRef = useRef(null);
+    const closing = useRef(false);
+    const shaking = useRef(null);
+    const group = holder.group;
+    const auth = holder.getAuthorization();
+    useEffect(() => { setName((current) => current || suggestedName); }, [suggestedName]);
+    const closeMenu = useCallback(() => {
+        if (!menuRef.current || closing.current)
+            return;
+        closing.current = true;
+        popOut(menuRef.current, () => {
+            closing.current = false;
+            setMenu(false);
+            setList(null);
+        });
+    }, []);
+    const toggleMenu = () => { if (menu)
+        closeMenu();
+    else
+        setMenu(true); };
+    useLayoutEffect(() => {
+        if (menu && menuRef.current)
+            popIn(menuRef.current, placement === "down" ? "100% 0%" : "100% 100%", ".chat-repository-current, .chat-repository-heading, .chat-shimmer, .chat-repository-option, .chat-repository-new");
+    }, [menu, placement]);
+    // Rows that arrive after the menu opened follow one after another too.
+    useLayoutEffect(() => {
+        if (!menu || !list || !menuRef.current || reducedMotion())
+            return;
+        const rows = menuRef.current.querySelectorAll(".chat-repository-option, .chat-repository-empty");
+        if (rows.length)
+            gsap.fromTo(rows, { autoAlpha: 0, y: 4 }, { autoAlpha: 1, y: 0, duration: 0.2, stagger: 0.03, ease: "power2.out", clearProps: "opacity,visibility,transform" });
+    }, [list, menu]);
+    useEffect(() => {
+        const el = box.current;
+        if (!el)
+            return;
+        el.style.pointerEvents = replying ? "none" : "";
+        if (replying)
+            closeMenu();
+        gsap.to(el, { opacity: replying ? 0.4 : 1, duration: reducedMotion() ? 0 : 0.3, ease: "power2.out" });
+    }, [replying, closeMenu]);
+    /** The box icon shakes on hover, like the paperclip turns and send tilts. */
+    const hover = (e, on) => {
+        const target = e.currentTarget;
+        gsap.to(target, { duration: 0.3, color: on ? "var(--chat-text, #1a1a1a)" : "var(--chat-accent, #888)", ease: "power2.inOut" });
+        const icon = target.classList.contains("material-symbols-outlined") ? target : target.querySelector(".material-symbols-outlined");
+        if (!on || !icon || reducedMotion())
+            return;
+        shaking.current?.kill();
+        const shake = gsap.timeline();
+        for (const rotation of [-14, 12, -8, 5, 0])
+            shake.to(icon, { rotation, duration: 0.09, ease: "sine.inOut", transformOrigin: "50% 60%" });
+        shaking.current = shake;
+    };
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => {
+        setId(holder.repository);
+        return holder.watchRepository((repository) => { setId(repository); onChangeRef.current?.(repository); });
+    }, [holder]);
+    useEffect(() => {
+        if (id === null) {
+            setInfo(null);
+            return;
+        }
+        let active = true;
+        const refresh = () => Fauna.Termite.Versioning.get(auth, id, group ? { group } : undefined)
+            .then((repository) => { if (active)
+            setInfo(repository); }, () => { if (active)
+            setInfo(null); });
+        void refresh();
+        const timer = setInterval(refresh, 15000);
+        return () => { active = false; clearInterval(timer); };
+    }, [id, auth, group]);
+    useEffect(() => {
+        if (!menu)
+            return;
+        setError("");
+        let active = true;
+        Fauna.Termite.Versioning.list(auth, group ? { group } : undefined).then((repositories) => { if (active)
+            setList(repositories); }, (err) => { if (active)
+            setError(err.message); });
+        const onDown = (e) => { if (!box.current?.contains(e.target))
+            closeMenu(); };
+        const onKey = (e) => { if (e.key === "Escape")
+            closeMenu(); };
+        document.addEventListener("mousedown", onDown);
+        document.addEventListener("keydown", onKey);
+        return () => {
+            active = false;
+            document.removeEventListener("mousedown", onDown);
+            document.removeEventListener("keydown", onKey);
+        };
+    }, [menu, auth, group, closeMenu]);
+    const attach = async (repository) => {
+        setBusy(true);
+        setError("");
+        try {
+            await holder.setRepository(repository);
+            setId(repository?.id ?? null);
+            closeMenu();
+        }
+        catch (err) {
+            setError(err?.message ?? "Couldn't change the repository.");
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const create = async () => {
+        const trimmed = name.trim();
+        if (!trimmed)
+            return;
+        setBusy(true);
+        setError("");
+        try {
+            const repository = await Fauna.Termite.Versioning.create(auth, { name: trimmed, ...(group ? { group } : {}) });
+            setName("");
+            await attach(repository);
+        }
+        catch (err) {
+            setError(err?.message ?? "Couldn't make the repository.");
+            setBusy(false);
+        }
+    };
+    const status = statusLabel(info);
+    const others = list?.filter((r) => r.id !== id) ?? null;
+    return (_jsxs("div", { className: placement === "down" ? "chat-repository chat-repository-down" : "chat-repository", ref: box, children: [id === null
+                ? _jsx("span", { className: "material-symbols-outlined chat-repository-button", title: "Attach a repository", onClick: toggleMenu, onMouseEnter: (e) => hover(e, true), onMouseLeave: (e) => hover(e, false), children: "deployed_code" })
+                : (_jsxs("button", { type: "button", className: "chat-repository-chip", title: `${info?.name ?? "Repository"}, ${status}`, onClick: toggleMenu, onMouseEnter: (e) => hover(e, true), onMouseLeave: (e) => hover(e, false), children: [_jsx("span", { className: "material-symbols-outlined", children: "deployed_code" }), _jsx("span", { className: "chat-repository-name", children: info?.name ?? "Repository" }), _jsx("span", { className: `chat-repository-dot chat-repository-${status.toLowerCase()}` })] })), menu && (_jsxs("div", { className: "chat-repository-menu", ref: menuRef, children: [id !== null && (_jsxs("div", { className: "chat-repository-current", children: [_jsxs("div", { className: "chat-repository-current-row", children: [_jsx("span", { className: "material-symbols-outlined", children: "deployed_code" }), _jsxs("div", { className: "chat-repository-current-text", children: [_jsx("div", { className: "chat-repository-current-name", children: info?.name ?? "Repository" }), _jsxs("div", { className: "chat-repository-current-status", children: [_jsx("span", { className: `chat-repository-dot chat-repository-${status.toLowerCase()}` }), status] })] })] }), _jsxs("div", { className: "chat-repository-actions", children: [onOpenRepository && _jsx("button", { type: "button", onClick: () => { onOpenRepository(id); closeMenu(); }, children: "Open in Termite" }), _jsx("button", { type: "button", disabled: busy, onClick: () => void attach(null), children: "Detach" })] })] })), _jsx("div", { className: "chat-repository-heading", children: id === null ? "Work in a repository" : "Switch to another" }), _jsxs("div", { className: "chat-repository-list", children: [others === null && !error && _jsxs(_Fragment, { children: [_jsx("div", { className: "chat-shimmer" }), _jsx("div", { className: "chat-shimmer" })] }), others?.map((r) => (_jsxs("button", { type: "button", className: "chat-repository-option", disabled: busy, onClick: () => void attach(r), children: [_jsx("span", { className: "material-symbols-outlined", children: "deployed_code" }), _jsx("span", { className: "chat-repository-option-name", children: r.name || `Repository ${r.id}` }), _jsx("span", { className: `chat-repository-dot chat-repository-${statusLabel(r).toLowerCase()}`, title: statusLabel(r) })] }, r.id))), others?.length === 0 && (_jsx("div", { className: "chat-repository-empty", children: id !== null ? "No other repositories yet." : group ? "This group has no repositories yet." : "You have no repositories yet." }))] }), _jsxs("form", { className: "chat-repository-new", onSubmit: (e) => { e.preventDefault(); void create(); }, children: [_jsx("input", { value: name, placeholder: "New repository name", onChange: (e) => setName(e.target.value), disabled: busy }), _jsx("button", { type: "submit", disabled: busy || !name.trim(), children: "Create" })] }), error && _jsx("div", { className: "chat-repository-error", children: error })] }))] }));
+}
+/** The repository control in a node the chat engine owns; `setReplying` rests it while a reply runs. */
+export function mountRepositoryControl(container, holder, onOpenRepository, onChange) {
+    const root = createRoot(container);
+    let current = null;
+    const render = (replying) => {
+        if (replying === current)
+            return;
+        current = replying;
+        root.render(_jsx(RepositoryControl, { holder: holder, replying: replying, onOpenRepository: onOpenRepository, onChange: onChange }));
+    };
+    render(false);
+    return { setReplying: render, unmount: () => root.unmount() };
+}
+// ─── Asking for a computer ───────────────────────────────────────────────────
+let prices = null;
+function termitePricing() {
+    prices ?? (prices = Fauna.Termite.OS.pricing().catch((err) => { prices = null; throw err; }));
+    return prices;
+}
+const dollars = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 3 });
+function ComputerConsent({ holder, suggested, asker, signal, onDone }) {
+    const [name, setName] = useState(suggested.trim().slice(0, 60) || `${asker} computer`);
+    const [pricing, setPricing] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState("");
+    const veil = useRef(null);
+    const box = useRef(null);
+    const input = useRef(null);
+    const closing = useRef(false);
+    const group = holder.group;
+    const close = useCallback((repository) => {
+        if (closing.current)
+            return;
+        closing.current = true;
+        if (veil.current)
+            popOut(veil.current, () => onDone(repository), box.current);
+        else
+            onDone(repository);
+    }, [onDone]);
+    useLayoutEffect(() => {
+        if (veil.current && box.current)
+            popInDialog(veil.current, box.current);
+        input.current?.focus();
+        input.current?.select();
+    }, []);
+    useEffect(() => {
+        let active = true;
+        termitePricing().then((p) => { if (active)
+            setPricing(p); }, () => { if (active)
+            setPricing("none"); });
+        return () => { active = false; };
+    }, []);
+    useEffect(() => {
+        const onKey = (e) => { if (e.key === "Escape" && !busy)
+            close(null); };
+        const onAbort = () => close(null);
+        document.addEventListener("keydown", onKey);
+        signal?.addEventListener("abort", onAbort, { once: true });
+        return () => {
+            document.removeEventListener("keydown", onKey);
+            signal?.removeEventListener("abort", onAbort);
+        };
+    }, [busy, close, signal]);
+    const create = async () => {
+        const trimmed = name.trim();
+        if (!trimmed || busy)
+            return;
+        setBusy(true);
+        setError("");
+        try {
+            const repository = await Fauna.Termite.Versioning.create(holder.getAuthorization(), { name: trimmed, ...(group ? { group } : {}) });
+            await holder.setRepository(repository);
+            close(repository);
+        }
+        catch (err) {
+            setError(err?.message ?? "Couldn't make the repository.");
+            setBusy(false);
+        }
+    };
+    return (_jsx("div", { className: "chat-computer-veil", ref: veil, onMouseDown: (e) => { if (e.target === veil.current && !busy)
+            close(null); }, children: _jsxs("form", { className: "chat-computer", ref: box, role: "dialog", "aria-modal": "true", "aria-labelledby": "chat-computer-title", onSubmit: (e) => { e.preventDefault(); void create(); }, children: [_jsx("div", { className: "chat-computer-icon", children: _jsx("span", { className: "material-symbols-outlined", children: "desktop_windows" }) }), _jsx("h2", { className: "chat-computer-title", id: "chat-computer-title", children: "Use a computer?" }), _jsxs("p", { className: "chat-computer-text", children: [asker, " wants a computer for this. It needs a repository: a Linux machine with a desktop, a browser and its own files, yours to keep in Termite."] }), pricing !== "none" && (_jsxs("div", { className: "chat-computer-prices", children: [pricing === null
+                            ? _jsxs(_Fragment, { children: [_jsx("div", { className: "chat-shimmer" }), _jsx("div", { className: "chat-shimmer" })] })
+                            : _jsxs(_Fragment, { children: [_jsxs("div", { className: "chat-computer-price", children: [_jsx("span", { className: "material-symbols-outlined", children: "bolt" }), _jsxs("span", { children: [_jsx("b", { children: dollars.format(pricing.machinePerHour) }), " an hour while it runs. It stops on its own once it's done."] })] }), _jsxs("div", { className: "chat-computer-price", children: [_jsx("span", { className: "material-symbols-outlined", children: "folder" }), _jsxs("span", { children: [_jsx("b", { children: dollars.format(pricing.storagePerGbMonth) }), " per GB of files a month."] })] })] }), _jsx("div", { className: "chat-computer-payer", children: group ? "The group pays for it from its credits." : "It runs on your credits." })] })), _jsx("label", { className: "chat-computer-label", htmlFor: "chat-computer-name", children: "Name" }), _jsx("input", { id: "chat-computer-name", className: "chat-computer-name", ref: input, value: name, maxLength: 60, disabled: busy, onChange: (e) => setName(e.target.value) }), error && _jsx("div", { className: "chat-computer-error", children: error }), _jsxs("div", { className: "chat-computer-buttons", children: [_jsx("button", { type: "button", className: "chat-computer-no", disabled: busy, onClick: () => close(null), children: "Not now" }), _jsx("button", { type: "submit", className: "chat-computer-yes", disabled: busy || !name.trim(), children: busy ? "Creating" : "Create" })] })] }) }));
+}
+/**
+ * Ask the person to make a repository so `asker` (Parrot, an Ant persona) can use
+ * a computer, named `suggested` to start. Resolves with the new repository, attached
+ * to `holder`, or null when they say no (or `signal` aborts first).
+ */
+export function askForComputer(holder, suggested, signal, asker = "Parrot") {
+    if (signal?.aborted)
+        return Promise.resolve(null);
+    return new Promise((resolve) => {
+        const node = document.createElement("div");
+        document.body.appendChild(node);
+        const root = createRoot(node);
+        const done = (repository) => {
+            root.unmount();
+            node.remove();
+            resolve(repository);
+        };
+        root.render(_jsx(ComputerConsent, { holder: holder, suggested: suggested, asker: asker, signal: signal, onDone: done }));
+    });
+}
+// ─── Tool chips for files and repositories ───────────────────────────────────
+function short(text, max = 60) {
+    const line = text.replace(/\s+/g, " ").trim();
+    return line.length > max ? `${line.slice(0, max - 1)}\u2026` : line;
+}
+function baseName(path) {
+    return path.split("/").filter(Boolean).pop() ?? path;
+}
+/** The icon and words for a chat's file and repository tools, or null for other tools. */
+export function chatToolLabel(call) {
+    const args = call.args ?? {};
+    const path = String(args.path ?? "").trim();
+    const done = call.status === "success";
+    const failed = call.status === "error";
+    const pick = (running, success, error) => failed ? error : done ? success : running;
+    let out = null;
+    switch (call.name) {
+        case "write":
+            out = { icon: "edit_document", label: pick(`Writing ${path}`, `Wrote ${path}`, `Couldn't write ${path}`) };
+            break;
+        case "replace":
+        case "insert":
+        case "remove":
+            out = { icon: "edit_note", label: pick(`Editing ${path}`, `Edited ${path}`, `Couldn't edit ${path}`) };
+            break;
+        case "read":
+            out = { icon: "description", label: pick(`Reading ${path}`, `Read ${path}`, `Couldn't read ${path}`) };
+            break;
+        case "list": {
+            const target = String(args.pattern ?? "") || path || "the repository";
+            out = { icon: "folder_open", label: pick(`Looking through ${target}`, `Looked through ${target}`, `Couldn't look through ${target}`) };
+            break;
+        }
+        case "grep": {
+            const pattern = short(String(args.pattern ?? ""), 40);
+            out = { icon: "search", label: pick(`Searching for ${pattern}`, `Searched for ${pattern}`, `Search for ${pattern} failed`) };
+            break;
+        }
+        case "exec": {
+            const command = short(String(args.command ?? ""));
+            out = { icon: "terminal", label: pick(`Running ${command}`, `Ran ${command}`, `${command} failed`) };
+            break;
+        }
+        case "processes":
+            out = { icon: "monitoring", label: pick("Checking processes", "Checked processes", "Couldn't check processes") };
+            break;
+        case "kill":
+            out = { icon: "cancel", label: pick(`Stopping process ${args.pid}`, `Stopped process ${args.pid}`, `Couldn't stop process ${args.pid}`) };
+            break;
+        case "open": {
+            const name = path ? baseName(path) : String(args.attachment ?? "the file");
+            out = { icon: "open_in_new", label: pick(`Opening ${name}`, `Opened ${name}`, `Couldn't open ${name}`) };
+            break;
+        }
+        case "save": {
+            const name = String(args.attachment ?? "the file");
+            out = { icon: "save", label: pick(`Saving ${name}`, `Saved ${name} to the repository`, `Couldn't save ${name}`) };
+            break;
+        }
+        case "use_desktop":
+            if (done && call.result === Fauna.Termite.OS.DESKTOP_DECLINED)
+                out = { icon: "desktop_access_disabled", label: "Went without a computer" };
+            else if (!done && !failed && args.name !== undefined)
+                out = { icon: "desktop_windows", label: "Asking to use a computer" };
+            else
+                out = { icon: "desktop_windows", label: pick("Using the desktop", "Used the desktop", "The desktop couldn't finish") };
+            break;
+    }
+    if (out && call.status === "running" && typeof call.progress === "string" && call.progress)
+        out = { ...out, label: call.progress };
+    return out;
+}
+/** What an exec printed, from its result, for the chip's details. */
+export function execOutput(result) {
+    if (!result)
+        return "";
+    try {
+        const parsed = JSON.parse(result);
+        const parts = [parsed.stdout, parsed.stderr].filter((s) => typeof s === "string" && s.trim());
+        const body = parts.join("\n").trim();
+        return `${body}${typeof parsed.code === "number" && parsed.code !== 0 ? `${body ? "\n" : ""}Exit code ${parsed.code}` : ""}`;
+    }
+    catch {
+        return result;
+    }
+}