bom-pi 0.0.0-stage → 0.0.2

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

@@ -0,0 +1,318 @@
+// The file viewer: a file's text, an image, or a folder's entries. `FileView` draws it in the Files tile and in the
+// file sheet alike.
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { browserAvailable, openInBrowser } from "../browser.js";
+import { mentionText } from "../files.js";
+import { highlightLines, langOf } from "../highlight.js";
+import { HtmlPreview } from "../rich.js";
+import { RunFrame } from "../run-frame.js";
+import { actions, canSteer, closeSheet, insertIntoComposer, notify, store } from "../store.js";
+import {
+    APPLE,
+    copyText,
+    fileUrl,
+    formatBytes,
+    html,
+    Icon,
+    item,
+    Loader,
+    Markdown,
+    openFile,
+    revealFile,
+    Sheet,
+} from "../ui.js";
+
+/** How many lines of a file show at first: a long file draws the rest on request. */
+const FILE_LINES = 3000;
+/** Past this many bytes, a file shows without colors: coloring it would hold up the page. */
+const COLOR_BYTES = 256 * 1024;
+
+const isMarkdown = (path) => /\.(md|markdown|mdx)$/i.test(path);
+const isPage = (path) => /\.(html?|xhtml)$/i.test(path);
+
+/** A file's lines, colored for its language when it is not too big to. */
+function useLines(file, path) {
+    return useMemo(() => {
+        if (file?.kind !== "text") {
+            return { lines: [], colored: null };
+        }
+
+        const lines = file.text.replace(/\n$/, "").split("\n");
+        const lang = langOf(path);
+        const colored =
+            lang && file.text.length <= COLOR_BYTES ? highlightLines(lines, lang) : null;
+
+        return { lines, colored };
+    }, [file, path]);
+}
+
+/**
+ * A file of the session, read-only: text with line numbers and colors (Markdown shows rendered too), an image, or a
+ * folder to browse, under a bar with its path and the viewer's buttons (copy, mention, preview). `line` scrolls to and
+ * marks that line. `onOpen` opens an entry of a folder. `refresh` changes when the same file is asked for again.
+ */
+export function FileView({ path, line, refresh, onOpen = openFile, onLoad }) {
+    const [file, setFile] = useState(null);
+    const [error, setError] = useState(null);
+    const markdown = isMarkdown(path);
+    const page = isPage(path);
+    const [preview, setPreview] = useState(markdown && line === undefined);
+    const [running, setRunning] = useState(false);
+    const [all, setAll] = useState(line !== undefined && line > FILE_LINES);
+    const body = useRef(null);
+    const shownPath = useRef(path);
+    const { lines, colored } = useLines(file, file?.path ?? path);
+    // The same element while the file and the marked line stay the same: Preact then skips its rows on every update of
+    // the app, instead of comparing thousands of them.
+    const rows = useMemo(
+        () => html`<${FileLines} lines=${lines} colored=${colored} all=${all} line=${line} />`,
+        [lines, colored, all, line],
+    );
+
+    useEffect(() => {
+        let live = true;
+
+        // The same file asked for again keeps its text until the new text arrives; another file shows the loader.
+        if (shownPath.current !== path) {
+            shownPath.current = path;
+            setFile(null);
+        }
+
+        setError(null);
+        actions.view(path).then(
+            (each) => {
+                if (live) {
+                    setFile(each);
+                    onLoad?.(each);
+                }
+            },
+            (failure) => {
+                if (live) {
+                    setFile(null);
+                    setError(failure.message);
+                }
+            },
+        );
+
+        return () => {
+            live = false;
+        };
+    }, [path, refresh]);
+    useEffect(() => {
+        setPreview(markdown && line === undefined);
+        setRunning(false);
+    }, [path, line]);
+    useEffect(() => {
+        if (file?.kind === "text" && line !== undefined && !preview) {
+            body.current
+                ?.querySelector(`[data-line="${line}"]`)
+                ?.scrollIntoView({ block: "center" });
+        }
+    }, [file, preview, line]);
+    const shown = file?.display ?? path;
+    const name = shown.replace(/\/$/, "").split("/").pop() || shown;
+
+    return html`<div class="file-viewer">
+        <div class="file-tools">
+            <span class="muted small mono file-path" title=${file?.path ?? path}>
+                ${shown}
+                ${file?.size !== undefined ? ` · ${formatBytes(file.size)}` : ""}
+                ${file?.kind === "text" ? ` · ${lines.length} ${lines.length === 1 ? "line" : "lines"}` : ""}
+            </span>
+            <${FileActions}
+                file=${file}
+                shown=${shown}
+                previewable=${markdown || page}
+                preview=${preview}
+                onPreview=${setPreview}
+                running=${page && preview ? running : null}
+                onRun=${setRunning}
+            />
+        </div>
+        ${error && html`<p class="muted">${error}</p>`}
+        ${!file && !error && html`<${Loader} label="Opening" />`}
+        ${
+            file?.kind === "image" &&
+            html`<img class="file-image" src=${fileUrl(file.path)} alt=${name} />`
+        }
+        ${
+            file?.kind === "binary" &&
+            html`<p class="muted">A binary file: nothing to show as text.</p>`
+        }
+        ${
+            file?.kind === "other" &&
+            html`<p class="muted">Not a regular file (a pipe or a device, say): nothing to show.</p>`
+        }
+        ${
+            file?.kind === "folder" &&
+            html`<div class="group">
+                ${file.entries.length === 0 && html`<p class="muted">An empty folder.</p>`}
+                ${file.entries.map((entry) =>
+                    item(
+                        html`<span class="file-entry">
+                            <${Icon} name=${entry.dir ? "folder" : "file"} size=${15} /> ${entry.name}
+                            ${entry.dir ? "/" : ""}
+                        </span>`,
+                        () => onOpen(`${file.path}/${entry.name}`),
+                    ),
+                )}
+                ${
+                    file.truncated &&
+                    html`<p class="muted small">
+                        Only the first ${file.entries.length} are listed.
+                    </p>`
+                }
+            </div>`
+        }
+        ${
+            file?.kind === "text" &&
+            preview &&
+            markdown &&
+            html`<${Markdown}
+                text=${file.text}
+                base=${file.path.replace(/[^/]*$/, "")}
+                breaks=${false}
+            />`
+        }
+        ${
+            file?.kind === "text" &&
+            preview &&
+            page &&
+            html`${
+                running
+                    ? html`<${RunFrame}
+                          source=${file.text}
+                          title=${name}
+                          from=${`the file “${name}”`}
+                      />`
+                    : html`<${HtmlPreview} source=${file.text} title=${name} />`
+            }
+            <p class="muted small file-note">
+                The files it links to (styles, scripts, images) do not load here.
+                ${
+                    store.state.me?.role === "owner" &&
+                    browserAvailable() &&
+                    html` <button class="link small" onClick=${() => openInBrowser(file.path)}>
+                        Open it in the browser
+                    </button>`
+                }
+            </p>`
+        }
+        ${
+            file?.kind === "text" &&
+            !preview &&
+            html`<div class="file-view" ref=${body}>${rows}</div>
+            ${
+                !all &&
+                lines.length > FILE_LINES &&
+                html`<button class="link" onClick=${() => setAll(true)}>
+                    Show all ${lines.length} lines
+                </button>`
+            }`
+        }
+        ${
+            file?.kind === "text" &&
+            file.truncated &&
+            html`<p class="muted small">
+                Only the first ${formatBytes(file.text.length)} are shown.
+            </p>`
+        }
+    </div>`;
+}
+
+/** A file's lines, numbered, colored when there are colors, the first `FILE_LINES` of them unless `all`. */
+function FileLines({ lines, colored, all, line }) {
+    return (all ? lines : lines.slice(0, FILE_LINES)).map(
+        (text, index) =>
+            html`<div
+                class=${`file-line ${index + 1 === line ? "on" : ""}`}
+                data-line=${index + 1}
+            >
+                <span class="ln">${index + 1}</span>
+                ${
+                    colored
+                        ? html`<span
+                              class="lt"
+                              dangerouslySetInnerHTML=${{ __html: colored[index] || " " }}
+                          ></span>`
+                        : html`<span class="lt">${text || " "}</span>`
+                }
+            </div>`,
+    );
+}
+
+/**
+ * The viewer's buttons: Preview or Source for Markdown and pages, Run for a previewed page (`running` is null where it
+ * does not apply), Copy, and @ Mention.
+ */
+function FileActions({ file, shown, previewable, preview, onPreview, running, onRun }) {
+    return html`${
+        file?.kind === "text" &&
+        running !== null &&
+        html`<button
+            class=${`button small ${running ? "on" : ""}`}
+            title=${running ? "Stop its scripts" : "Run its scripts in a sandbox, as an artifact runs: it can reach the internet, not the app"}
+            onClick=${() => onRun(!running)}
+        >
+            ${running ? "■ Stop" : "▶ Run"}
+        </button>`
+    }
+    ${
+        file?.kind === "text" &&
+        previewable &&
+        html`<button class="button small" onClick=${() => onPreview(!preview)}>
+            ${preview ? "Source" : "Preview"}
+        </button>`
+    }
+    ${
+        file?.kind === "text" &&
+        html`<button
+            class="icon-button"
+            title="Copy"
+            aria-label="Copy"
+            onClick=${() => copyText(file.text).then(() => notify("info", "Copied."))}
+        >
+            <${Icon} name="copy" size=${16} />
+        </button>`
+    }
+    ${
+        file &&
+        canSteer() &&
+        html`<button
+            class="button small"
+            title="Mention it in the message box"
+            onClick=${() => insertIntoComposer(`${mentionText(shown)} `, [], { inline: true })}
+        >
+            @ Mention
+        </button>`
+    }
+    ${
+        // For the owner at the server's machine, with a mouse: show it in that machine's file manager.
+        // Ctrl+click (⌘+click) on a path does the same.
+        file &&
+        store.state.me?.role === "owner" &&
+        matchMedia("(pointer: fine)").matches &&
+        html`<button
+            class="icon-button"
+            title=${`Show in the file manager (${APPLE ? "⌘" : "Ctrl"}+click a path)`}
+            aria-label="Show in the file manager"
+            onClick=${() => revealFile(file.path)}
+        >
+            <${Icon} name="folder" size=${16} />
+        </button>`
+    }`;
+}
+
+/** The viewer as a sheet: opened from a path in a reply, a tool card, a mention, or Changes. */
+export function FileSheet({ path, line, refresh }) {
+    const [name, setName] = useState(path.replace(/\/$/, "").split("/").pop() || path);
+
+    return html`<${Sheet} title=${name} onClose=${closeSheet} wide=${true}>
+        <${FileView}
+            path=${path}
+            line=${line}
+            refresh=${refresh}
+            onLoad=${(file) => setName((file.display ?? path).replace(/\/$/, "").split("/").pop() || path)}
+        />
+    <//>`;
+}

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

@@ -0,0 +1,250 @@
+// Find in session: messages, commands, and files, through the whole history.
+import { useEffect, useRef, useState } from "preact/hooks";
+import { jumpToEntry } from "../chat.js";
+import { actions, closeSheet, isRow, loadEarlier, store } from "../store.js";
+import { html, Icon, Marked, plainText, Sheet, Spinner, writtenText } from "../ui.js";
+
+/** How many entries a page of earlier history has (`app.history` on the server), and how many pages find reads. */
+const HISTORY_PAGE = 400;
+
+const FIND_PAGES = 25;
+
+/** What an entry says, to find text in: messages, Pi's calls' paths and commands, commands people ran, notes. */
+function searchText(entry) {
+    switch (entry.kind) {
+        case "user":
+            return writtenText(entry);
+        case "assistant":
+            return entry.blocks
+                .map((block) =>
+                    block.type === "text"
+                        ? plainText(block.text)
+                        : block.type === "toolCall"
+                          ? [block.args?.path, block.args?.command, block.args?.url]
+                                .filter(Boolean)
+                                .join(" ")
+                          : "",
+                )
+                .filter(Boolean)
+                .join("\n");
+        case "shell":
+        case "command":
+            return `${entry.command}\n${entry.output}`;
+        case "note":
+            return `${entry.name} ${entry.text}`;
+        case "compaction":
+            return entry.summary;
+        case "reset":
+            return entry.text ?? "";
+        default:
+            return "";
+    }
+}
+
+/** Who an entry is from, for a find result. */
+function speaker(entry) {
+    const { view, users, me } = store.state;
+
+    if (entry.kind === "assistant") {
+        return "Pi";
+    }
+
+    if (entry.kind === "shell" || entry.kind === "command" || entry.kind === "note") {
+        return entry.name;
+    }
+
+    if (entry.kind !== "user") {
+        return "Context";
+    }
+
+    const userId = view.authors?.[entry.id];
+
+    if (userId === me?.id) {
+        return "You";
+    }
+
+    return users.find((user) => user.id === userId)?.name ?? entry.from ?? "You";
+}
+
+/**
+ * Find in this session: every message it has, earlier history included, newest first. The browser's own find misses
+ * the messages the transcript has not drawn. Picking one scrolls the transcript to it.
+ */
+export function FindSheet({ initial }) {
+    const { view } = store.state;
+    const [query, setQuery] = useState(initial);
+    const [pick, setPick] = useState(0);
+    // History before a compaction or a new context, page by page, oldest first; `done` once all of it (or as much as
+    // is searched) is here.
+    const [earlier, setEarlier] = useState({ entries: [], done: false, all: true });
+    const box = useRef(null);
+
+    useEffect(() => box.current?.focus(), []);
+    useEffect(() => {
+        let live = true;
+
+        (async () => {
+            // The rest of the active context first: a view brings only its newest entries.
+            await loadEarlier();
+            const { view: now } = store.state;
+            const first = now.order.length > 0 ? now.entries.get(now.order[0]) : undefined;
+
+            if (!live) {
+                return;
+            }
+
+            if (!first || (first.kind !== "compaction" && first.kind !== "reset")) {
+                return setEarlier({ entries: [], done: true, all: true });
+            }
+
+            let entries = [];
+            let before = first.id;
+
+            for (let page = 0; page < FIND_PAGES; page++) {
+                const batch = await actions.history(before);
+
+                if (!live) {
+                    return;
+                }
+
+                entries = [...batch, ...entries];
+                const last = batch.length < HISTORY_PAGE;
+
+                setEarlier({ entries, done: last, all: last });
+
+                if (last) {
+                    return;
+                }
+
+                before = batch[0].id;
+            }
+
+            setEarlier({ entries, done: true, all: false });
+        })().catch(() => live && setEarlier((current) => ({ ...current, done: true, all: false })));
+
+        return () => {
+            live = false;
+        };
+    }, []);
+
+    /**
+     * Jump to a result. One in earlier history first shows that history from a little before it, and the transcript
+     * from its first row on: earlier history shows above the rows of now only when they all show.
+     */
+    const jump = (entry) => {
+        const at = earlier.entries.findIndex((each) => each.id === entry.id);
+
+        if (at !== -1 && !document.getElementById(`entry-${entry.id}`)) {
+            const firstRow = view.order
+                .map((id) => view.entries.get(id))
+                .find((each) => each && isRow(each));
+
+            store.set({
+                history: earlier.entries.slice(Math.max(0, at - 10)),
+                ...(firstRow ? { transcriptFrom: firstRow.id } : {}),
+            });
+        }
+
+        requestAnimationFrame(() => jumpToEntry(entry.id));
+    };
+
+    const needle = query.trim().toLowerCase();
+    const results = [];
+
+    if (needle !== "") {
+        const entries = [
+            ...earlier.entries,
+            ...view.order.map((id) => view.entries.get(id)),
+        ].filter((entry) => entry && isRow(entry));
+
+        for (let index = entries.length - 1; index >= 0 && results.length < 100; index--) {
+            const text = searchText(entries[index]).replace(/\s+/g, " ");
+            const at = text.toLowerCase().indexOf(needle);
+
+            if (at === -1) {
+                continue;
+            }
+
+            const start = Math.max(0, at - 50);
+            const snippet = `${start > 0 ? "…" : ""}${text.slice(start, at + needle.length + 90)}`;
+            const from = at - start + (start > 0 ? 1 : 0);
+
+            results.push({
+                entry: entries[index],
+                snippet,
+                hits: Array.from({ length: needle.length }, (_, offset) => from + offset),
+            });
+        }
+    }
+
+    const chosen = results[Math.min(pick, results.length - 1)];
+
+    const onKey = (event) => {
+        const move = { ArrowDown: 1, ArrowUp: -1 }[event.key];
+
+        if (move !== undefined && results.length > 0) {
+            event.preventDefault();
+            setPick((Math.min(pick, results.length - 1) + move + results.length) % results.length);
+        } else if (event.key === "Enter" && chosen) {
+            event.preventDefault();
+            jump(chosen.entry);
+        }
+    };
+
+    return html`<${Sheet} title="Find in session" onClose=${closeSheet}>
+        <label class="search find-search">
+            <${Icon} name="search" size=${16} />
+            <input
+                class="find-input"
+                ref=${box}
+                type="search"
+                aria-label="Find in session"
+                placeholder="Words in a message, a command, a file…"
+                value=${query}
+                onInput=${(event) => {
+                    setQuery(event.currentTarget.value);
+                    setPick(0);
+                }}
+                onKeyDown=${onKey}
+            />
+            ${
+                needle &&
+                html`<span class="find-count mono" role="status">
+                    ${results.length}
+                </span>`
+            }
+        </label>
+        ${
+            needle !== "" &&
+            results.length === 0 &&
+            earlier.done &&
+            html`<p class="muted">Nothing here says “${query.trim()}”.</p>`
+        }
+        ${
+            !earlier.done &&
+            html`<p class="muted small"><${Spinner} /> Searching earlier history too…</p>`
+        }
+        ${
+            earlier.done &&
+            !earlier.all &&
+            html`<p class="muted small">
+                The oldest history was not searched: only the newest ${earlier.entries.length} earlier entries.
+            </p>`
+        }
+        ${results.length === 100 && html`<p class="muted small">The newest 100 are listed.</p>`}
+        <div class="find-results">
+            ${results.map(
+                (result) => html`<button
+                    key=${result.entry.id}
+                    class=${`find-result ${result === chosen ? "on" : ""}`}
+                    onClick=${() => jump(result.entry)}
+                >
+                    <span class="find-who">${speaker(result.entry)}</span>
+                    <span class="find-snippet">
+                        <${Marked} text=${result.snippet} hits=${result.hits} />
+                    </span>
+                </button>`,
+            )}
+        </div>
+    <//>`;
+}