chamba 0.3.0 → 0.4.0

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

@@ -0,0 +1,229 @@
+// clipboard.js - copy and paste, which have two paths because a TUI can own the mouse.
+//
+// - The agent owns it. claude turns on mouse tracking, so xterm switches its own selection off and the
+//   highlight you drag belongs to the agent, not to the terminal. The agent then hands that text to the
+//   terminal with OSC 52, exactly as it would in a native one - so the OSC 52 handler below is what makes
+//   a drag in claude reach the clipboard at all.
+// - The terminal owns it (a plain shell, or an agent that leaves the mouse alone). Then the selection is
+//   xterm's, and the copy shortcut below copies it.
+//
+// Either way the page writes the clipboard itself and says what it did in the status pill: the browser's
+// own path through xterm only fires when the terminal has focus and a live selection, and says nothing
+// when it does not fire. Ctrl+C is deliberately left alone - interrupting the agent must never depend on
+// whether something happens to be selected.
+//
+// There is one clipboard - the machine's - and it changes only when the user copies something in the
+// window they are looking at. Nothing else here may write it: not a screen being replayed, not a session
+// running in the background. Anything less stops feeling like a clipboard.
+
+import { connected, sendFrame } from "./connection.js";
+import { noteMsg } from "./note.js";
+import { attachedSid } from "./state.js";
+import { term } from "./terminal.js";
+
+// Shortcut hints follow the platform, so the pill only ever teaches keys that work here.
+const IS_MAC = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+const COPY_HINT = IS_MAC ? "Cmd+C" : "Ctrl+Shift+C";
+const PASTE_HINT = IS_MAC ? "Cmd+V" : "Ctrl+V";
+// The modifier that takes the mouse back from an app that is tracking it, so the browser gets the drag
+// and the selection is xterm's again (xterm's shouldForceSelection: Alt on macOS, Shift everywhere else).
+const FORCE_SELECT_KEY = IS_MAC ? "Alt" : "Shift";
+
+// True while a TUI is tracking the mouse, which is also when xterm has no selection of its own to give.
+function agentOwnsMouse() {
+    return term.modes.mouseTrackingMode !== "none";
+}
+
+// Last-resort clipboard write, for when the async clipboard API is missing or refuses (a non-localhost
+// origin is not a secure context; an editor's embedded browser blocks it). execCommand only works inside
+// the click or keypress that asked for the copy, which is why this stays synchronous.
+function copyByExecCommand(text) {
+    const scratch = document.createElement("textarea");
+    scratch.value = text;
+    scratch.readOnly = true;
+    // Off-screen rather than hidden: a display:none field cannot be selected, so it cannot be copied.
+    scratch.style.position = "fixed";
+    scratch.style.top = "-1000px";
+    document.body.append(scratch);
+    scratch.select();
+    let copied = false;
+    try {
+        copied = document.execCommand("copy");
+    } catch {
+        // Blocked outright; the caller reports it.
+    }
+    scratch.remove();
+    term.focus();
+    return copied;
+}
+
+async function copyToClipboard(text) {
+    // No async clipboard at all: go straight to the fallback while the user gesture is still current.
+    if (!navigator.clipboard?.writeText) return copyByExecCommand(text);
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    } catch {
+        return copyByExecCommand(text);
+    }
+}
+
+// Silence is what made this feel broken, so every outcome says so.
+async function copyText(text) {
+    if (!text) {
+        noteMsg("nothing is selected in the terminal - drag over the text you want first");
+        return false;
+    }
+    if (await copyToClipboard(text)) {
+        const lines = text.split("\n").length;
+        noteMsg(`copied ${lines} line${lines === 1 ? "" : "s"}`);
+        return true;
+    }
+    noteMsg("this browser would not give the page clipboard access", true);
+    return false;
+}
+
+// Text an agent handed over with OSC 52 that has not reached the clipboard yet - the browser refused the
+// write, or this window was not the one in front. It arrives just after the drag rather than inside it,
+// and Safari only allows a clipboard write inside the gesture that asked for one, so it is kept here and
+// the copy shortcut - a real gesture, in this window - can finish the job. Nothing is lost either way.
+let pendingOscText = "";
+
+// A replay is the attached session's own past output, so it can still contain the OSC 52 an agent sent
+// when something was copied in that session earlier. Writing it into the terminal re-runs that sequence,
+// which put stale text on the clipboard on every attach - a session switch, a reload, a reconnect after
+// sleep - and that is what made each session tab look like it carried a clipboard of its own. So the
+// clipboard is left alone while a replay is being parsed.
+//
+// A counter rather than a flag because two replays can be in flight (a switch, then an immediate
+// reconnect). xterm runs each write's callback once that chunk is parsed and before it parses anything
+// written after it, so output that arrives while a replay is still parsing copies normally. The gate does
+// cover anything already queued and not yet parsed when the replay lands, which in practice is nothing: a
+// copy and a session switch are both done by hand, and the parser is never that far behind.
+let pendingReplays = 0;
+
+export function writeReplay(data) {
+    if (!data) return;
+    pendingReplays++;
+    term.write(data, () => {
+        pendingReplays--;
+    });
+}
+
+function copySelection() {
+    const text = term.getSelection();
+    if (text) {
+        copyText(text);
+        return;
+    }
+    // A copy that did not land when the agent pushed it - refused, or this window was not in front. This
+    // keypress is the gesture it was waiting for, in the window that asked for it.
+    if (pendingOscText) {
+        const pending = pendingOscText;
+        pendingOscText = "";
+        copyText(pending);
+        return;
+    }
+    // No terminal selection because the agent has the mouse: say what does work instead of "nothing here".
+    if (agentOwnsMouse()) {
+        noteMsg(`the agent is handling the mouse - dragging copies on its own, or hold ${FORCE_SELECT_KEY} while dragging to select here`);
+        return;
+    }
+    copyText("");
+}
+
+// Paste the clipboard into the attached session, as one paste frame the server wraps in bracketed-paste
+// markers - the same path Send uses, so a multi-line paste arrives as a paste and not as a burst of
+// Enter presses. Reading the clipboard needs permission, which the browser asks for once.
+async function pasteIntoTerminal() {
+    if (!connected || !attachedSid) return;
+    if (!navigator.clipboard?.readText) {
+        noteMsg(`this browser will not let the page read the clipboard - press ${PASTE_HINT} in the terminal instead`, true);
+        return;
+    }
+    try {
+        const text = await navigator.clipboard.readText();
+        if (text) sendFrame({ t: "paste", data: text });
+    } catch {
+        noteMsg(`clipboard read was blocked - press ${PASTE_HINT} in the terminal instead`, true);
+    }
+}
+
+// Both handlers hang off the terminal, so they are installed from the entry rather than when this module is
+// loaded - the terminal is put on the page there, in order, and a module that reached for it while the page
+// was still loading would be reaching into something half-built.
+export function installClipboard() {
+    // OSC 52 is how a program in the terminal puts text on the clipboard - it is what claude sends when you
+    // drag-select in its own UI. Nothing handled it here before, so those selections went nowhere.
+    term.parser.registerOscHandler(52, (payload) => {
+        // Payload is "<target>;<base64>": the target picks a clipboard (c: system, p: primary), which the
+        // browser does not distinguish, so it is dropped.
+        const split = payload.indexOf(";");
+        const data = split === -1 ? "" : payload.slice(split + 1);
+        // "?" asks the terminal to hand the clipboard back. It is never answered: the clipboard belongs to the
+        // host, and a process in the container must not be able to read it out through the relay. An empty
+        // payload is a clipboard clear, which is also not worth acting on.
+        if (!data || data === "?") return true;
+        // Replayed output, not something the user just did. Ignored outright: it is a copy that already
+        // happened, and the clipboard has moved on since.
+        if (pendingReplays > 0) return true;
+        let text = "";
+        try {
+            // Base64 to bytes to UTF-8. Decoding with atob alone yields latin-1, which mangles every
+            // non-ASCII character - the bug the upstream xterm clipboard addon shipped with.
+            text = new TextDecoder().decode(Uint8Array.from(atob(data), (char) => char.charCodeAt(0)));
+        } catch {
+            // A malformed payload is the sending program's problem, not something to report here.
+            return true;
+        }
+        // Only the window in front may write the clipboard. A background window - a second tab, or this one
+        // while the user is in another app - would replace what they copied there, so the text waits for a
+        // copy shortcut here instead of taking a clipboard it was not asked for.
+        if (!document.hasFocus()) {
+            pendingOscText = text;
+            return true;
+        }
+        // Not awaited: the parser reads the rest of the agent's output while the clipboard write settles.
+        // Chrome allows this write without a fresh click (the tab is focused and holds the permission); where
+        // it is refused, the text is kept so the copy shortcut can finish it.
+        copyText(text).then((copied) => {
+            pendingOscText = copied ? "" : text;
+            if (!copied) noteMsg(`press ${COPY_HINT} to finish copying the agent's selection`, true);
+        });
+        return true;
+    });
+
+    // Taken before xterm sees the key. Cmd+C would otherwise depend on the browser's copy event reaching
+    // xterm, and the ctrl+shift pair is worse than nothing today: xterm maps ctrl+letter ignoring shift, so
+    // Ctrl+Shift+C sends ^C and interrupts the agent. Plain Cmd+V / Ctrl+V is left to the browser's own
+    // paste event, which carries the clipboard with it and needs no permission.
+    term.attachCustomKeyEventHandler((event) => {
+        if (event.type !== "keydown") return true;
+
+        // Shift+Enter is a newline here too, so one habit works in both boxes on this page. A terminal has no such key
+        // of its own - Enter is a carriage return whatever else is held down, which is why an agent's own answer to
+        // "give me a newline" is Alt+Enter, ESC followed by CR. That is exactly what this sends, so this is a second
+        // key onto a sequence the agent already understands rather than anything new for it to support. Alt+Enter is
+        // untouched and still works, for the fingers that already know it.
+        if (event.key === "Enter" && event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
+            event.preventDefault();
+            if (connected && attachedSid) sendFrame({ t: "in", data: "\x1b\r" });
+            return false;
+        }
+
+        const cmd = event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey;
+        const ctrlShift = event.ctrlKey && event.shiftKey && !event.metaKey && !event.altKey;
+        const key = event.key.toLowerCase();
+        if ((cmd || ctrlShift) && key === "c") {
+            event.preventDefault();
+            copySelection();
+            return false;
+        }
+        if (ctrlShift && key === "v") {
+            event.preventDefault();
+            pasteIntoTerminal();
+            return false;
+        }
+        return true;
+    });
+}

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

@@ -0,0 +1,226 @@
+// composer.js - the box under the terminal: a message written properly, and the images that go with it.
+//
+// What is in it belongs to the attached session (see drafts.js), and on Send the whole text goes as one paste
+// frame the server wraps in bracketed-paste markers, so a multi-line message arrives as one message.
+
+import { connected, everConnected, sendFrame } from "./connection.js";
+import { attachBtn, fileInput, input, sendBtn } from "./dom.js";
+import {
+    addImageToDraft,
+    atFirstLine,
+    atLastLine,
+    captureDraft,
+    dropDraft,
+    endHistoryWalk,
+    historyAt,
+    persistDrafts,
+    rememberSent,
+    schedulePersist,
+    showRecalled,
+    walkHistory,
+} from "./drafts.js";
+import { noteMsg } from "./note.js";
+import { attachedSid, defaultAgent, KEY_QUERY, sessions } from "./state.js";
+import { term } from "./terminal.js";
+
+// Connection and attachment state show on the composer's border and in its placeholder rather than a
+// separate status line: lit in the workspace colour when keystrokes have somewhere to go, grey when they do
+// not, with the reason in the placeholder.
+const INPUT_PLACEHOLDER = "Type a message. Paste or drop an image. Enter sends, Shift+Enter for a newline, Up recalls the last one.";
+
+export function refreshComposer() {
+    const live = connected && Boolean(attachedSid);
+    input.classList.toggle("online", live);
+    input.classList.toggle("waiting", !live);
+    input.disabled = !live;
+    if (!connected) input.placeholder = everConnected ? "Reconnecting... your session kept running." : "Connecting...";
+    else if (live) input.placeholder = INPUT_PLACEHOLDER;
+    else if (sessions.length === 0) input.placeholder = `No sessions. Use "+ New session" above to start ${defaultAgent}.`;
+    else input.placeholder = "Pick a session above to type in it.";
+}
+
+export function autoGrow() {
+    input.style.height = "auto";
+    // Floor at the default height (112px, enough for the stacked buttons) so the box never shrinks
+    // behind them; grow with content up to a cap.
+    input.style.height = `${Math.min(Math.max(input.scrollHeight, 112), 200)}px`;
+}
+input.addEventListener("input", () => {
+    autoGrow();
+    // A recalled message that has been edited is a new message, so the arrows stop stepping through history.
+    endHistoryWalk();
+    // Kept up to date as you type, so a reload mid-sentence or a session taken away in another window does
+    // not lose it. The write itself is debounced.
+    captureDraft(attachedSid);
+    schedulePersist();
+});
+
+// Insert text into the composer at the current caret position (surrounded by spaces so a path
+// does not fuse with adjacent words), then place the caret right after it.
+export function insertAtCursor(text) {
+    const start = input.selectionStart ?? input.value.length;
+    const end = input.selectionEnd ?? input.value.length;
+    const before = input.value.slice(0, start);
+    const after = input.value.slice(end);
+    const lead = before && !before.endsWith(" ") && !before.endsWith("\n") ? " " : "";
+    const trail = after && !after.startsWith(" ") && !after.startsWith("\n") ? " " : " ";
+    const piece = lead + text + trail;
+    // Attaching an image to a recalled message makes it a new message.
+    endHistoryWalk();
+    input.value = before + piece + after;
+    const caret = before.length + piece.length;
+    input.setSelectionRange(caret, caret);
+    autoGrow();
+    input.focus();
+}
+
+// A friendly placeholder token is shown in the composer for each attached image (like claude's own
+// [Image #N]); the real container path is swapped in only at send time. Keyed by the visible token.
+export const pendingImages = new Map();
+export let imageCounter = 0;
+
+// The counter belongs to the box, and a draft carries its own: switching sessions puts that session's counter
+// back, so [Image #1] in one session can never resolve to another session's file.
+export function setImageCounter(value) {
+    imageCounter = value;
+}
+
+// Empty the box, and the image tokens with it: a token whose text is gone points at nothing.
+export function clearComposer() {
+    input.value = "";
+    pendingImages.clear();
+    imageCounter = 0;
+    endHistoryWalk();
+    autoGrow();
+}
+
+// --- Images ------------------------------------------------------------------------------------------------------------------------------
+
+// Upload one image blob; on success insert a friendly [Image #N] token inline where the caret was,
+// and remember which container path it maps to.
+async function uploadImage(blob) {
+    // The upload is async: the caret can move and the window can switch sessions before it lands, so both
+    // are read now and the token goes where the image was actually attached.
+    const sid = attachedSid;
+    const at = input.selectionStart ?? input.value.length;
+    try {
+        const res = await fetch(`/upload${KEY_QUERY}`, { method: "POST", headers: { "Content-Type": blob.type }, body: blob });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+        if (sid && sid !== attachedSid) {
+            addImageToDraft(sid, data.path);
+            return;
+        }
+        const token = `[Image #${++imageCounter}]`;
+        pendingImages.set(token, data.path);
+        input.setSelectionRange(at, at);
+        insertAtCursor(token);
+        captureDraft(attachedSid);
+        persistDrafts();
+    } catch (err) {
+        noteMsg(`upload failed: ${err.message}`, true);
+    }
+}
+
+// --- Sending -----------------------------------------------------------------------------------------------------------------------------
+
+// Send the whole composer text as one paste. Each [Image #N] token is expanded to its real path
+// (in place, so order is preserved) just before sending, so the agent receives the actual file paths.
+function send() {
+    if (!connected || !attachedSid) return;
+
+    let text = input.value;
+    for (const [token, path] of pendingImages) {
+        text = text.split(token).join(path);
+    }
+    text = text.trim();
+    if (!text) return;
+
+    sendFrame({ t: "paste", data: text });
+
+    const sid = attachedSid;
+    // Stored expanded, exactly as the agent received it, so recalling and sending again says the same thing.
+    rememberSent(sid, text);
+    clearComposer();
+    dropDraft(sid);
+    term.focus();
+}
+
+sendBtn.addEventListener("click", send);
+
+// Enter sends; Shift+Enter inserts a newline. Ctrl+C clears the composer (when nothing is selected,
+// so a real copy still works), mirroring claude's "Ctrl+C clears the input line" behavior.
+// Up and Down walk back through what this session was already sent - see drafts.js for when they
+// are a recall and when they are just the caret moving.
+input.addEventListener("keydown", (e) => {
+    if (e.ctrlKey && (e.key === "c" || e.key === "C")) {
+        if (input.selectionStart === input.selectionEnd) {
+            e.preventDefault();
+            clearComposer();
+            dropDraft(attachedSid);
+        }
+        return;
+    }
+    const plain = !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey;
+    if (e.key === "ArrowUp" && plain) {
+        // Only from the top of the box, and only into an empty one unless a walk is already under way.
+        if (!atFirstLine()) return;
+        if (historyAt === null && input.value !== "") return;
+        if (walkHistory(true)) e.preventDefault();
+        return;
+    }
+    if (e.key === "ArrowDown" && plain) {
+        if (historyAt === null || !atLastLine()) return;
+        if (walkHistory(false)) e.preventDefault();
+        return;
+    }
+    // Escape puts the box back the way the walk found it: empty, and typing into it again.
+    if (e.key === "Escape" && historyAt !== null) {
+        e.preventDefault();
+        endHistoryWalk();
+        showRecalled("");
+        return;
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        send();
+    }
+});
+
+// Paste an image straight into the composer.
+input.addEventListener("paste", (e) => {
+    const items = e.clipboardData?.items || [];
+    for (const item of items) {
+        if (item.type.startsWith("image/")) {
+            const blob = item.getAsFile();
+            if (blob) {
+                e.preventDefault();
+                uploadImage(blob);
+            }
+        }
+    }
+});
+
+// Drag and drop images onto the composer.
+["dragover", "drop"].forEach((type) => {
+    input.addEventListener(type, (e) => {
+        // Only a file drag is ours. Without this the composer accepts any drag at all - including a session
+        // tab on its way along the bar, which would end as a drop on the box instead of a reorder.
+        if (!e.dataTransfer?.types?.includes("Files")) return;
+        e.preventDefault();
+        if (type === "drop") {
+            for (const file of e.dataTransfer?.files || []) {
+                if (file.type.startsWith("image/")) uploadImage(file);
+            }
+        }
+    });
+});
+
+// Attach button -> file picker.
+attachBtn.addEventListener("click", () => fileInput.click());
+fileInput.addEventListener("change", () => {
+    for (const file of fileInput.files || []) {
+        if (file.type.startsWith("image/")) uploadImage(file);
+    }
+    fileInput.value = "";
+});