chamba 0.3.0 → 0.4.0

package/templates/webterm/public/app/new-session.js

@@ -0,0 +1,188 @@
+// new-session.js - what the next session should be.
+//
+// Two things make a session and neither can be changed later: which agent runs, and where it runs. One server runs
+// every agent it knows, one per session, so the bar can hold claude and codex side by side, each in its own directory.
+//
+// So both are asked in one panel rather than one control each. Two controls could not be combined - "codex, over
+// there" was not sayable - and the pair of them made the bar read like a toolbar for something that is really one
+// question. The plain button still answers it the usual way in one click; the chevron beside it is where the question
+// gets asked in full, and neither moves the default. `webterm <agent>` in the container is what moves that.
+//
+// It is anchored under the button rather than shown as a card in the middle of the screen: this is the one panel that
+// opens on the way to something routine, and a centred card would send the pointer across the window and back for a
+// choice that is usually two clicks. It hangs off the body all the same, because the bar is rebuilt from scratch on
+// every frame and on the age tick, which would take the open panel with it.
+//
+// Nothing typed here is trusted: the server resolves whatever path arrives and refuses what is not a directory in the
+// workspace, and it refuses an agent it does not run.
+
+import { sendFrame } from "./connection.js";
+import { noteMsg } from "./note.js";
+import { agents, defaultAgent, defaultCwd, KEY_QUERY } from "./state.js";
+import { focusTerminal } from "./terminal.js";
+
+const DIR_LIST_ID = "dirlist";
+
+let newPopEl = null;
+
+function closeNewPop() {
+    if (!newPopEl) return;
+    newPopEl.remove();
+    newPopEl = null;
+    document.removeEventListener("pointerdown", onNewPopOutside, true);
+}
+
+// Put an open panel back under its button after the bar was rebuilt. A frame arrives whenever anything in the
+// container moves, and a panel that closed itself every time one did would be unusable; a button that is gone
+// (the session limit) takes it with it. Clamped to the window, since the bar can be scrolled far to the right.
+export function repositionNewPop() {
+    if (!newPopEl) return;
+    const anchor = document.getElementById("newtab-more");
+    if (!anchor) {
+        closeNewPop();
+        return;
+    }
+    const box = anchor.getBoundingClientRect();
+    const width = newPopEl.offsetWidth;
+    const left = Math.min(box.right - width, window.innerWidth - width - 8);
+    newPopEl.style.top = `${Math.round(box.bottom + 6)}px`;
+    newPopEl.style.left = `${Math.round(Math.max(8, left))}px`;
+}
+
+function onNewPopOutside(event) {
+    // The button itself is left alone: its own click handler toggles, and closing here first would reopen it.
+    if (newPopEl?.contains(event.target) || event.target.closest?.("#newtab-more")) return;
+    closeNewPop();
+}
+
+// Fill the picker's suggestions from the container. Fetched when the panel opens rather than kept around, so
+// a directory created a minute ago is in the list. Failures are silent on purpose: the field still works,
+// and a suggestion list that did not load is not worth a card of its own.
+async function fillDirList(list) {
+    let payload;
+    try {
+        const res = await fetch(`/dirs${KEY_QUERY}`, { cache: "no-store" });
+        if (!res.ok) return;
+        payload = await res.json();
+    } catch {
+        return;
+    }
+    // The panel may have been closed while this was in flight.
+    if (!list.isConnected) return;
+    const dirs = Array.isArray(payload?.dirs) ? payload.dirs : [];
+    // "/" is how the root is written here: a path everyone recognises, and the one value the server reads
+    // back as the workspace root itself.
+    for (const dir of ["/", ...dirs]) {
+        const option = document.createElement("option");
+        option.value = dir;
+        if (dir === "/") option.label = "workspace root";
+        list.append(option);
+    }
+    // The scan is capped, so say when the list is partial instead of letting it look complete.
+    if (payload?.truncated) noteMsg("the directory list is partial - deeper paths can still be typed in");
+}
+
+// The agent half: one chip per agent, the usual one already chosen, so the panel can be opened for the directory
+// alone and closed with Enter. A container that runs a single agent has nothing to ask and gets no row.
+function agentRow(state) {
+    const row = document.createElement("div");
+    row.className = "agentrow";
+    row.setAttribute("role", "radiogroup");
+    row.setAttribute("aria-label", "Agent for the new session");
+    for (const name of agents) {
+        const choice = document.createElement("button");
+        choice.type = "button";
+        choice.className = "agentchoice";
+        choice.textContent = name;
+        choice.setAttribute("role", "radio");
+        choice.setAttribute("aria-checked", String(name === state.agent));
+        choice.classList.toggle("chosen", name === state.agent);
+        choice.addEventListener("click", () => {
+            state.agent = name;
+            for (const other of row.children) {
+                const on = other.textContent === name;
+                other.classList.toggle("chosen", on);
+                other.setAttribute("aria-checked", String(on));
+            }
+        });
+        row.append(choice);
+    }
+    return row;
+}
+
+function popLabel(text) {
+    const label = document.createElement("span");
+    label.className = "poplabel";
+    label.textContent = text;
+    return label;
+}
+
+export function toggleNewPop() {
+    if (newPopEl) {
+        closeNewPop();
+        return;
+    }
+    const state = { agent: defaultAgent };
+    const pop = document.createElement("div");
+    pop.id = "newpop";
+    pop.setAttribute("role", "dialog");
+    pop.setAttribute("aria-label", "Start a session");
+
+    if (agents.length > 1) pop.append(popLabel("Agent"), agentRow(state));
+
+    const field = document.createElement("input");
+    field.type = "text";
+    field.className = "path";
+    field.value = defaultCwd;
+    field.placeholder = "workspace root";
+    field.spellcheck = false;
+    field.autocomplete = "off";
+    field.setAttribute("list", DIR_LIST_ID);
+    field.setAttribute("aria-label", "Directory for the new session, relative to the workspace root");
+    const list = document.createElement("datalist");
+    list.id = DIR_LIST_ID;
+    pop.append(popLabel("Directory"), field, list);
+
+    const start = () => {
+        closeNewPop();
+        sendFrame({ t: "new", cwd: field.value.trim(), agent: state.agent });
+    };
+    const row = document.createElement("div");
+    row.className = "poprow";
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "btn";
+    cancel.textContent = "Cancel";
+    cancel.addEventListener("click", () => {
+        closeNewPop();
+        focusTerminal();
+    });
+    const go = document.createElement("button");
+    go.type = "button";
+    go.className = "btn primary";
+    go.textContent = "Start session";
+    go.addEventListener("click", start);
+    row.append(cancel, go);
+    pop.append(row);
+
+    field.addEventListener("keydown", (event) => {
+        if (event.key !== "Enter") return;
+        event.preventDefault();
+        start();
+    });
+
+    document.body.append(pop);
+    newPopEl = pop;
+    repositionNewPop();
+    field.focus();
+    field.select();
+    fillDirList(list);
+    // Capture, so a click on a tab closes this before that tab switches session.
+    document.addEventListener("pointerdown", onNewPopOutside, true);
+}
+
+document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || !newPopEl) return;
+    closeNewPop();
+    focusTerminal();
+});

package/templates/webterm/public/app/note.js

@@ -0,0 +1,24 @@
+// note.js - transient status, shown as a pill floating over the bottom of the terminal.
+//
+// It floats rather than sitting in the layout because it comes and goes constantly - a copy says so on every
+// drag - and a line that appears and disappears in the flow shifts everything under it each time.
+
+import { note } from "./dom.js";
+
+// A plain note is gone quickly; an error stays long enough to be read and acted on.
+const NOTE_MS = 2500;
+const NOTE_ERROR_MS = 5000;
+
+export function noteMsg(text, isError) {
+    note.textContent = text;
+    note.classList.toggle("error", Boolean(isError));
+    if (text) {
+        setTimeout(
+            () => {
+                // Only clear the note if no newer message replaced it in the meantime.
+                if (note.textContent === text) note.textContent = "";
+            },
+            isError ? NOTE_ERROR_MS : NOTE_MS,
+        );
+    }
+}

package/templates/webterm/public/app/pane-frame.js

@@ -0,0 +1,166 @@
+// pane-frame.js - how a published page is put on the screen, and how an answer comes back out of it.
+//
+// A page is written by an agent, so it is treated as somebody else's document rather than as part of this
+// interface. It goes into an iframe with `sandbox="allow-scripts allow-forms"` and no same-origin token,
+// which gives it an opaque origin: its scripts run, and there is nothing of this page for them to reach -
+// not the DOM, not storage, not the key. The content arrives over the key-gated route with the key in a
+// header, so the frame never holds a URL that carries it either.
+//
+// The one way out of the frame is a message. The shell injects a small script into the content that wires
+// any `<form data-feedback>` to a `postMessage`, and the shell - which alone holds the key - forwards the
+// submission to the feedback endpoint and posts the outcome back in. A published page therefore stays plain
+// HTML: the agent writes a form, not networking code.
+
+import { KEY_HEADER, WEB_KEY } from "./state.js";
+
+// What the injected script and the shell call each other's messages. Namespaced because a page may be
+// talking to something else of its own, and every message is checked against the frame it must come from.
+const SUBMIT = "webpane:submit";
+const RESULT = "webpane:result";
+
+// The script that turns a plain form into a submission. It runs inside the frame, with no key and no way to
+// reach the server: everything it knows how to do is ask its parent.
+//
+// The shape it collects is the feedback file's: every named control is a field, except a control named
+// "text", which is the free-text box the file has a place of its own for.
+const WIRING = `<script>
+(function () {
+    function collect(form) {
+        var fields = {};
+        var text = "";
+        var data = new FormData(form);
+        var names = [];
+        data.forEach(function (value, name) {
+            if (typeof value !== "string") return;
+            if (name === "text") { text = value; return; }
+            if (names.indexOf(name) === -1) { names.push(name); fields[name] = value; return; }
+            fields[name] = fields[name] + ", " + value;
+        });
+        return { fields: fields, text: text };
+    }
+    function wire(form) {
+        if (form.dataset.webpaneWired === "1") return;
+        form.dataset.webpaneWired = "1";
+        form.addEventListener("submit", function (event) {
+            event.preventDefault();
+            var answers = collect(form);
+            form.setAttribute("data-webpane-state", "sending");
+            parent.postMessage({ t: "${SUBMIT}", fields: answers.fields, text: answers.text }, "*");
+        });
+    }
+    function wireAll() {
+        var forms = document.querySelectorAll("form[data-feedback]");
+        for (var i = 0; i < forms.length; i++) wire(forms[i]);
+    }
+    window.addEventListener("message", function (event) {
+        if (!event.data || event.data.t !== "${RESULT}") return;
+        var forms = document.querySelectorAll("form[data-feedback]");
+        for (var i = 0; i < forms.length; i++) forms[i].setAttribute("data-webpane-state", event.data.ok ? "sent" : "failed");
+    });
+    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", wireAll);
+    else wireAll();
+})();
+</script>`;
+
+// The base every relative URL and `document.baseURI` inside the frame resolves against.
+//
+// This one matters, and it is half of a pair. A srcdoc document has no URL of its own, so it falls back to
+// the base URL of the document holding it - and `document.baseURI` is a plain string on the child document,
+// which an opaque origin does nothing about. So a page could read it and send it anywhere, and this window's
+// URL carries the key.
+//
+// The half that holds whatever the page does is in index.html: the shell declares `<base href="/">`, so the
+// value the frame falls back to is the bare origin rather than a URL with a key on it. This half is the
+// passive one: giving the rendered document its own base means nothing is inherited in the first place. It
+// is the frame's own URL, which is what a document with no other base should have, and it keeps in-page
+// `#anchor` links working - a fragment of the current URL is a scroll, and anything else is a navigation.
+// A page can delete this element (it is in its own DOM), which is exactly why the shell's base exists.
+const NEUTRAL_BASE = '<base href="about:srcdoc" />';
+
+// The page as it is rendered: the base first, then its own HTML, then the wiring.
+//
+// The base goes after a doctype where there is one (a doctype that is not first puts the document into
+// quirks mode) and before everything else, so it is the first base the parser meets. The wiring goes before
+// the end of the body where there is one, so a document that ends properly stays ended, and is appended
+// otherwise - a published file may be a fragment, and the frame renders it either way.
+function withWiring(html) {
+    const doctype = /^\s*<!doctype[^>]*>/i.exec(html);
+    const at = doctype ? doctype[0].length : 0;
+    const body = html.slice(at);
+    const end = body.toLowerCase().lastIndexOf("</body>");
+    const wired = end === -1 ? body + WIRING : body.slice(0, end) + WIRING + body.slice(end);
+    return html.slice(0, at) + NEUTRAL_BASE + wired;
+}
+
+/** One page's content, over the key-gated route. Throws for anything that is not a page served back. */
+export async function fetchPage(sid, id) {
+    const url = `/pane/page?sid=${encodeURIComponent(sid)}&id=${encodeURIComponent(id)}`;
+    const response = await fetch(url, { headers: { [KEY_HEADER]: WEB_KEY }, cache: "no-store" });
+    if (!response.ok) throw new Error(String(response.status));
+    return response.text();
+}
+
+// The message listener of the frame currently on the screen, if any. At most one page is rendered at a time.
+let active = null;
+
+/**
+ * Put a page into `host`, replacing whatever was there, and return the frame.
+ *
+ * `onFeedback(submission)` is called when a form inside the page is submitted; it answers with a promise for
+ * whether the answers were filed, which is posted back into the frame so the page can say so.
+ */
+export function renderPage(host, { html, onFeedback }) {
+    dropPage(host);
+    const frame = document.createElement("iframe");
+    frame.className = "page-frame";
+    // The whole security model in one attribute: scripts and forms, and no same-origin, so the document has
+    // an opaque origin. Set before the content, since the sandbox of a frame that already has a document
+    // is not what a later attribute says it is.
+    frame.setAttribute("sandbox", "allow-scripts allow-forms");
+    // The other half of keeping this window's URL out of the frame: a srcdoc document inherits its parent's
+    // referrer, and the parent's URL carries the key - both as `document.referrer` inside the page and as the
+    // `Referer` header on anything it loads.
+    frame.setAttribute("referrerpolicy", "no-referrer");
+    frame.setAttribute("title", "Published page");
+    frame.srcdoc = withWiring(html);
+    host.replaceChildren(frame);
+
+    // Only messages from this frame, of the one kind the wiring sends. Anything else on the window - another
+    // frame, an extension, the page trying something of its own - is not a submission.
+    const listener = async (event) => {
+        if (event.source !== frame.contentWindow) return;
+        if (!event.data || event.data.t !== SUBMIT) return;
+        let ok = false;
+        try {
+            ok = await onFeedback({ fields: event.data.fields, text: event.data.text });
+        } catch {
+            ok = false;
+        }
+        // Whether it was filed, and nothing else. This is the one channel into the frame that no browser
+        // rule narrows for us, so what goes through it stays this small on purpose.
+        frame.contentWindow?.postMessage({ t: RESULT, ok }, "*");
+    };
+    window.addEventListener("message", listener);
+    // The listener belongs to the frame that is up, and goes when that frame does, so a pane the user has
+    // clicked through a dozen times is not a dozen listeners deep.
+    active = listener;
+    return frame;
+}
+
+/** Take a rendered page off the screen, listener and all. */
+export function dropPage(host) {
+    if (active) window.removeEventListener("message", active);
+    active = null;
+    host.replaceChildren();
+}
+
+/** File a submission from the page the pane is showing. The shell holds the key; the frame never sees it. */
+export async function submitFeedback(sid, id, submission) {
+    const url = `/pane/feedback?sid=${encodeURIComponent(sid)}&id=${encodeURIComponent(id)}`;
+    const response = await fetch(url, {
+        method: "POST",
+        headers: { [KEY_HEADER]: WEB_KEY, "Content-Type": "application/json" },
+        body: JSON.stringify({ fields: submission.fields, text: submission.text }),
+    });
+    return response.ok;
+}