bom-pi 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,71 @@
+// Scheduled messages of this session.
+import { useState } from "preact/hooks";
+import { actions, attempt, canSteer, closeSheet, store } from "../store.js";
+import { formatWhen, html, Icon, Sheet } from "../ui.js";
+
+/** Messages that go to Pi later or on repeat: set one up, see what is coming, cancel one. */
+export function SchedulesSheet() {
+    const { view, users, me } = store.state;
+    const [when, setWhen] = useState("");
+    const steer = canSteer();
+    const setBy = (id) =>
+        id === undefined
+            ? "Pi"
+            : id === me?.id
+              ? "you"
+              : (users.find((user) => user.id === id)?.name ?? "someone");
+    const add = () =>
+        attempt(async () => {
+            await actions.schedule(when);
+            setWhen("");
+        });
+
+    return html`<${Sheet} title="Scheduled messages" onClose=${closeSheet}>
+        <p class="muted small">
+            Pi gets these at their time, also when nobody is here, and the people in this session get a notification when it is done.
+        </p>
+        ${
+            steer &&
+            html`<div class="row">
+                <input
+                    placeholder="in 2h check the deploy"
+                    value=${when}
+                    onInput=${(event) => setWhen(event.currentTarget.value)}
+                    onKeyDown=${(event) => event.key === "Enter" && add()}
+                />
+                <button class="button primary" disabled=${when.trim() === ""} onClick=${add}>
+                    Add
+                </button>
+            </div>
+            <p class="muted small">
+                Start with when: in 30m, 7:00, tomorrow 9am, fri 17:30, every 2h, every weekday 8:00. Then what Pi gets.
+            </p>`
+        }
+        ${view.schedules.length === 0 && html`<p class="muted">Nothing is scheduled.</p>`}
+        ${
+            view.schedules.length > 0 &&
+            html`<div class="sheet-list">
+                ${view.schedules.map(
+                    (schedule) => html`<div class="schedule" key=${schedule.id}>
+                        <${Icon} name="clock" size=${15} />
+                        <div class="grow">
+                            <div>${schedule.text}</div>
+                            <div class="muted small">
+                                ${schedule.repeat ? `${schedule.repeat} · next ${formatWhen(schedule.next)}` : formatWhen(schedule.next)} · set by ${setBy(schedule.by)}
+                            </div>
+                        </div>
+                        ${
+                            steer &&
+                            html`<button
+                                class="button small ghost"
+                                onClick=${() => attempt(() => actions.cancelSchedule(schedule.id))}
+                            >
+                                Cancel
+                            </button>`
+                        }
+                    </div>`,
+                )}
+            </div>`
+        }
+    <//>`;
+}

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

@@ -0,0 +1,249 @@
+import { useEffect, useLayoutEffect, useRef } from "preact/hooks";
+import { sessionActions } from "../extension-ui.js";
+import { deselectInList, selectedInList, selectFromList, setArchived } from "../sessions.js";
+import {
+    actions,
+    attempt,
+    canSteer,
+    closeSheet,
+    collab,
+    isUnread,
+    navigate,
+    notify,
+    scoped,
+    setUnread,
+    store,
+} from "../store.js";
+import { isPinned, movePin, togglePin } from "../theme.js";
+import { copyText, html, item, scrimPress, Sheet } from "../ui.js";
+
+const linkOf = (id) => `${location.origin}/s/${id}`;
+
+const copy = (text, what) =>
+    copyText(text).then(
+        () => notify("info", `Copied the ${what}.`),
+        () => notify("error", `Could not copy the ${what}.`),
+    );
+
+let forking = false;
+
+function fork(id) {
+    if (forking) {
+        return;
+    }
+
+    forking = true;
+    attempt(async () => {
+        const created = await actions.forkSession(id);
+
+        navigate(created.id);
+        notify("info", "Opened the fork. The original is unchanged.");
+    }).finally(() => {
+        forking = false;
+    });
+}
+
+const newIn = (cwd) =>
+    attempt(async () => {
+        const created = await actions.createSession(cwd);
+
+        navigate(created.id);
+    });
+
+function sessionItems(session) {
+    const { id } = session;
+    const steer = canSteer();
+    // People invited to one session start none, and invite nobody.
+    const starts = steer && !scoped();
+    const pinned = !session.archived && isPinned(id);
+    const pins = store.state.pinned.filter((each) =>
+        store.state.sessions.some((one) => one.id === each && !one.archived),
+    );
+
+    return [
+        [
+            { label: "Open in new tab", run: () => window.open(linkOf(id), "_blank", "noopener") },
+            { label: "Copy link", run: () => copy(linkOf(id), "link") },
+            { label: "Copy folder path", run: () => copy(session.cwd, "folder path") },
+        ],
+        [
+            steer && {
+                label: "Rename",
+                opens: true,
+                run: () => store.set({ sheet: { type: "rename", id } }),
+            },
+            starts && { label: "Fork", hint: "up to the last reply", run: () => fork(id) },
+            starts && { label: "New session in this folder", run: () => newIn(session.cwd) },
+            starts &&
+                collab() && {
+                    label: "Share",
+                    hint: "invite someone",
+                    opens: true,
+                    run: () => store.set({ sheet: { type: "invite", session: id } }),
+                },
+        ],
+        [
+            !session.archived && {
+                label: pinned ? "Unpin from the top" : "Pin to the top",
+                hint: "this browser",
+                run: () => togglePin(id),
+            },
+            pinned &&
+                pins[0] !== id && {
+                    label: "Move to top",
+                    hint: "of the pinned",
+                    run: () => movePin(id, false),
+                },
+            pinned &&
+                pins.at(-1) !== id && {
+                    label: "Move to bottom",
+                    hint: "of the pinned",
+                    run: () => movePin(id, true),
+                },
+            !session.archived && {
+                label: isUnread(id) ? "Mark read" : "Mark unread",
+                hint: "this browser",
+                run: () => setUnread(id, !isUnread(id)),
+            },
+        ],
+        sessionActions().map((action) => ({
+            label: action.label,
+            hint: action.module,
+            run: () => action.run([id]),
+        })),
+        [
+            selectedInList() > 0
+                ? {
+                      label: "Deselect all",
+                      hint: `${selectedInList()} selected`,
+                      run: deselectInList,
+                  }
+                : { label: "Select", hint: "then add others", run: () => selectFromList(id) },
+            steer && {
+                label: session.archived ? "Unarchive" : "Archive",
+                run: () => setArchived([id], !session.archived),
+            },
+        ],
+    ]
+        .map((group) => group.filter(Boolean))
+        .filter((group) => group.length > 0);
+}
+
+const runItem = (each) => () => {
+    if (!each.opens) {
+        closeSheet();
+    }
+
+    each.run();
+};
+
+export function SessionSheet({ id, at = null }) {
+    const session = store.state.sessions.find((each) => each.id === id);
+    const groups = sessionItems(session);
+
+    if (at) {
+        return html`<${SessionMenu} title=${session.title ?? "New session"} groups=${groups} at=${at} />`;
+    }
+
+    return html`<${Sheet} title=${session.title ?? "New session"} onClose=${closeSheet}>
+        <div class="sheet-list">
+            ${groups.flat().map((each) => item(each.label, runItem(each), each.hint))}
+        </div>
+    <//>`;
+}
+
+function SessionMenu({ title, groups, at }) {
+    const box = useRef(null);
+
+    useLayoutEffect(() => {
+        const menu = box.current;
+        // Unscaled: the opening animation scales the menu, and a scaled size is a little short.
+        const width = menu.offsetWidth;
+        const height = menu.offsetHeight;
+        const left = at.x + width + 8 > innerWidth ? Math.max(8, at.x - width) : at.x;
+        const top = at.y + height + 8 > innerHeight ? Math.max(8, at.y - height) : at.y;
+
+        menu.style.left = `${left}px`;
+        menu.style.top = `${top}px`;
+        menu.focus({ preventScroll: true });
+    }, [at.x, at.y]);
+
+    useEffect(() => {
+        const onKey = (event) =>
+            event.key === "Escape" && !event.isComposing && event.keyCode !== 229 && closeSheet();
+
+        addEventListener("keydown", onKey);
+
+        return () => removeEventListener("keydown", onKey);
+    }, []);
+
+    const onKeyDown = (event) => {
+        // Here as well as on the window: the menu has the focus from its first frame, before effects run.
+        if (event.key === "Escape" && !event.isComposing && event.keyCode !== 229) {
+            event.preventDefault();
+            closeSheet();
+
+            return;
+        }
+
+        const items = [...box.current.querySelectorAll("button")];
+        const index = items.indexOf(document.activeElement);
+        let target;
+
+        if (event.key === "ArrowDown") {
+            target = items[(index + 1) % items.length];
+        } else if (event.key === "ArrowUp") {
+            target = items[(index - 1 + items.length) % items.length];
+        } else if (event.key === "Home") {
+            target = items[0];
+        } else if (event.key === "End") {
+            target = items.at(-1);
+        } else if (event.key === "Tab") {
+            target = items[(index + (event.shiftKey ? -1 : 1) + items.length) % items.length];
+        }
+
+        if (target) {
+            event.preventDefault();
+            target.focus();
+        }
+    };
+
+    const onScrimMenu = (event) => {
+        if (event.target === event.currentTarget) {
+            event.preventDefault();
+            closeSheet();
+        }
+    };
+
+    return html`<div
+        class="overlay pop-overlay"
+        onMouseDown=${scrimPress(closeSheet)}
+        onContextMenu=${onScrimMenu}
+    >
+        <section
+            class="pop-menu session-menu"
+            data-part="session-menu"
+            ref=${box}
+            role="menu"
+            aria-label=${title}
+            tabindex="-1"
+            onKeyDown=${onKeyDown}
+            onContextMenu=${(event) => event.preventDefault()}
+        >
+            ${groups.map(
+                (group) => html`<div class="session-menu-group" role="group">
+                    ${group.map(
+                        (each) => html`<button
+                            class="session-menu-item"
+                            role="menuitem"
+                            onClick=${runItem(each)}
+                        >
+                            <span>${each.label}</span>
+                            ${each.hint && html`<span class="session-menu-hint">${each.hint}</span>`}
+                        </button>`,
+                    )}
+                </div>`,
+            )}
+        </section>
+    </div>`;
+}

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

@@ -0,0 +1,101 @@
+// The keyboard shortcuts, as a list. The keys themselves are handled in app.js.
+import { boxKeyRows } from "../box-keys.js";
+import { closeSheet } from "../store.js";
+import { html, Keys, Sheet } from "../ui.js";
+
+// Each row: its keys, and what they do. An "or" between keys means either one, and a "…" a run from one to the other.
+const SHORTCUTS = [
+    [
+        "Sessions",
+        [
+            ["Mod K", "Launcher: sessions, actions, themes"],
+            ["Alt 1 … Alt 9", "Jump to a session, like a workspace"],
+            ["Alt ↑ or Alt ↓", "Previous or next session"],
+            ["Alt N", "New session"],
+            ["Mod 1 … Mod 9", "In New session: start in a favorite folder"],
+            ["Alt", "Hold to see session numbers"],
+            ["Mod B", "Fold or unfold the sidebar"],
+            ["Mod Click", "In the sidebar: select a session; drag to select every one you pass"],
+            ["Shift Click", "In the sidebar: select a run of sessions"],
+        ],
+    ],
+    [
+        "Panels",
+        [
+            ["Alt B", "Open or close the browser"],
+            ["Alt E", "Open or close the Files tile: the folder's files, and what changed"],
+            ["Alt A", "Open or close PiP, your assistant"],
+            ["Alt P", "Show or hide peek tiles"],
+            ["Alt T", "Show thinking: turn the live disclosure on or off"],
+            ["Mod F", "Find in this session"],
+        ],
+    ],
+    [
+        "Message box",
+        [
+            ["/", "Commands"],
+            ["@", "Mention a file or folder"],
+            ["!", "Run a command (!! keeps it from Pi)"],
+            ["↑", "In an empty box: what you sent before"],
+            ["Ctrl R", "Search what you sent before"],
+            ["Alt V", "Dictate into the message box, or stop (where the browser can)"],
+            ["Esc Esc", "Stop Pi while it works"],
+        ],
+    ],
+    [
+        "Changes",
+        [
+            ["j or k", "The next or previous file"],
+            ["n or p", "The next or previous change"],
+            ["v", "Mark the file viewed, or not"],
+            ["s", "The layout: auto, split, or unified"],
+            ["w", "Wrap long lines, or not"],
+        ],
+    ],
+    [
+        "Anywhere",
+        [
+            ["?", "This list"],
+            ["Esc", "Close what is open"],
+            ["Mod Click", "On a file path: show it in the server machine's file manager (owner)"],
+        ],
+    ],
+];
+
+/** Keys as chips, each key of a chord in its own, with the "or" and "…" between chords left plain. */
+function Chords({ keys }) {
+    return keys
+        .split(" ")
+        .map((key) =>
+            key === "or" || key === "…"
+                ? html`<span class="muted">${key}</span>`
+                : html`<${Keys} keys=${key} />`,
+        );
+}
+
+export function ShortcutsSheet() {
+    // Extensions' keys in the message boxes (`pocket.composerKey`), right after the box's own.
+    const keys = boxKeyRows();
+    const groups = SHORTCUTS.flatMap((group) =>
+        group[0] === "Message box" && keys.length > 0
+            ? [group, ["Message box: from extensions", keys]]
+            : [group],
+    );
+
+    return html`<${Sheet} title="Keyboard shortcuts" onClose=${closeSheet}>
+        ${groups.map(
+            ([title, rows]) => html`<div class="group" key=${title}>
+                <div class="group-title">${title}</div>
+                <dl class="shortcuts">
+                    ${rows.map(
+                        ([keys, text]) => html`<dt><${Chords} keys=${keys} /></dt>
+                        <dd>${text}</dd>`,
+                    )}
+                </dl>
+            </div>`,
+        )}
+        <p class="muted small">
+            In the launcher, start with <kbd>></kbd> for actions, <kbd>@</kbd> for sessions, or <kbd>#</kbd> for themes. Arrowing onto colors shows them; Enter keeps them.
+        </p>
+    <//>`;
+}

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

@@ -0,0 +1,150 @@
+// Spend: what each session and person cost, and their limits.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { api, attempt, closeSheet, store } from "../store.js";
+import { html, Icon, Loader, Sheet } from "../ui.js";
+
+const money = (amount) => `$${amount.toFixed(2)}`;
+const largest = (rows) => rows.reduce((max, row) => Math.max(max, row.spent), 1);
+
+/** A spend limit, and (for the owner) a way to change it. */
+function SpendLimit({ budget, editable, save }) {
+    const [draft, setDraft] = useState(null);
+    const field = useRef(null);
+    const change = useRef(null);
+    const edited = useRef(false);
+    const editing = draft !== null;
+
+    // Into the field as it opens; back to Change as it closes, so the keyboard keeps its place.
+    useEffect(() => {
+        if (editing) {
+            field.current?.focus();
+        } else if (edited.current) {
+            change.current?.focus();
+        }
+
+        edited.current = editing;
+    }, [editing]);
+
+    if (draft === null) {
+        return html`<span class="muted small">
+            ${budget === undefined ? "no limit" : `limit ${money(budget)}`}
+        </span>
+        ${
+            editable
+                ? html`<button
+                    class="link small spend-change"
+                    ref=${change}
+                    onClick=${() => setDraft(budget === undefined ? "" : String(budget))}
+                >
+                    Change
+                </button>`
+                : html`<span class="spend-change" aria-hidden="true"></span>`
+        }`;
+    }
+
+    const done = (value) =>
+        attempt(async () => {
+            await save(value);
+            setDraft(null);
+        });
+
+    return html`<span class="limit-edit">
+        $<input type="number" inputmode="decimal" min="0.01" step="0.01" aria-label="Limit in dollars" ref=${field} value=${draft} onInput=${(event) => setDraft(event.currentTarget.value)} onKeyDown=${(
+            event,
+        ) => {
+            // Esc lets go of the limit, not the whole sheet.
+            if (event.key === "Escape") {
+                event.stopPropagation();
+                setDraft(null);
+            }
+        }} />
+        <button
+            class="button small primary"
+            disabled=${!(Number(draft) > 0)}
+            onClick=${() => done(Number(draft))}
+        >
+            Set
+        </button>
+        ${
+            budget !== undefined &&
+            html`<button class="button small ghost" onClick=${() => done(null)}>No limit</button>`
+        }
+        <button class="icon-button" aria-label="Cancel" onClick=${() => setDraft(null)}>
+            <${Icon} name="close" size=${16} />
+        </button>
+    </span>`;
+}
+
+/** Usage against a limit, or the largest spend in the group when there is no limit. */
+function Usage({ row, max }) {
+    const percent = Math.min(100, Math.max(0, (row.spent / (row.budget ?? max)) * 100));
+
+    return html`<span
+        class=${`spend-usage ${row.budget !== undefined && percent >= 80 ? "warn" : ""}`}
+        style=${`--usage:${percent}%`}
+        aria-hidden="true"
+    ><span></span></span>`;
+}
+
+/** What Pi spent, by person and by session, with the owner's limits. */
+export function SpendSheet() {
+    const owner = store.state.me?.role === "owner";
+    const [data, setData] = useState(null);
+
+    useEffect(() => {
+        attempt(async () => setData(await api("spend")));
+    }, []);
+    const save = (target) => async (budget) => setData(await api("spend", { ...target, budget }));
+    const peopleMax = largest(data?.people ?? []);
+    const sessionsMax = largest(data?.sessions ?? []);
+
+    return html`<${Sheet} title="Spend" onClose=${closeSheet} wide=${true}>
+        ${data === null && html`<${Loader} label="Adding it up" />`}
+        ${
+            data?.total !== undefined &&
+            html`<p class="spend-total">
+                <span>Pi spent</span> <strong>${money(data.total)}</strong> <span>on this server so far.</span>
+            </p>`
+        }
+        <p class="muted small">
+            Spend goes to whoever asked for the work. Past a limit, Pi takes no new messages there, a run that crosses it stops, and subagents' reports wait until it is raised.
+        </p>
+        ${
+            data &&
+            html`<div class="group">
+                <div class="group-title">People</div>
+                <div class="sheet-list">
+                    ${data.people.map(
+                        (person) => html`<div class="spend-row" key=${person.id}>
+                            <span class="grow">${person.name}</span>
+                            <${Usage} row=${person} max=${peopleMax} />
+                            <span class="mono">${money(person.spent)}</span>
+                            <${SpendLimit}
+                                budget=${person.budget}
+                                editable=${owner && person.id !== store.state.me?.id}
+                                save=${save({ person: person.id })}
+                            />
+                        </div>`,
+                    )}
+                </div>
+            </div>
+            <div class="group">
+                <div class="group-title">Sessions</div>
+                <div class="sheet-list">
+                    ${data.sessions.map(
+                        (session) => html`<div class="spend-row" key=${session.id}>
+                            <span class="grow">${session.title}</span>
+                            <${Usage} row=${session} max=${sessionsMax} />
+                            <span class="mono">${money(session.spent)}</span>
+                            <${SpendLimit}
+                                budget=${session.budget}
+                                editable=${owner}
+                                save=${save({ session: session.id })}
+                            />
+                        </div>`,
+                    )}
+                </div>
+            </div>`
+        }
+    <//>`;
+}

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

@@ -0,0 +1,53 @@
+// One text field and a button: renaming, resetting, instructions, compacting, and your name.
+import { useState } from "preact/hooks";
+import { attempt, closeSheet } from "../store.js";
+import { html, Sheet } from "../ui.js";
+
+export function TextSheet({
+    title,
+    label,
+    hint = "",
+    initial = "",
+    placeholder = "",
+    submit,
+    multiline = false,
+    button = "Save",
+    footer = null,
+}) {
+    const [value, setValue] = useState(initial);
+    const save = () =>
+        attempt(async () => {
+            await submit(value);
+            closeSheet();
+        });
+
+    return html`<${Sheet} title=${title} onClose=${closeSheet}>
+        ${hint && html`<p class="muted small">${hint}</p>`}
+        <div class="field">
+            <div class="label">${label}</div>
+            ${
+                multiline
+                    ? html`<textarea
+                        rows="4"
+                        aria-label=${label}
+                        value=${value}
+                        placeholder=${placeholder}
+                        onInput=${(event) => setValue(event.currentTarget.value)}
+                    ></textarea>`
+                    : html`<input
+                        autofocus
+                        aria-label=${label}
+                        value=${value}
+                        placeholder=${placeholder}
+                        onInput=${(event) => setValue(event.currentTarget.value)}
+                        onKeyDown=${(event) => event.key === "Enter" && save()}
+                    />`
+            }
+        </div>
+        <div class="sheet-actions">
+            <button class="button" onClick=${closeSheet}>Cancel</button>
+            <button class="button primary" onClick=${save}>${button}</button>
+        </div>
+        ${footer}
+    <//>`;
+}