chamba 0.6.0 → 0.7.0

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

@@ -18,7 +18,7 @@ import { WORKSPACE_COLOR } from "./theme.js";
 // state of the container in one mark:
 //
 //   nothing                       - nothing is happening in here
-//   white bar across the bottom   - an agent is working, with a lit segment sweeping along it
+//   white bar across the bottom   - an agent is working, with a lit segment moving along it
 //   green dot in the top corner   - an agent finished and is waiting for you, pulsing until you go and look
 //
 // One mark at a time, and the two are told apart by where they sit before any colour is read: working owns the
@@ -46,7 +46,7 @@ const ICON_UNITS = 32;
 const ICON_TICK_MS = 240;
 // The waiting dot's bright-to-dim step, in ticks. Slow enough to read as a pulse rather than a flicker.
 const PULSE_TICKS = 3;
-// One out-and-back of the working segment, in ticks - about two seconds each way, which is a sweep and not a dash.
+// One out-and-back of the working segment, in ticks - about two seconds each way, a glide and not a dash.
 const SWEEP_TICKS = 16;
 const DONE_COLOR = "#2fe58a";
 const BUSY_COLOR = "#e6edf3";
@@ -69,7 +69,7 @@ function pulseDim() {
 }
 
 // Where the working segment is on its track - 0 at one end, 1 at the other, and back down again. A triangle
-// rather than a saw, so the segment sweeps back instead of jumping to the start.
+// rather than a saw, so the segment travels back instead of jumping to the start.
 function sweepAt() {
     const half = SWEEP_TICKS / 2;
     const step = iconFrame % SWEEP_TICKS;
@@ -132,7 +132,7 @@ function drawIcon(ctx, badgeColor, dim, sweep) {
     ctx.fill();
     ctx.stroke();
 
-    // Working: a bar across the bottom, with a lit segment sweeping from end to end. The bottom edge is the far
+    // Working: a bar across the bottom, with a lit segment moving from end to end. The bottom edge is the far
     // side of the icon from the corner waiting owns, which is what tells the two states apart at 16px - a thin
     // line down the right edge, which is what this used to be, reads as a scrollbar rather than as anything the
     // container is doing. The track is 20 wide and the segment 8, so the segment travels the 12 between them.
@@ -321,7 +321,7 @@ function playChime() {
     const ctx = audio();
     // Blocked until this page has been clicked or typed into. Nearly never true here - you click the terminal to type -
     // and the tab, the title and the icon are all still saying it either way.
-    if (!ctx || ctx.state !== "running") return;
+    if (ctx?.state !== "running") return;
     const at = ctx.currentTime + 0.02;
     for (const [ratio, level, decay] of CHIME_PARTIALS) {
         const osc = ctx.createOscillator();

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

@@ -45,7 +45,7 @@ export function refreshComposer() {
 
 export function autoGrow() {
     input.style.height = "auto";
-    // The floor keeps the box off the button block behind it and the ceiling caps it at seven lines. Both are
+    // The floor keeps the box off the button block behind it and the ceiling limits it to seven lines. Both are
     // read from the box itself rather than written here as well: the same two numbers in two files is how the
     // box comes to spring back to a height the stylesheet no longer says.
     const box = getComputedStyle(input);
@@ -161,7 +161,10 @@ sendBtn.addEventListener("click", send);
 // draft is not dropped, the Up-arrow history is what you typed and does not gain this, and the terminal is not
 // given the focus. Preventing the default on mousedown is what keeps the caret where it was: a button takes the
 // focus when it is clicked, and this one has no use for it.
-const PANE_REQUEST = "Put your last answer in the web pane as a page.";
+// It names no pane on purpose. Where a page belongs follows what the session is doing: a page made during
+// spec work is an artifact of that work and is saved beside it, and anything else goes to Pages. The skills
+// carry that rule, so the sentence asks for the page and leaves the destination to them.
+const PANE_REQUEST = "Put your last answer on a page.";
 
 askPageBtn.addEventListener("mousedown", (e) => e.preventDefault());
 askPageBtn.addEventListener("click", () => {

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

@@ -23,7 +23,7 @@ export let everConnected = false;
 //
 // Four reasons a window ends up here, and they are not the same to the user:
 //   down     - nothing answers. The container is stopped or gone; keeps reconnecting, so it heals itself.
-//   locked   - the relay answered and refused this window's key. The interface restarted and minted a new
+//   locked   - the relay answered and refused this window's key. The interface restarted and created a new
 //              one, so this URL is spent; reconnecting is pointless and stops.
 //   stopping - the user just stopped the container from here. Same end state as "down", but it is not a
 //              failure and must not read like one.
@@ -181,7 +181,7 @@ export function sendFrame(frame) {
     if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify(frame));
 }
 
-// Any frame at all proves the socket works, which is what a wake probe is waiting to hear. Called by the frame
+// Any frame at all proves the socket works, which is what a wake check is waiting to hear. Called by the frame
 // router, since every frame counts and only it sees them all.
 export function noteSocketAlive() {
     if (probeTimer) {

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

@@ -64,7 +64,7 @@ if (!SpeechRecognition) {
 
     // Prime the mic permission via getUserMedia first: SpeechRecognition on its own often fails
     // straight to "not-allowed" without prompting. In an embedded webview getUserMedia is missing
-    // or blocked, so we surface the "use a real browser" hint.
+    // or blocked, so we show the "use a real browser" hint.
     async function startDictation() {
         try {
             if (!navigator.mediaDevices?.getUserMedia) {

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

@@ -17,10 +17,21 @@ export const askPageBtn = document.getElementById("ask-page");
 export const fileInput = document.getElementById("file-input");
 export const note = document.getElementById("note");
 
-// The web pane. Every one of these is chrome the interface draws around a published page - the page itself
-// lives in a frame built by app/pane-frame.js and is never queried back.
+// The pane's own chrome: the bar that says which tool is open and how wide the pane is, and the panel each
+// tool draws into. None of it belongs to a tool, which is what keeps a tool from moving the pane.
 export const grip = document.getElementById("grip");
 export const pane = document.getElementById("pane");
+export const panebar = document.getElementById("panebar");
+export const toolTabs = document.getElementById("tool-tabs");
+export const paneFull = document.getElementById("pane-full");
+export const paneCollapse = document.getElementById("pane-collapse");
+export const spine = document.getElementById("spine");
+export const spineBadge = document.getElementById("spine-badge");
+export const toolPages = document.getElementById("tool-pages");
+export const toolSpecs = document.getElementById("tool-specs");
+
+// The Pages tool. Every one of these is chrome the interface draws around a published page - the page itself
+// lives in a frame built by app/pane-frame.js and is never queried back.
 export const pagebar = document.getElementById("pagebar");
 export const panePrev = document.getElementById("pane-prev");
 export const paneNext = document.getElementById("pane-next");
@@ -29,10 +40,7 @@ export const pageCount = document.getElementById("page-count");
 export const pageSmaller = document.getElementById("page-smaller");
 export const pageBigger = document.getElementById("page-bigger");
 export const pageSizeVal = document.getElementById("page-size-val");
-export const paneCollapse = document.getElementById("pane-collapse");
 export const pageDoc = document.getElementById("page-doc");
-export const spine = document.getElementById("spine");
-export const spineBadge = document.getElementById("spine-badge");
 
 // The status strip. One element: everything in it is built per frame from the attached session's snapshot.
 export const strip = document.getElementById("strip");

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

@@ -13,6 +13,7 @@ import { stopDictation } from "./dictation.js";
 import { captureDraft, dropDraft, dropHistory, persistDrafts, pruneDrafts, pruneHistory, restoreDraft } from "./drafts.js";
 import { noteMsg } from "./note.js";
 import { applyPages, prunePanes, refreshPane } from "./pane.js";
+import { applySpecs, applySpecsDelivery } from "./specs-host.js";
 import { adoptSessionsFrame, attachedSid, defaultAgent, sessions, setAttachedSid } from "./state.js";
 import { applySnapshot, pruneStatuses, refreshStrip } from "./status-strip.js";
 import { noteArrivals, notePageArrivals, renderBar } from "./tabs.js";
@@ -28,7 +29,7 @@ let shownSid = null;
 let shownMessage = null;
 
 export function onFrame(msg) {
-    // Any frame at all proves the socket works, which is what a wake probe is waiting to hear.
+    // Any frame at all proves the socket works, which is what a wake check is waiting to hear.
     noteSocketAlive();
     if (msg.t === "sessions") {
         applySessions(msg);
@@ -64,6 +65,12 @@ export function onFrame(msg) {
         refreshStrip();
     } else if (msg.t === "pages") {
         applyPages(msg);
+    } else if (msg.t === "specs") {
+        // Every window gets these: a spec belongs to the repository rather than to a session.
+        applySpecs(msg);
+    } else if (msg.t === "specs:delivered") {
+        // What the server made of this window's own delivery, on its way back to the frame that asked.
+        applySpecsDelivery(msg);
     } else if (msg.t === "snapshot") {
         applySnapshot(msg);
     } else if (msg.t === "out") {

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

@@ -13,7 +13,7 @@
 // goes as one {t:"paste"} frame the server wraps as a bracketed paste.
 //
 // Everything here rides on the key this window was handed in its URL: the socket, the uploads and the
-// status probe all carry it, and without a valid one the page is never served in the first place.
+// status check all carry it, and without a valid one the page is never served in the first place.
 //
 // The page is plain ES modules with no build step, one per subject:
 //
@@ -28,7 +28,9 @@
 //   cards.js        the overlay cards
 //   connection.js   the socket, the reconnect loop, and the curtain
 //   frames.js       what to do with each frame the server sends
-//   pane.js         the web pane: the chips bar, the drag and the spine
+//   pane-shell.js   the pane itself: the tool tabs, the three widths, the drag and the spine
+//   pane.js         the Pages tool: the chips bar and the page
+//   specs-host.js   the Specs tool: its frame, and the credentials the shell hands into it
 //   pane-frame.js   a published page in a sandboxed frame, and the answer that comes back out of it
 //   pane-arrival.js which page an incoming list opens by itself, and when none of them does
 //   status-strip.js the attached session's model, context, quota meters and version, above the composer
@@ -67,10 +69,12 @@ import "./note.js";
 import "./pane.js";
 import "./pane-arrival.js";
 import "./pane-frame.js";
+import "./specs-host.js";
 import "./state.js";
 import "./status-strip.js";
 import "./strip-format.js";
 import "./theme.js";
+import { mountPane } from "./pane-shell.js";
 import { renderBar } from "./tabs.js";
 import { mountTerminal, term } from "./terminal.js";
 
@@ -79,6 +83,8 @@ import { mountTerminal, term } from "./terminal.js";
 mountTerminal();
 installClipboard();
 refreshComposer();
+// After every tool has registered, which is what makes the pane something to draw.
+mountPane();
 renderBar();
 // Before the first frame arrives, so the icon carries this workspace's frame from the moment the page loads.
 refreshBrowserTab();

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

@@ -78,7 +78,7 @@ async function fillDirList(list) {
         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.
+    // The scan is limited, 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");
 }
 

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

@@ -0,0 +1,315 @@
+// pane-shell.js - the pane itself: which tool is open in it, and how wide it is.
+//
+// The pane is furniture. What sits in it are tools - Pages (pane.js), Specs (specs-host.js) - and the line
+// between them is the whole point of this module: a tool draws inside its own panel and nothing else, while
+// the tab bar that says which tool is open, and the controls that say how wide the pane is, are drawn out
+// here. A tool can therefore never move the pane, and never lie about which tool the user is looking at.
+//
+// Width has three states, and only one of them is a width. Between the two ends the divider drags anything,
+// clamped as it always was. Past the near end the pane is put away and becomes the spine. Past the far end it
+// takes the whole row and the terminal is squeezed out - which is a state rather than a wider drag, so the
+// drag's own clamps stay where they are. The grip is reachable in every one of them, and dragging it is
+// always the way back.
+//
+// What the pane is belongs to the window - how wide, which tool, how big a page is drawn - and survives a
+// session switch and a reload. What is in a tool belongs to the session, and the tool keeps that itself.
+//
+// This module imports nothing but dom.js, deliberately: the tools import it and register themselves as they
+// load, so it has to be finished before any of them runs.
+
+import { grip, pane, panebar, paneCollapse, paneFull, spine, spineBadge, toolPages, toolSpecs, toolTabs } from "./dom.js";
+
+// The tools, in the order their tabs are drawn. A tool is a tab, a panel, and a render function it hands over
+// when it loads; the pane knows nothing else about any of them.
+export const PAGES = "pages";
+export const SPECS = "specs";
+const TOOLS = [
+    { id: PAGES, label: "Pages", panel: toolPages },
+    { id: SPECS, label: "Specs", panel: toolSpecs },
+];
+
+// Narrower than this and the pane is not a pane any more, so it becomes the spine instead. The mock's
+// threshold, and the width the spine itself takes.
+const COLLAPSE_AT = 150;
+// What the pane opens at, in a fraction of the window, and the most of the window a drag may give it.
+const DEFAULT_FRACTION = 0.44;
+const MAX_FRACTION = 0.7;
+// The least of the window the pane may come back into. Reopening is not the same as resizing: whatever width
+// it was put away at, a pane you have just asked for has to be wide enough to read a page in.
+const MIN_OPEN_FRACTION = 1 / 3;
+// The window's own pane preferences: how wide, whether it is collapsed, whether it has the whole row, which
+// tool is open, and how big a page is drawn in it. Not the session's - a pane is furniture, and furniture
+// does not move because you looked at another tab.
+const GEOMETRY_KEY = "webterm-pane";
+
+let width = null;
+// null means nobody has said. An untouched pane keeps out of the way while the tool it is open on has nothing
+// in it, and is open once that tool has something - which is the first page of a session opening on arrival,
+// as it always did. A click on the spine or on the collapse button is an answer, and from then on it is the
+// only one that counts.
+let collapsed = null;
+// The far end: the pane has the whole row and the terminal is squeezed out.
+let full = false;
+let openTool = PAGES;
+// How big a page is drawn. The pane applies it, so it is stored here with the rest of the furniture, and the
+// Pages tool owns the control and the steps.
+let pageSize = null;
+// What the last render decided, for the two things that only need to know whether the pane is showing.
+let shut = true;
+
+// id -> what that tool has to say for itself on its tab: how many things are waiting in it, and whether it
+// has anything at all. A tool nobody has heard from yet is empty and waiting on nothing.
+const EMPTY_MARK = { unread: 0, empty: true };
+const marks = new Map();
+// id -> the tool's own render function, handed over as it loads.
+const renderers = new Map();
+
+// --- What the window remembers -----------------------------------------------------------------------------------------------------------
+
+try {
+    const stored = JSON.parse(localStorage.getItem(GEOMETRY_KEY) ?? "{}");
+    if (typeof stored.width === "number" && stored.width >= COLLAPSE_AT) width = stored.width;
+    if (typeof stored.collapsed === "boolean") collapsed = stored.collapsed;
+    if (typeof stored.full === "boolean") full = stored.full;
+    if (TOOLS.some((tool) => tool.id === stored.tool)) openTool = stored.tool;
+    // The multiplier is stored rather than its position, so a window that was left at a size this version no
+    // longer offers falls back to the default instead of landing between two steps.
+    if (typeof stored.size === "number") pageSize = stored.size;
+} catch {
+    // A disabled or full store only means the pane opens at its default width, on its default tool.
+}
+
+function remember() {
+    try {
+        localStorage.setItem(GEOMETRY_KEY, JSON.stringify({ width, collapsed, full, tool: openTool, size: pageSize }));
+    } catch {
+        // The pane still works for this page's lifetime.
+    }
+}
+
+/** How big a page was last drawn in this window, or null when nobody has said. */
+export function storedPageSize() {
+    return pageSize;
+}
+
+/** The Pages tool's zoom, kept with the rest of the pane's furniture so one key has one writer. */
+export function rememberPageSize(size) {
+    pageSize = size;
+    remember();
+}
+
+// --- The tools ---------------------------------------------------------------------------------------------------------------------------
+
+/**
+ * A tool says how to draw its panel. Called as the tool's module loads, which is why this module imports
+ * nothing that could still be half-built at that point.
+ */
+export function registerTool(id, render) {
+    renderers.set(id, render);
+}
+
+/** Whether the pane is open on that tool right now. */
+export function isToolOpen(id) {
+    return openTool === id;
+}
+
+/**
+ * What a tool has to say on its tab: `unread` is what is waiting for the user in it, and `empty` is whether
+ * it has anything to show at all - which is what an untouched pane reads to decide whether to stay out of
+ * the way.
+ */
+export function noteTool(id, { unread = 0, empty = false } = {}) {
+    marks.set(id, { unread, empty });
+    renderShell();
+}
+
+/** Open a tool, drawing its panel. A tool the user chose is the tool this window opens on next time. */
+export function showTool(id) {
+    if (!TOOLS.some((tool) => tool.id === id)) return;
+    openTool = id;
+    remember();
+    renderShell();
+    renderers.get(id)?.();
+}
+
+function drawTabs() {
+    const tabs = TOOLS.map((tool) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = tool.id === openTool ? "tool-tab on" : "tool-tab";
+        button.dataset.tool = tool.id;
+        button.append(tool.label);
+        // What is waiting in a tool nobody is looking at. The one thing a tab says beyond its name, so a tool
+        // never has to take the screen to be noticed.
+        const waiting = (marks.get(tool.id) ?? EMPTY_MARK).unread;
+        if (waiting > 0) {
+            const badge = document.createElement("span");
+            badge.className = "tool-mark";
+            badge.textContent = String(waiting);
+            button.append(badge);
+        }
+        button.addEventListener("click", () => showTool(tool.id));
+        return button;
+    });
+    toolTabs.replaceChildren(...tabs);
+    for (const tool of TOOLS) tool.panel.hidden = tool.id !== openTool;
+}
+
+// --- How wide ----------------------------------------------------------------------------------------------------------------------------
+
+// How wide, put away, or the whole row. Its own function because a drag is the one thing that changes the
+// pane without changing anything in it: sixty of these a second are cheap, and sixty full redraws are not.
+function applyGeometry(collapsedNow = shut) {
+    pane.classList.toggle("collapsed", collapsedNow);
+    // Only one of the two can be true: a pane that is put away has no width to be full of.
+    pane.classList.toggle("full", full && !collapsedNow);
+    // The width goes into a custom property rather than straight onto `width`, so the stylesheet keeps the
+    // last word: the collapsed spine, the full row and the narrow-screen layout are rules, and an inline
+    // width would beat all three.
+    pane.style.setProperty("--pane-width", width === null ? `${DEFAULT_FRACTION * 100}%` : `${width}px`);
+    paneFull.classList.toggle("on", full && !collapsedNow);
+    const back = full && !collapsedNow;
+    paneFull.title = back ? "Give the terminal its room back" : "Full width";
+    paneFull.setAttribute("aria-label", paneFull.title);
+}
+
+/** Draw the pane's own chrome: the tabs, the width, and what the spine says while the pane is away. */
+export function renderShell() {
+    const mark = marks.get(openTool) ?? EMPTY_MARK;
+    shut = collapsed === null ? mark.empty : collapsed;
+    pane.hidden = false;
+    // There is no width worth choosing for a tool with nothing in it.
+    grip.hidden = mark.empty && shut;
+
+    applyGeometry(shut);
+    drawTabs();
+
+    // The spine stands for the whole pane, so it carries what every tool is waiting on, not just the open one.
+    let waiting = 0;
+    for (const entry of marks.values()) waiting += entry.unread;
+    spineBadge.textContent = waiting > 0 ? String(waiting) : "";
+    spineBadge.hidden = waiting === 0;
+}
+
+/**
+ * Draw the pane for the first time, on the tool this window was left on. Called from the entry rather than
+ * here, because the tools register as they load and there is no pane to draw until they all have.
+ */
+export function mountPane() {
+    renderShell();
+    renderers.get(openTool)?.();
+}
+
+/** Whether the pane is drawn as the spine rather than as a pane. */
+export function isPaneShut() {
+    return shut;
+}
+
+/** Whether the user put the pane away, as opposed to never having said. */
+export function isPaneCollapsed() {
+    return collapsed === true;
+}
+
+// Away, and back. Two ways in and one way out, because the pane is put away far more often than it is
+// resized: the button in the bar is the obvious one, and dragging the grip past the threshold is the other.
+export function setPaneCollapsed(next) {
+    collapsed = next;
+    shut = next;
+    if (collapsed) {
+        // Coming back to a pane that fills the window, with the terminal nowhere, is not what putting one
+        // away asks for. The width it had is remembered; the far end is not.
+        full = false;
+    } else {
+        // Back at whatever width it had, unless that width would be a sliver - a pane dragged shut, or one
+        // from a window remembered narrower than this one, has to open into something a page fits in.
+        const floor = Math.min(window.innerWidth * MIN_OPEN_FRACTION, window.innerWidth * MAX_FRACTION);
+        if (width !== null && width < floor) width = floor;
+    }
+    remember();
+    renderShell();
+    renderers.get(openTool)?.();
+}
+
+// The far end, and back. A press either way, and a drag of the grip is the other way back.
+function setFull(next) {
+    full = next;
+    if (full) collapsed = false;
+    remember();
+    renderShell();
+    renderers.get(openTool)?.();
+}
+
+paneFull.addEventListener("click", () => setFull(!full));
+paneCollapse.addEventListener("click", () => setPaneCollapsed(true));
+spine.addEventListener("click", () => setPaneCollapsed(false));
+
+// --- Saying that something arrived -------------------------------------------------------------------------------------------------------
+
+// One pulse of the pane's edge, in the workspace colour. ARRIVAL_MS must match the keyframes in styles.css.
+const ARRIVAL_MS = 1_000;
+let arrivalTimer = null;
+
+// The class comes off on a timer rather than on animationend, because with a reduced-motion preference there
+// is no animation to end - the stylesheet holds the highlight instead of pulsing it, and this is what makes
+// the two last the same moment.
+export function flashPane() {
+    clearTimeout(arrivalTimer);
+    // A pulse still running when the next page lands restarts rather than stacking: off, force the browser to
+    // notice, on again. Reading a layout property is what makes the restart real.
+    pane.classList.remove("arriving");
+    void pane.offsetWidth;
+    pane.classList.add("arriving");
+    arrivalTimer = setTimeout(() => pane.classList.remove("arriving"), ARRIVAL_MS);
+}
+
+// --- The divider -------------------------------------------------------------------------------------------------------------------------
+
+// Dragging sets a pixel width until it stops making sense, and below the threshold the pane becomes the
+// spine rather than a sliver. Pointer capture keeps the drag alive over the terminal and the frame alike -
+// a page is a document with its own event loop, and without capture the pointer would be lost in it.
+let dragging = false;
+// The width the pane had when the drag started. Dragging it shut is a request to put it away, not a request
+// for a 150px pane, so crossing the threshold hands its old width back rather than keeping the sliver the
+// pointer passed through on the way there.
+let widthBeforeDrag = null;
+
+grip.addEventListener("pointerdown", (event) => {
+    dragging = true;
+    widthBeforeDrag = width;
+    document.body.classList.add("dragging");
+    grip.setPointerCapture(event.pointerId);
+});
+
+grip.addEventListener("pointermove", (event) => {
+    if (!dragging) return;
+    // A drag is a width, so it is the way out of the far end as well as the way into any other width.
+    full = false;
+    const wanted = Math.max(0, window.innerWidth - event.clientX - grip.offsetWidth / 2);
+    if (wanted < COLLAPSE_AT) {
+        collapsed = true;
+        width = widthBeforeDrag;
+    } else {
+        collapsed = false;
+        width = Math.min(wanted, window.innerWidth * MAX_FRACTION);
+    }
+    // A drag is an answer too, so what it decides is what the next render starts from.
+    shut = collapsed;
+    applyGeometry(shut);
+});
+
+function endDrag() {
+    if (!dragging) return;
+    dragging = false;
+    document.body.classList.remove("dragging");
+    remember();
+    // A drag that crossed the threshold changed which of the three states the pane is in, and the tool that
+    // is open in it has a bar and a document to lay out again at the new width.
+    renderShell();
+    renderers.get(openTool)?.();
+}
+
+grip.addEventListener("pointerup", endDrag);
+grip.addEventListener("pointercancel", endDrag);
+
+// The bar is chrome: a click on it must not leave the terminal without focus for no reason.
+panebar.addEventListener("mousedown", (event) => event.preventDefault());