bom-pi 0.0.0-stage → 0.0.2

package/apps/web/public/sheets/people.js

@@ -0,0 +1,414 @@
+// People with access to this server, and invites for more.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { Avatar } from "../avatar.js";
+import {
+    actions,
+    api,
+    attempt,
+    canSteer,
+    closeSheet,
+    collab,
+    notify,
+    openSheet,
+    scoped,
+    store,
+} from "../store.js";
+import { copyText, html, Icon, Loader, Sheet, timeAgo } from "../ui.js";
+
+const ROLE_TEXT = {
+    guest: "Can steer Pi, which can run commands on this machine",
+    viewer: "Can read along, react, and chat, but not steer Pi",
+};
+
+/** How long an invite may last: minutes, its button, and how the help text says it. */
+const LASTS = [
+    [15, "15 min", "in 15 minutes"],
+    [60, "1 hour", "in an hour"],
+    [24 * 60, "1 day", "in a day"],
+    [7 * 24 * 60, "1 week", "in a week"],
+];
+
+/** End an invite nobody will see: one the sheet stopped showing, or one that answered too late to show. */
+const cancelInvite = (invite) => {
+    // A server that says how long its invites last also ends them on request; an older one has no such route.
+    if (invite?.minutes !== undefined) {
+        // Sent even when the page goes (a reload, a web file edited), so it is never left live and unseen.
+        fetch("/api/invite/cancel", {
+            method: "POST",
+            keepalive: true,
+            headers: { "X-Pocket": "1", "content-type": "application/json" },
+            body: JSON.stringify({ code: invite.code }),
+        }).catch(() => {});
+    }
+};
+
+export function InviteSheet({ session = null }) {
+    const { view, me, sessions } = store.state;
+    const here =
+        session !== null
+            ? (sessions.find((each) => each.id === session) ?? null)
+            : view.conversation?.kind === "session"
+              ? view.conversation
+              : null;
+    const [role, setRole] = useState("guest");
+    const [only, setOnly] = useState(session !== null);
+    // The owner's own other device: it signs in as the owner, not as someone new.
+    const [asOwner, setAsOwner] = useState(false);
+    const [minutes, setMinutes] = useState(15);
+    const [made, setMade] = useState(null);
+    // The newest invite could not be made: the sheet offers to try again rather than wait for ever.
+    const [failed, setFailed] = useState(false);
+    // What the sheet says now: an invite shows only while it was made for exactly this.
+    const asked = JSON.stringify([asOwner, role, only, minutes]);
+    // Only the newest invite shows: one asked for before a change, answering late, must not stand for what the sheet says.
+    const latest = useRef(0);
+    // The invite the sheet last showed: a change to what it grants, or how long it lasts, ends it.
+    const shown = useRef(null);
+    // Closed (gone, or still sliding away): nothing more is made, and what was being made ends when it answers.
+    const mounted = useRef(true);
+    const open = () => mounted.current && store.state.sheet?.type === "invite";
+    const create = ({ replacing = false } = {}) =>
+        attempt(async () => {
+            if (!open()) {
+                return;
+            }
+
+            const ticket = ++latest.current;
+
+            if (replacing) {
+                cancelInvite(shown.current);
+                shown.current = null;
+            }
+
+            setMade(null);
+            setFailed(false);
+            let answer;
+
+            try {
+                answer = await api(
+                    "invite",
+                    asOwner
+                        ? { role: "owner" }
+                        : collab()
+                          ? { role, ...(only && here ? { session: here.id } : {}), minutes }
+                          : { minutes },
+                );
+            } catch (error) {
+                if (ticket === latest.current) {
+                    setFailed(true);
+                }
+
+                throw error;
+            }
+
+            if (ticket !== latest.current || !open()) {
+                cancelInvite(answer);
+
+                return;
+            }
+
+            // A server from before owner invites makes a guest's: never shown as the owner's.
+            if (asOwner && answer.grant?.role !== "owner") {
+                setFailed(true);
+
+                throw new Error("Restart Pi Pocket to sign in another device as the owner.");
+            }
+
+            shown.current = answer;
+            setMade({ ...answer, asked });
+        });
+
+    useEffect(() => {
+        create({ replacing: true });
+    }, [role, only, asOwner, minutes]);
+    useEffect(
+        () => () => {
+            mounted.current = false;
+        },
+        [],
+    );
+    // Shown only while it is what the sheet says, not for a frame after a change: above all, never an owner's invite
+    // under a cleared box (which the server's answer says too).
+    const invite =
+        made && made.asked === asked && (made.grant?.role === "owner") === asOwner ? made : null;
+    const where = only && here ? `only “${here.title}”` : "every session";
+    // As long as the invite shown lasts (a server that does not say: 15 minutes), or, while one is made, as chosen.
+    const lasting = LASTS.find(
+        ([each]) => each === (invite ? (invite.minutes ?? 15) : minutes),
+    )?.[2];
+
+    return html`<${Sheet} title="Invite someone" onClose=${closeSheet}>
+        ${
+            me?.role === "owner" &&
+            html`<label class="check">
+                <input
+                    type="checkbox"
+                    checked=${asOwner}
+                    onChange=${(event) => setAsOwner(event.currentTarget.checked)}
+                />
+                Sign in as me (owner)
+            </label>`
+        }
+        ${
+            collab() &&
+            !asOwner &&
+            html`<div class="field">
+                <div class="label">They can</div>
+                <div class="segmented">
+                    <button
+                        class=${role === "guest" ? "on" : ""}
+                        aria-pressed=${role === "guest"}
+                        onClick=${() => setRole("guest")}
+                    >
+                        Steer
+                    </button>
+                    <button
+                        class=${role === "viewer" ? "on" : ""}
+                        aria-pressed=${role === "viewer"}
+                        onClick=${() => setRole("viewer")}
+                    >
+                        View only
+                    </button>
+                </div>
+                <div class="muted small">
+                    ${ROLE_TEXT[role]}.${role === "guest" && only ? " Seeing one session in the app does not limit what Pi can reach on the machine." : ""}
+                </div>
+            </div>
+            ${
+                here &&
+                html`<div class="field">
+                    <div class="label">In</div>
+                    <div class="segmented">
+                        <button
+                            class=${!only ? "on" : ""}
+                            aria-pressed=${!only}
+                            onClick=${() => setOnly(false)}
+                        >
+                            Every session
+                        </button>
+                        <button
+                            class=${only ? "on" : ""}
+                            aria-pressed=${only}
+                            onClick=${() => setOnly(true)}
+                        >
+                            Only this session
+                        </button>
+                    </div>
+                </div>`
+            }`
+        }
+        ${
+            !asOwner &&
+            html`<div class="field">
+                <div class="label">Expires after</div>
+                <div class="segmented">
+                    ${LASTS.map(
+                        ([each, label]) => html`<button
+                            class=${minutes === each ? "on" : ""}
+                            aria-pressed=${minutes === each}
+                            onClick=${() => setMinutes(each)}
+                        >
+                            ${label}
+                        </button>`,
+                    )}
+                </div>
+            </div>`
+        }
+        <p class="muted small">
+            ${
+                asOwner
+                    ? "Scan this on your other device, or send it the link. That device signs in as you, the owner. It works once and expires in 15 minutes."
+                    : `Scan this on the other device, or send it the link. It works once and expires ${lasting}. Whoever joins sees ${where}.`
+            }
+        </p>
+        ${
+            invite?.access?.url &&
+            html`<p class="muted small">Other devices connect through ${invite.access.label}.</p>`
+        }
+        ${
+            invite
+                ? html`<div class="invite">
+                    ${
+                        invite.local &&
+                        html`<div class="error-box">
+                            This link only works on this device. To let other devices in, press <span class="mono">a</span> in the Pi Pocket terminal (or start it with <span class="mono">--access</span>) and pick Local network, Cloudflare Tunnel, or Tailscale. Then make a new invite.
+                        </div>`
+                    }
+                    <div class="invite-details">
+                    <div class="qr" dangerouslySetInnerHTML=${{ __html: invite.svg }}></div>
+                    <div class="invite-code">
+                        <div class="invite-code-head">
+                            <span>Invite code</span>
+                            <button
+                                class="link small"
+                                onClick=${() =>
+                                    copyText(invite.code).then(
+                                        () => notify("info", "Code copied."),
+                                        () => notify("error", "Could not copy."),
+                                    )}
+                            >
+                                Copy
+                            </button>
+                        </div>
+                        <div
+                            class="invite-code-value"
+                            aria-label=${`Invite code ${invite.code.split("").join(" ")}`}
+                        >
+                            <span>${invite.code.slice(0, 5)}</span>
+                            <span>${invite.code.slice(5)}</span>
+                        </div>
+                        <div class="muted small">
+                            Or enter it on the other device's sign-in screen.
+                        </div>
+                    </div>
+                    </div>
+                    <div class="row">
+                        <input
+                            class="mono"
+                            readonly
+                            value=${invite.url}
+                            onFocus=${(event) => event.currentTarget.select()}
+                        />
+                        <button
+                            class="button"
+                            onClick=${() =>
+                                copyText(invite.url).then(
+                                    () => notify("info", "Link copied."),
+                                    () => notify("error", "Could not copy."),
+                                )}
+                        >
+                            Copy
+                        </button>
+                    </div>
+                    ${
+                        invite.alternatives?.length > 0 &&
+                        html`<p class="muted small">
+                            Also reachable at: ${invite.alternatives.map(
+                                (url) => html`<span class="mono">${url} </span>`,
+                            )}
+                        </p>`
+                    }
+                </div>`
+                : failed
+                  ? html`<p class="muted small">No invite yet. Tap New invite to try again.</p>`
+                  : html`<${Loader} label="Making an invite" />`
+        }
+        <button class="button wide" onClick=${create}>New invite</button>
+        ${!collab() && html`<${PeopleList} />`}
+    <//>`;
+}
+
+function lastSeen(person) {
+    if (person.online) {
+        return "here now";
+    }
+
+    if (!person.lastSeen) {
+        return "not seen yet";
+    }
+
+    return `seen ${timeAgo(person.lastSeen)}${timeAgo(person.lastSeen) === "now" ? "" : " ago"}`;
+}
+
+/** Everyone with access: who is online, when the others were last here, and (for the owner) what each may do. */
+function PeopleList() {
+    const { me, users, sessions } = store.state;
+    const owner = me?.role === "owner";
+    const sessionTitle = (id) => sessions.find((each) => each.id === id)?.title ?? `session ${id}`;
+    const ordered = [...users].sort(
+        (a, b) =>
+            Number(Boolean(b.online)) - Number(Boolean(a.online)) ||
+            (b.lastSeen ?? 0) - (a.lastSeen ?? 0),
+    );
+    const change = (person, patch) =>
+        attempt(async () => store.set({ users: await actions.setAccess(person.id, patch) }));
+
+    return html`<div class="group">
+        <div class="group-title">People</div>
+        <div class="sheet-list">
+        ${ordered.map(
+            (person) => html`<div class="person-row" key=${person.id}>
+                <span class="people-here">
+                    <${Avatar} person=${person} size=${32} />
+                    <span
+                        class=${`online-mark ${person.online ? "" : "away"}`}
+                        aria-hidden="true"
+                    ></span>
+                </span>
+                <div class="person-main">
+                    <div>
+                        ${person.name}
+                        ${person.id === me?.id ? html` <span class="muted small">(you)</span>` : ""}
+                    </div>
+                    <div class="muted small">
+                        ${person.role === "owner" ? "owner" : person.role === "viewer" ? "view only" : "can steer"}
+                        ${person.sessions ? ` · only ${person.sessions.map(sessionTitle).join(", ")}` : ""} · ${lastSeen(person)}
+                    </div>
+                </div>
+                ${
+                    owner &&
+                    person.role !== "owner" &&
+                    html`<div class="person-actions">
+                        ${
+                            collab() &&
+                            html`<button
+                                class="button small"
+                                title="Change what they can do"
+                                onClick=${() => change(person, { role: person.role === "viewer" ? "guest" : "viewer" })}
+                            >
+                                ${person.role === "viewer" ? "Let steer" : "View only"}
+                            </button>`
+                        }
+                        ${
+                            collab() &&
+                            person.sessions &&
+                            html`<button
+                                class="button small"
+                                title="Let them see every session"
+                                onClick=${() => change(person, { sessions: null })}
+                            >
+                                All sessions
+                            </button>`
+                        }
+                        <button
+                            class="button small ghost"
+                            onClick=${() =>
+                                confirm(`Remove ${person.name}? Their devices are signed out.`) &&
+                                attempt(async () => {
+                                    await api(`users/${person.id}/remove`, {});
+                                    store.set({
+                                        users: store.state.users.filter(
+                                            (each) => each.id !== person.id,
+                                        ),
+                                    });
+                                })}
+                        >
+                            Remove
+                        </button>
+                    </div>`
+                }
+            </div>`,
+        )}
+        </div>
+    </div>`;
+}
+
+export function PeopleSheet() {
+    const canInvite = canSteer() && !scoped();
+
+    return html`<${Sheet} title="People" onClose=${closeSheet}>
+        ${
+            canInvite &&
+            html`<button class="button primary wide" onClick=${() => openSheet({ type: "invite" })}>
+                <${Icon} name="plus" size=${16} /> Invite someone
+            </button>`
+        }
+        <${PeopleList} />
+        <button
+            class="button ghost wide sheet-footer"
+            onClick=${() => openSheet({ type: "notifications" })}
+        >
+            Notifications on this device…
+        </button>
+    <//>`;
+}

package/apps/web/public/sheets/pi-sessions.js

@@ -0,0 +1,264 @@
+// Pi's sessions from the terminal, which the owner can continue here: the list, by folder, and one of them before it
+// continues, as a short conversation.
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { actions, attempt, closeSheet, navigate, notify, openSheet, store } from "../store.js";
+import { html, Icon, Loader, Sheet, shortPath, timeAgo } from "../ui.js";
+
+/** Only the owner: Pi's sessions are the owner's files. */
+export const piSessionsAvailable = () => store.state.me?.role === "owner";
+
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+
+/** A folder's last part, and the folder it is in: `pi-pocket`, `~/code`. */
+function folderParts(cwd, home) {
+    const path = shortPath(cwd, home);
+    const cut = path.replace(/\/+$/, "").lastIndexOf("/");
+
+    return cut <= 0
+        ? { name: path, parent: "" }
+        : { name: path.slice(cut + 1), parent: path.slice(0, cut) };
+}
+
+/** The sessions by folder, the folder used last first; each folder's newest first, as they come. */
+function byFolder(sessions) {
+    const folders = new Map();
+
+    for (const session of sessions) {
+        folders.set(session.cwd, [...(folders.get(session.cwd) ?? []), session]);
+    }
+
+    return [...folders];
+}
+
+function SessionRow({ session }) {
+    const pocket = session.pocket;
+
+    return html`<button
+        class="pi-session"
+        onClick=${() => openSheet({ type: "pi-session", id: session.path })}
+    >
+        <span class="pi-session-text">
+            <span class="pi-session-title">${session.title}</span>
+            <span class="pi-session-meta">
+                ${plural(session.messages, "message")} · ${timeAgo(session.modified)}
+            </span>
+        </span>
+        ${
+            pocket &&
+            html`<span class=${`pi-tag ${pocket.behind ? "behind" : ""}`}>
+                ${pocket.behind ? "Pi went on" : "in Pocket"}
+            </span>`
+        }
+        <${Icon} name="chevron" size=${14} />
+    </button>`;
+}
+
+/** Pi's sessions on this computer, by folder, with a search the server runs through all of them, words included. */
+export function PiSessionsSheet() {
+    const home = store.state.server?.home;
+    const [sessions, setSessions] = useState(null);
+    // Whether Pi has any at all, from the first list: a search that finds none is not "no sessions".
+    const [any, setAny] = useState(null);
+    const [problem, setProblem] = useState(null);
+    const [query, setQuery] = useState("");
+    const needle = query.trim();
+    const box = useRef(null);
+    const results = useRef(null);
+    // The list's height as it first showed: fewer results while searching keep the sheet that tall, so the box stays put.
+    const [floor, setFloor] = useState(0);
+
+    useEffect(() => {
+        let current = true;
+        // A pause in typing, then the search: the first list at once.
+        const timer = setTimeout(
+            () =>
+                actions.piSessions(needle).then(
+                    (result) => {
+                        if (current) {
+                            setSessions(result.sessions);
+                            setAny((was) => was ?? result.sessions.length > 0);
+                        }
+                    },
+                    (error) => current && setProblem(error.message),
+                ),
+            needle === "" ? 0 : 250,
+        );
+
+        return () => {
+            current = false;
+            clearTimeout(timer);
+        };
+    }, [needle]);
+    const folders = byFolder(sessions ?? []);
+
+    useLayoutEffect(() => {
+        if (floor === 0 && needle === "" && sessions?.length > 0 && results.current) {
+            setFloor(results.current.offsetHeight);
+        }
+    }, [sessions]);
+    // Straight to the search where there are keys to type it with.
+    useEffect(() => {
+        if (any && !matchMedia("(pointer: coarse)").matches) {
+            box.current?.focus({ preventScroll: true });
+        }
+    }, [any]);
+
+    return html`<${Sheet} title="Continue a Pi session" onClose=${closeSheet}>
+        <p class="muted small">
+            Sessions of Pi in the terminal on this computer. One continues here as a new session; its file stays as it is.
+        </p>
+        ${problem && html`<div class="error-box small">${problem}</div>`}
+        ${sessions === null && problem === null && html`<${Loader} label="Finding Pi's sessions" />`}
+        ${any === false && html`<p class="muted">Pi has no sessions on this computer yet.</p>`}
+        ${
+            any === true &&
+            html`<input
+                class="find-input"
+                type="search"
+                ref=${box}
+                placeholder="Search sessions"
+                aria-label="Search Pi's sessions: titles, folders, and messages"
+                value=${query}
+                onInput=${(event) => setQuery(event.currentTarget.value)}
+            />`
+        }
+        <div
+            class="pi-results"
+            ref=${results}
+            style=${floor > 0 ? `min-height:${floor}px` : ""}
+        >
+            ${folders.map(([cwd, list]) => {
+                const { name, parent } = folderParts(cwd, home);
+
+                return html`<section class="pi-folder" key=${cwd}>
+                    <div class="pi-folder-head" title=${cwd}>
+                        <${Icon} name="folder" size=${14} />
+                        <span class="pi-folder-name">${name}</span>
+                        ${parent && html`<span class="pi-folder-parent">${parent}</span>`}
+                    </div>
+                    <div class="pi-folder-list">
+                        ${list.map((session) => html`<${SessionRow} key=${session.path} session=${session} />`)}
+                    </div>
+                </section>`;
+            })}
+            ${
+                any === true &&
+                needle !== "" &&
+                sessions?.length === 0 &&
+                html`<p class="muted">No session matches “${needle}”.</p>`
+            }
+        </div>
+    <//>`;
+}
+
+/** One of Pi's sessions: where it worked and with what, its last messages, and continuing it here. */
+export function PiSessionSheet({ path }) {
+    const home = store.state.server?.home;
+    const [info, setInfo] = useState(null);
+    const [problem, setProblem] = useState(null);
+    const [busy, setBusy] = useState(false);
+    // Set at once, not at the next render: a second tap in the same moment must not make a second copy.
+    const going = useRef(false);
+
+    useEffect(() => {
+        actions.piSession(path).then(setInfo, (error) => setProblem(error.message));
+    }, [path]);
+
+    const open = (id) => {
+        closeSheet();
+        navigate(id);
+    };
+
+    const go = () => {
+        if (going.current) {
+            return;
+        }
+
+        going.current = true;
+        attempt(async () => {
+            setBusy(true);
+
+            try {
+                const { id } = await actions.continuePiSession(path);
+
+                open(id);
+                notify(
+                    "info",
+                    "Continued from Pi. Pi has the conversation as Pi left it; nothing it did runs again.",
+                );
+            } finally {
+                going.current = false;
+                setBusy(false);
+            }
+        });
+    };
+
+    if (info === null) {
+        return html`<${Sheet} title="Pi session" onClose=${closeSheet}>
+            ${
+                problem === null
+                    ? html`<${Loader} label="Reading the session" />`
+                    : html`<div class="error-box small">${problem}</div>`
+            }
+        <//>`;
+    }
+
+    return html`<${Sheet} title="Pi session" onClose=${closeSheet}>
+        <h3 class="pi-title">${info.title}</h3>
+        <dl class="pi-facts">
+            <div>
+                <dt>Folder</dt>
+                <dd class="mono">${shortPath(info.cwd, home)}</dd>
+            </div>
+            <div>
+                <dt>Model</dt>
+                <dd class="mono">
+                    ${info.model ?? "—"}${info.model && !info.modelHere ? html`<span class="muted"> · not signed in here</span>` : ""}
+                </dd>
+            </div>
+            <div>
+                <dt>Messages</dt>
+                <dd>${info.messages}</dd>
+            </div>
+        </dl>
+        ${
+            !info.cwdExists &&
+            html`<div class="error-box small">
+                The folder it worked in is not there anymore, so it cannot continue here.
+            </div>`
+        }
+        ${
+            info.model &&
+            !info.modelHere &&
+            html`<p class="muted small">It continues with Pi Pocket's usual model.</p>`
+        }
+        ${
+            info.pocket &&
+            html`<div class="pi-note">
+                <span>
+                    ${info.pocket.behind ? "Continued here before Pi went on in the terminal." : "Already continued here."}
+                </span>
+                <button class="link" onClick=${() => open(info.pocket.id)}>Open it</button>
+            </div>`
+        }
+        ${
+            info.last.length > 0 &&
+            html`<div class="pi-convo" aria-label="Its last messages">
+                <div class="label">Its last messages</div>
+                ${info.last.map((line) =>
+                    line.role === "user"
+                        ? html`<div class="pi-ask"><div>${line.text}</div></div>`
+                        : html`<div class="pi-reply">${line.text}</div>`,
+                )}
+            </div>`
+        }
+        <div class="pi-continue">
+            <button class="button primary wide" disabled=${busy || !info.cwdExists} onClick=${go}>
+                ${info.pocket ? "Continue it here again" : "Continue in Pocket"}
+            </button>
+            <p class="muted small">
+                Pi gets the conversation as Pi left it, with Pi Pocket's instructions and tools. Nothing Pi did runs again, and the session's file stays as it is.
+            </p>
+        </div>
+    <//>`;
+}