chamba 0.6.1 → 0.7.0

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());

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

@@ -1,58 +1,47 @@
-// pane.js - the web pane: the pages an agent published, beside the terminal it published them from.
+// pane.js - the Pages tool: the pages an agent published, beside the terminal it published them from.
 //
-// The pane is chrome this interface draws - the chips bar, the counter, the spine - around a page it does
-// not trust (pane-frame.js renders that part). Keeping the two apart is the point: a published page can
-// never fake which session and which page the user is looking at, because everything that says so is drawn
-// outside its frame.
+// One of the tools the pane holds (pane-shell.js holds them), and the whole of what this module draws is its
+// own panel - the chips bar, the counter, and the page. The pane's own furniture, the tab bar and the width,
+// is the shell's, so nothing here can move the pane or say which tool the user is looking at.
 //
-// What the pane shows belongs to the attached session, and it follows the tabs: switching sessions switches
-// the list, the selection, and the page. What the pane *is* belongs to the window - how wide it is, whether it
-// is collapsed, and how big a page is drawn in it - and that survives the switch, and a reload.
+// The chips bar is chrome this interface draws around a page it does not trust (pane-frame.js renders that
+// part). Keeping the two apart is the point: a published page can never fake which session and which page the
+// user is looking at, because everything that says so is drawn outside its frame.
+//
+// What this tool shows belongs to the attached session, and it follows the tabs: switching sessions switches
+// the list, the selection, and the page.
 //
 // A page that arrives opens itself, and says so with one pulse of the pane's edge. It never takes the
 // keyboard: the caret stays in the composer mid-sentence, which is the price of the pane opening at all.
 // "Arrives" is the server's own unread flag, not "new to this window" - the list here starts empty on every
 // reload, and a page nobody has opened in a session nobody has visited is still an arrival when they get to
 // it. A page for a session this window is not looking at touches nothing here; it marks that session's tab
-// (see tabs.js), keeps its chip badge and its place in the spine's counter, and waits.
+// (see tabs.js), keeps its chip badge and its place in the spine's counter, and waits. A page that lands
+// while the pane is open on another tool marks the Pages tab and waits there: an arrival is worth saying, and
+// never worth taking the screen for.
 //
-// The pane exists before any of that. A session that has published nothing still has its spine, and opening it
+// The tool exists before any of that. A session that has published nothing still has its tab, and opening it
 // says what the pane is for and what to ask for - a feature nobody can see is a feature nobody uses, and this
 // one is asked for in words rather than found in a menu.
 
 import { sendFrame } from "./connection.js";
-import {
-    chips,
-    grip,
-    pageBigger,
-    pagebar,
-    pageCount,
-    pageDoc,
-    pageSizeVal,
-    pageSmaller,
-    pane,
-    paneCollapse,
-    paneNext,
-    panePrev,
-    spine,
-    spineBadge,
-} from "./dom.js";
+import { chips, pageBigger, pagebar, pageCount, pageDoc, pageSizeVal, pageSmaller, paneNext, panePrev, toolPages } from "./dom.js";
 import { arrivingPage } from "./pane-arrival.js";
 import { dropPage, fetchPage, renderPage, submitFeedback } from "./pane-frame.js";
+import {
+    flashPane,
+    isPaneCollapsed,
+    isPaneShut,
+    isToolOpen,
+    noteTool,
+    PAGES,
+    registerTool,
+    rememberPageSize,
+    setPaneCollapsed,
+    storedPageSize,
+} from "./pane-shell.js";
 import { attachedSid } from "./state.js";
 
-// 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, 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";
 // The sizes a page can be shown at, smallest first, and where an untouched window starts. The spacing is
 // deliberately uneven: a correction near normal reading size wants a fine step, and someone going to 150%
 // wants to get there in two presses.
@@ -66,39 +55,13 @@ const AGE_TICK_MS = 30_000;
 // heard about, so switching back to a tab lands on the page it was left on.
 const panes = new Map();
 
-let width = null;
-// null means nobody has said. An untouched pane keeps out of the way while its session has nothing in it, and
-// is open once it has - 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;
-// Which of TEXT_SIZES the shown page is drawn at.
-let sizeStep = DEFAULT_SIZE_STEP;
-// What the last render decided, for the two things that only need to know whether the pane is showing.
-let shut = true;
-
-// --- 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;
-    // 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.
-    const step = TEXT_SIZES.indexOf(stored.size);
-    if (step !== -1) sizeStep = step;
-} catch {
-    // A disabled or full store only means the pane opens at its default width.
-}
-
-function rememberGeometry() {
-    try {
-        localStorage.setItem(GEOMETRY_KEY, JSON.stringify({ width, collapsed, size: TEXT_SIZES[sizeStep] }));
-    } catch {
-        // The pane still works for this page's lifetime.
-    }
-}
+// Which of TEXT_SIZES the shown page is drawn at. The multiplier is what the pane stores, 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.
+const storedStep = TEXT_SIZES.indexOf(storedPageSize());
+let sizeStep = storedStep === -1 ? DEFAULT_SIZE_STEP : storedStep;
 
-// --- The pane's own state ----------------------------------------------------------------------------------------------------------------
+// --- The tool's own state ----------------------------------------------------------------------------------------------------------------
 
 function paneFor(sid) {
     let entry = panes.get(sid);
@@ -122,14 +85,16 @@ export function applyPages(msg) {
     // The page this frame opens, if it opens one - the rule itself is in pane-arrival.js, where it can be run,
     // and so is what a burst of publishes does under it.
     const arrived = arrivingPage(entry.pages);
+    // It is selected either way, so the tab the user comes back to is on the page that arrived. Only the
+    // saying-so is held back while another tool has the pane.
     if (arrived !== null) {
         select(msg.sid, arrived.id, { user: false });
-        flashArrival();
+        if (isToolOpen(PAGES)) flashPane();
     }
     // A pane someone put away comes back for a page. Only for an answer they gave: the third state, nobody
     // has said, already opens the pane when its session stops being empty, and settling it here would open
     // the pane in every other empty session in this window too.
-    if (arrived !== null && collapsed === true) setCollapsed(false);
+    if (arrived !== null && isToolOpen(PAGES) && isPaneCollapsed()) setPaneCollapsed(false);
     else render();
 }
 
@@ -141,7 +106,7 @@ export function prunePanes(live) {
 }
 
 /**
- * Draw the pane for whatever session this window is now on, asking for its pages when this window has never
+ * Draw the tool for whatever session this window is now on, asking for its pages when this window has never
  * been told them. The server pushes the list when a window lands on a session, so this covers the frame that
  * did not arrive - a socket replaced mid-attach, or a window that took a session over from another one.
  */
@@ -257,25 +222,16 @@ function chipFor(sid, page, selected) {
     return chip;
 }
 
-// How wide, and collapsed or not. 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);
-    // The width goes into a custom property rather than straight onto `width`, so the stylesheet keeps the
-    // last word: the collapsed spine and the narrow-screen layout are rules, and an inline width would beat
-    // both of them.
-    pane.style.setProperty("--pane-width", width === null ? `${DEFAULT_FRACTION * 100}%` : `${width}px`);
-}
-
 // --- How big a page is drawn -------------------------------------------------------------------------------------------------------------
 
-// The size is a property on the pane, and the stylesheet zooms the frame from it. Two reasons, both structural:
-// the frame's document has an opaque origin and the shell cannot reach into it, and renderPage() throws the
-// iframe away and builds a fresh one on every chip click, so anything set on the frame itself would have to be
-// put back on every one of those paths. Setting it out here costs nothing and cannot be missed.
+// The size is a property on this tool's panel, and the stylesheet zooms the frame from it. Two reasons, both
+// structural: the frame's document has an opaque origin and the shell cannot reach into it, and renderPage()
+// throws the iframe away and builds a fresh one on every chip click, so anything set on the frame itself
+// would have to be put back on every one of those paths. Setting it out here costs nothing and cannot be
+// missed.
 function applyTextSize() {
     const size = TEXT_SIZES[sizeStep];
-    pane.style.setProperty("--page-zoom", String(size));
+    toolPages.style.setProperty("--page-zoom", String(size));
     pageSizeVal.textContent = `${Math.round(size * 100)}%`;
     // A control that can do nothing says so, rather than swallowing the press.
     pageSmaller.disabled = sizeStep === 0;
@@ -287,49 +243,25 @@ function stepTextSize(by) {
     if (next === sizeStep) return;
     sizeStep = next;
     applyTextSize();
-    rememberGeometry();
+    rememberPageSize(TEXT_SIZES[sizeStep]);
 }
 
 pageSmaller.addEventListener("click", () => stepTextSize(-1));
 pageBigger.addEventListener("click", () => stepTextSize(1));
 applyTextSize();
 
-// --- Saying that a page 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.
-function flashArrival() {
-    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);
-}
-
 function render() {
     const sid = attachedSid;
     const entry = sid === null ? null : (panes.get(sid) ?? null);
     const pages = entry?.pages ?? [];
     const unread = pages.filter((page) => page.unread).length;
 
-    // Nothing published in this session, and nothing to say about it. The pane stays - as the spine, until
-    // someone opens it - because a pane that only appears once an agent has used it is one nobody knows to
-    // ask for. The grip is the part that goes: there is no width worth choosing for a page that does not exist.
+    // Nothing published in this session, and nothing to say about it. The tab stays - and the pane stays as
+    // the spine, until someone opens it - because a pane that only appears once an agent has used it is one
+    // nobody knows to ask for. Saying so is the shell's business: the tab's mark, and whether an untouched
+    // pane keeps out of the way, are the pane's decisions to take from what its open tool has.
     const bare = pages.length === 0 && !entry?.notice;
-    shut = collapsed === null ? bare : collapsed;
-    pane.hidden = false;
-    grip.hidden = bare && shut;
-
-    applyGeometry(shut);
-    spineBadge.textContent = unread > 0 ? String(unread) : "";
-    spineBadge.hidden = unread === 0;
+    noteTool(PAGES, { unread, empty: bare });
 
     chips.replaceChildren(...pages.map((page) => chipFor(sid, page, page.id === entry?.selected)));
     const at = pages.findIndex((page) => page.id === entry?.selected);
@@ -364,75 +296,18 @@ function render() {
     chips.querySelector(".chip.sel")?.scrollIntoView({ block: "nearest", inline: "nearest" });
 }
 
+// The tool draws itself whenever the pane asks - a tab click, a width that changed, a session switch.
+registerTool(PAGES, render);
+
 setInterval(() => {
-    if (!shut) render();
+    if (!isPaneShut() && isToolOpen(PAGES)) render();
 }, AGE_TICK_MS);
 
-// --- The divider, and the spine ----------------------------------------------------------------------------------------------------------
-
-// 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;
-    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");
-    rememberGeometry();
-}
-
-grip.addEventListener("pointerup", endDrag);
-grip.addEventListener("pointercancel", endDrag);
-
-// 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.
-function setCollapsed(next) {
-    collapsed = next;
-    shut = next;
-    // 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.
-    if (!collapsed) {
-        const floor = Math.min(window.innerWidth * MIN_OPEN_FRACTION, window.innerWidth * MAX_FRACTION);
-        if (width !== null && width < floor) width = floor;
-    }
-    rememberGeometry();
-    render();
-}
-
-paneCollapse.addEventListener("click", () => setCollapsed(true));
-spine.addEventListener("click", () => setCollapsed(false));
-
-// The chips bar scrolls by roughly a bar's worth, which is what the arrows in the mock do.
-panePrev.addEventListener("click", () => chips.scrollBy({ left: -chips.clientWidth * 0.8, behavior: "smooth" }));
-paneNext.addEventListener("click", () => chips.scrollBy({ left: chips.clientWidth * 0.8, behavior: "smooth" }));
 // A bar that fits at one width may not at another, and the arrows only exist when it does not.
 window.addEventListener("resize", render);
+// The bar hides its scrollbar, so these are the only way to reach a chip that scrolled out of it. A little
+// under a full bar each time, so the chip at the edge stays on the screen and says where the bar now is.
+panePrev.addEventListener("click", () => chips.scrollBy({ left: -chips.clientWidth * 0.8, behavior: "smooth" }));
+paneNext.addEventListener("click", () => chips.scrollBy({ left: chips.clientWidth * 0.8, behavior: "smooth" }));
 // The pagebar is chrome: a click on it must not leave the terminal without focus for no reason.
 pagebar.addEventListener("mousedown", (event) => event.preventDefault());