bom-pi 0.0.0-stage → 0.0.2

package/apps/web/public/subagents.js

@@ -0,0 +1,273 @@
+// The subagents bar, above the message box: this session's subagents at a glance. It shows while one works or has a
+// report on its way to Pi, and after they finish until it is put away. Folded, one line: how many work and how many
+// are done, and what the newest one does. Unfolded, a row each: what it was asked, what it does this moment (its peek,
+// as tiles have), for how long, whether its report is on its way, Stop, and a tap to open it.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { nowDoing } from "./agent-now.js";
+import { useOnScreen } from "./peeks.js";
+import { fromServer } from "./seen.js";
+import { api, attempt, canSteer, navigate, openSheet, store } from "./store.js";
+import { html, Icon, Spinner, timeAgo } from "./ui.js";
+
+/**
+ * When each session's bar was put away, in this browser, as the newest thing its subagents did then (the server's clock,
+ * as theirs is): it shows again once one does something newer.
+ */
+const AWAY_KEY = "pocket.subagentsAway";
+
+function awayMarks() {
+    try {
+        return JSON.parse(localStorage.getItem(AWAY_KEY) ?? "{}");
+    } catch {
+        return {};
+    }
+}
+
+/** The server's time of the newest thing a subagent did: asked, or answered. */
+const newest = (agent) => Math.max(agent.askedAt ?? 0, agent.answeredAt ?? 0);
+
+function putAway(id, agents) {
+    const marks = { ...awayMarks(), [id]: Math.max(0, ...agents.map(newest)) };
+    // The newest few sessions' marks are enough.
+    const kept = Object.entries(marks)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 50);
+
+    localStorage.setItem(AWAY_KEY, JSON.stringify(Object.fromEntries(kept)));
+}
+
+/** Unfold the bar, as the top bar's count of working subagents does: for this session only. */
+export const openSubagents = () => store.set({ subagentsOpen: store.state.conversationId });
+
+/** Where a subagent is: working, done, stopped, or failed. */
+export const stateOf = (agent) =>
+    agent.busy ? "working" : agent.stopped ? "stopped" : agent.failed ? "failed" : "done";
+
+/** A failed subagent nobody has dealt with yet: it needs someone, on the board, the rail, and the session list. */
+export const unresolved = (agent) => stateOf(agent) === "failed" && agent.dealt !== true;
+
+/** Say a subagent's failure was dealt with: the one this browser shows (by its time), so a newer one still shows. */
+export const dismiss = (agent) =>
+    api(`c/${agent.conversationId}/dismiss`, { at: agent.answeredAt ?? 0 });
+
+/** A failure shown to someone who can deal with it, who opens the subagent: seen, it needs nobody now. */
+export function seeFailure(agent) {
+    if (agent && unresolved(agent) && canSteer()) {
+        dismiss(agent).catch(() => {});
+    }
+}
+
+/** Open a subagent's conversation, from this session's subagents or the board; a failure it had is seen there. */
+export function openSubagent(id) {
+    const { boardAgents, view } = store.state;
+
+    seeFailure(
+        [...(view.subagents ?? []), ...(boardAgents ?? [])].find(
+            (agent) => agent.conversationId === id,
+        ),
+    );
+    navigate(id);
+}
+
+/** The mark a row starts with, for a subagent that is not working. */
+const MARKS = { done: "✓", stopped: "■", failed: "!" };
+
+const plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
+
+/** How long since `ms`, a time the server took: "45s", "3m 05s", "1h 12m". */
+export function elapsed(ms) {
+    const seconds = Math.max(0, Math.round((Date.now() - fromServer(ms)) / 1000));
+
+    if (seconds < 60) {
+        return `${seconds}s`;
+    }
+
+    if (seconds < 3600) {
+        return `${Math.floor(seconds / 60)}m ${String(seconds % 60).padStart(2, "0")}s`;
+    }
+
+    return `${Math.floor(seconds / 3600)}h ${String(Math.floor(seconds / 60) % 60).padStart(2, "0")}m`;
+}
+
+/** The order of the states, in the dots and the rows: working, then trouble, then done. */
+const RANK = { working: 0, failed: 1, stopped: 2, done: 3 };
+
+/** By state; working ones newest asked first, the rest newest answer first. */
+export function ordered(agents) {
+    return [...agents].sort(
+        (a, b) =>
+            RANK[stateOf(a)] - RANK[stateOf(b)] ||
+            (a.busy
+                ? (b.askedAt ?? 0) - (a.askedAt ?? 0)
+                : (b.answeredAt ?? 0) - (a.answeredAt ?? 0)),
+    );
+}
+
+function AgentRow({ agent }) {
+    const stop = () => attempt(() => api(`c/${agent.conversationId}/abort`, {}));
+    const status = stateOf(agent);
+    // A failure someone dealt with says so, as the board does.
+    const dealt = status === "failed" && agent.dealt ? " · dismissed" : "";
+    const when = agent.busy
+        ? agent.askedAt && elapsed(agent.askedAt)
+        : agent.answeredAt && `${status} ${timeAgo(fromServer(agent.answeredAt))}${dealt}`;
+
+    return html`<div class=${`agent-row ${status}`} data-peek=${agent.conversationId}>
+        <button class="agent-open" onClick=${() => openSubagent(agent.conversationId)}>
+            <span class="agent-mark" aria-hidden="true">
+                ${agent.busy ? html`<${Spinner} />` : MARKS[status]}
+            </span>
+            <span class="agent-main">
+                <span class="agent-head">
+                    <span class="agent-name">${agent.name}</span>
+                    ${when && html`<span class="agent-when">${when}</span>`}
+                    ${agent.reporting && html`<span class="agent-chip">report on its way to Pi</span>`}
+                </span>
+                ${agent.busy && html`<span class="agent-now">${nowDoing(agent)}</span>`}
+                ${status === "failed" && agent.error && html`<span class="agent-error">${agent.error}</span>`}
+                ${agent.asked && html`<span class="agent-asked">${agent.asked}</span>`}
+            </span>
+        </button>
+        ${
+            agent.busy &&
+            canSteer() &&
+            html`<button
+                class="icon-button agent-stop"
+                aria-label=${`Stop ${agent.name}`}
+                title="Stop"
+                onClick=${stop}
+            >
+                <${Icon} name="stop" size=${13} />
+            </button>`
+        }
+    </div>`;
+}
+
+/**
+ * Reports a spend limit holds back: why they wait, and for the owner the way to raise it. They go once it is raised.
+ */
+function Held({ why }) {
+    const owner = store.state.me?.role === "owner";
+
+    return html`<div class="agents-held" role="status">
+        <span>Reports wait: ${why}.</span>
+        ${
+            owner
+                ? html`<button class="link" onClick=${() => openSheet({ type: "spend" })}>
+                      Raise it
+                  </button>`
+                : html`<span>They go once the owner raises it.</span>`
+        }
+    </div>`;
+}
+
+/** The bar, while it shows: its hooks watch its rows for peeks, and tick the elapsed times. */
+function Bar({ agents, active, open, held }) {
+    const box = useRef(null);
+    const [, rerender] = useState(0);
+    const count = (status) => agents.filter((agent) => stateOf(agent) === status).length;
+    const working = agents.filter((agent) => agent.busy);
+    const lead = ordered(working)[0];
+    // Trouble first: on a phone the end of the line may not fit.
+    const kinds = ["working", "failed", "stopped", "done"].filter((status) => count(status) > 0);
+    // "3 subagents working" when one kind says it all; "2 working · 1 done · 1 failed", short for a phone, when not.
+    const summary =
+        kinds.length === 1
+            ? `${plural(agents.length, "subagent")} ${kinds[0]}`
+            : kinds.map((status) => `${count(status)} ${status}`).join(" · ");
+    const shown = ordered(agents);
+
+    // The rows' and the folded line's peeks: what each working subagent does now.
+    useOnScreen(box);
+    // Elapsed times tick while one works.
+    useEffect(() => {
+        if (working.length === 0) {
+            return;
+        }
+
+        const timer = setInterval(() => rerender((count) => count + 1), 1000);
+
+        return () => clearInterval(timer);
+    }, [working.length]);
+
+    // What the button says, the newest one's work too: the label stands for everything in it.
+    const label = `Subagents: ${summary}${lead && !open ? `. ${lead.name}: ${nowDoing(lead)}` : ""}`;
+
+    return html`<div
+        class=${`agents-bar ${open ? "open" : ""} ${working.length > 0 ? "busy" : ""}`}
+        data-part="subagents-bar"
+        ref=${box}
+    >
+        <div class="agents-top">
+            <button
+                class="agents-summary"
+                aria-label=${label}
+                aria-expanded=${open}
+                onClick=${() =>
+                    store.set({ subagentsOpen: open ? null : store.state.conversationId })}
+            >
+                <span class="agents-dots" aria-hidden="true">
+                    ${shown
+                        .slice(0, 6)
+                        .map(
+                            (agent) => html`<span class=${`agents-dot ${stateOf(agent)}`}></span>`,
+                        )}
+                    ${shown.length > 6 && html`<span class="agents-more">+${shown.length - 6}</span>`}
+                </span>
+                <span class="agents-count">${summary}</span>
+                ${
+                    lead &&
+                    !open &&
+                    html`<span class="agents-lead" data-peek=${lead.conversationId}>
+                        ${lead.name}: ${nowDoing(lead)}
+                    </span>`
+                }
+                <span class="agents-chevron"><${Icon} name="chevron" size=${14} /></span>
+            </button>
+            ${
+                !active &&
+                html`<button
+                    class="icon-button"
+                    aria-label="Put the subagents bar away"
+                    title="Put away"
+                    onClick=${() => {
+                        putAway(store.state.conversationId, agents);
+                        store.set({ subagentsOpen: null });
+                    }}
+                >
+                    <${Icon} name="close" size=${13} />
+                </button>`
+            }
+        </div>
+        ${held && html`<${Held} why=${held} />`}
+        ${
+            open &&
+            html`<div class="agents-list">
+                ${shown.map((agent) => html`<${AgentRow} key=${agent.name} agent=${agent} />`)}
+            </div>`
+        }
+    </div>`;
+}
+
+/**
+ * This session's subagents, while one works or has a report on its way, and after until put away. Once put away, it
+ * counts and lists only those that did something since.
+ */
+export function SubagentsBar() {
+    const { view, conversationId, subagentsOpen } = store.state;
+    const away = awayMarks()[conversationId] ?? 0;
+    const agents = (view.subagents ?? []).filter(
+        (agent) => agent.busy || agent.reporting || newest(agent) > away,
+    );
+
+    if (agents.length === 0) {
+        return null;
+    }
+
+    return html`<${Bar}
+        agents=${agents}
+        held=${view.subagentsHeld}
+        active=${agents.some((agent) => agent.busy || agent.reporting)}
+        open=${subagentsOpen === conversationId}
+    />`;
+}

package/apps/web/public/sw.js

@@ -0,0 +1,169 @@
+// Pi Pocket's service worker. It shows push notifications (Pi finished, an approval, a chat message), answers an
+// approval from its notification, opens the right session when one is tapped, and hands things shared to Pi Pocket
+// from other apps to the page. It caches none of the app: the app is edited live.
+self.addEventListener("install", () => self.skipWaiting());
+self.addEventListener("activate", (event) => event.waitUntil(self.clients.claim()));
+
+/** Where shared things wait until the page picks them up; see `web/share.js`. */
+const SHARE_CACHE = "pocket-share";
+
+self.addEventListener("push", (event) => {
+    let data = {};
+
+    try {
+        data = event.data?.json() ?? {};
+    } catch {
+        data = { title: "Pi Pocket", body: event.data?.text() ?? "" };
+    }
+
+    const approval = data.approval;
+    // Allowing from the notification is offered only when the server says the whole call shows and this person may.
+    const actions = approval
+        ? [
+              ...(approval.allow ? [{ action: "allow", title: "Allow" }] : []),
+              { action: "deny", title: "Deny" },
+          ]
+        : [];
+
+    event.waitUntil(
+        Promise.all([
+            self.registration.showNotification(data.title || "Pi Pocket", {
+                body: data.body || "",
+                tag: data.tag,
+                renotify: Boolean(data.tag),
+                icon: "/icon.svg",
+                actions,
+                data: { url: data.url || "/", approval },
+            }),
+            // A dot on the home-screen icon; the app sets the real count once it opens.
+            self.navigator.setAppBadge?.().catch(() => {}),
+        ]),
+    );
+});
+
+/** Answer an approval with this device's sign-in. Only a failure shows: the notification going away is the answer. */
+async function answerApproval(approval, allow, data) {
+    let problem;
+
+    try {
+        const response = await fetch(`/api/approvals/${encodeURIComponent(approval.id)}`, {
+            method: "POST",
+            credentials: "same-origin",
+            headers: { "X-Pocket": "1", "content-type": "application/json" },
+            body: JSON.stringify({ allow }),
+        });
+
+        if (!response.ok) {
+            problem =
+                (await response.json().catch(() => ({}))).error ??
+                `The server answered ${response.status}.`;
+        }
+    } catch {
+        problem = "Pi Pocket could not be reached.";
+    }
+
+    if (problem === undefined) {
+        return;
+    }
+
+    await self.registration.showNotification(`Could not ${allow ? "allow" : "deny"} the call`, {
+        body: problem,
+        icon: "/icon.svg",
+        data: { url: data.url },
+    });
+}
+
+async function openUrl(url) {
+    const windows = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+    const open = windows.find((client) => new URL(client.url).origin === self.location.origin);
+
+    // PiP's notifications open its panel over whatever the window shows, rather than take the window elsewhere.
+    if (open && new URL(url).searchParams.has("pip")) {
+        await open.focus();
+        open.postMessage({ type: "pocket.pip" });
+
+        return;
+    }
+
+    if (open) {
+        await open.focus();
+
+        try {
+            await open.navigate(url);
+
+            return;
+        } catch {
+            // Not controlled by this worker yet: open a new window instead.
+        }
+    }
+
+    await self.clients.openWindow(url);
+}
+
+self.addEventListener("notificationclick", (event) => {
+    event.notification.close();
+    const data = event.notification.data ?? {};
+
+    if ((event.action === "allow" || event.action === "deny") && data.approval) {
+        event.waitUntil(answerApproval(data.approval, event.action === "allow", data));
+
+        return;
+    }
+
+    event.waitUntil(openUrl(new URL(data.url || "/", self.location.origin).href));
+});
+
+/**
+ * Something shared to Pi Pocket from another app (the manifest's share target) arrives as a form post. Keep it until
+ * the page picks it up, then open the page to choose where it goes. Any website could post a form here too, and
+ * nothing tells it apart from a share; it only fills in a message the person still reads and sends themselves.
+ */
+async function receiveShare(request) {
+    let form;
+
+    try {
+        form = await request.formData();
+    } catch {
+        return Response.redirect("/?share=failed", 303);
+    }
+
+    const id = crypto.randomUUID();
+    const cache = await caches.open(SHARE_CACHE);
+    const files = form.getAll("files").filter((file) => file instanceof File && file.size > 0);
+    const text = (name) => (typeof form.get(name) === "string" ? form.get(name) : "");
+    const meta = {
+        title: text("title"),
+        text: text("text"),
+        url: text("url"),
+        files: files.map((file) => ({ name: file.name, type: file.type })),
+    };
+
+    await cache.put(
+        `/share/${id}/meta`,
+        new Response(JSON.stringify(meta), { headers: { "content-type": "application/json" } }),
+    );
+    await Promise.all(
+        files.map((file, index) =>
+            cache.put(
+                `/share/${id}/file/${index}`,
+                new Response(file, {
+                    headers: { "content-type": file.type || "application/octet-stream" },
+                }),
+            ),
+        ),
+    );
+
+    return Response.redirect(`/?share=${id}`, 303);
+}
+
+self.addEventListener("fetch", (event) => {
+    const url = new URL(event.request.url);
+
+    if (
+        event.request.method === "POST" &&
+        url.origin === self.location.origin &&
+        url.pathname === "/share"
+    ) {
+        event.respondWith(receiveShare(event.request));
+    }
+});

package/apps/web/public/taps.js

@@ -0,0 +1,26 @@
+// Whether a person just tapped the page or pressed a key. A script cannot make such an event (`isTrusted`), so an action
+// that must come from a person can ask for one. This is the rule that the frame of an artifact keeps for its follow-ups
+// (`ARTIFACT_BRIDGE` in `src/server/http/artifacts.ts`): a tap serves for 5 seconds, and for one action.
+
+const TAP_MS = 5000;
+let tapped = -Infinity;
+
+const tap = (event) => {
+    if (event.isTrusted) {
+        tapped = performance.now();
+    }
+};
+
+// One event for each tap: a mouse's press, a finger's or pen's lift, a key's press but not its repeats.
+addEventListener("keydown", (event) => event.key !== "Escape" && !event.repeat && tap(event), true);
+addEventListener("pointerdown", (event) => event.pointerType === "mouse" && tap(event), true);
+addEventListener("pointerup", (event) => event.pointerType !== "mouse" && tap(event), true);
+
+/** True when a person tapped or pressed a key in the last 5 seconds, and not for an action already; uses that tap. */
+export function spendTap() {
+    const fresh = performance.now() - tapped <= TAP_MS;
+
+    tapped = -Infinity;
+
+    return fresh;
+}

package/apps/web/public/theme-surface.d.ts

@@ -0,0 +1,4 @@
+// Types for web/theme-surface.js, which the server imports for THEME_API (src/server/themes/format.ts).
+export declare const THEME_API: number;
+export declare const TOKENS: string[];
+export declare const PARTS: string[];