chamba 0.8.0 → 0.9.0

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

@@ -9,6 +9,7 @@ import { sessions, workspaceName } from "./state.js";
 import { arrivedAt, renderBar } from "./tabs.js";
 import { focusTerminal } from "./terminal.js";
 import { workspaceColor } from "./theme.js";
+import { toolsHearSound } from "./tool-host.js";
 
 // --- The browser's own tab ---------------------------------------------------------------------------------------------------------------
 //
@@ -20,6 +21,12 @@ import { workspaceColor } from "./theme.js";
 //   nothing                       - nothing is happening in here
 //   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
+//   grey all through, and still   - this window cannot reach its container, so it says nothing else at all
+//
+// The grey one is the odd member of the four, because it is about this window rather than about the container.
+// Every other mark stands on the last sessions frame the server sent, and while the socket is down that frame
+// only gets older - so a green dot calls you back to a session this window can no longer see. Draining the
+// icon says the one thing that is still true, and the title and the chime below are held to the same rule.
 //
 // One mark at a time, and the two are told apart by where they sit before any colour is read: working owns the
 // bottom edge, waiting owns the top-right corner. That was the lesson of the first version, where both were a
@@ -50,10 +57,27 @@ const PULSE_TICKS = 3;
 const SWEEP_TICKS = 16;
 const DONE_COLOR = "#2fe58a";
 const BUSY_COLOR = "#e6edf3";
+// The offline pair: the interface's own muted text grey for the spark, and its border grey for the frame. Flat,
+// with no gradient - at 16px a gradient between two greys says nothing. Anything fainter than this reads as a
+// broken tab rather than an offline one, which is a different thing to tell someone.
+const OFFLINE_SPARK = "#8b949e";
+const OFFLINE_FRAME = "#30363d";
+// How long the socket has to stay down before the icon says so. Most disconnects are a sleeping laptop or a wifi
+// blip and are over inside this, so the icon holds still rather than flickering grey and back. The curtain waits
+// the same three seconds, and the two waits cannot be shared: the curtain's is measured from the end of a /status
+// request that has three seconds of its own, and it is skipped entirely for a window that has stopped trying.
+// It is not only the icon's: the chime below reads the same flag, so lengthening this leaves a window sounding
+// for a container it cannot reach for that much longer.
+const OFFLINE_GRACE_MS = 3_000;
 
 let iconCanvas = null;
 let iconTimer = null;
 let iconFrame = 0;
+// Whether this window has given up on reaching its container, and the grace that is counting towards it. A
+// slower thing than the `offline` class on the body, which goes on at the first close: that one stops the page
+// taking clicks it cannot answer, and this one waits to see whether there is anything worth saying.
+let offline = false;
+let offlineTimer = null;
 
 // What the dot should say right now, or null for no dot. Read fresh on every paint rather than passed in, so a
 // paint from anywhere - an incoming bar, or the pulse - draws what is true now.
@@ -85,7 +109,10 @@ function paintFavicon() {
     iconCanvas.height = ICON_SIZE;
     const ctx = iconCanvas.getContext("2d");
     if (!ctx) return;
-    const badgeColor = dotColor();
+    // No mark at all while the window cannot reach its container, whatever the last frame said was happening:
+    // both marks stand on state nothing is coming to correct, so the grey is the whole message and the two ways
+    // of arriving at it - going offline while an agent works, and going offline while one waits - are one icon.
+    const badgeColor = offline ? null : dotColor();
     // Only one mark is ever drawn, so both phases can be handed over and the drawing picks the one it needs.
     try {
         drawIcon(ctx, badgeColor, badgeColor === DONE_COLOR && pulseDim(), sweepAt());
@@ -106,7 +133,9 @@ function drawIcon(ctx, badgeColor, dim, sweep) {
     ctx.beginPath();
     ctx.roundRect(0, 0, 32, 32, 7);
     ctx.fill();
-    ctx.strokeStyle = workspaceColor();
+    // Offline drains the frame with everything else: the workspace hue is the liveliest thing in the icon, and
+    // one grey shape says more than a grey spark inside a bright ring.
+    ctx.strokeStyle = offline ? OFFLINE_FRAME : workspaceColor();
     ctx.lineWidth = 2;
     ctx.beginPath();
     ctx.roundRect(1, 1, 30, 30, 6);
@@ -115,9 +144,14 @@ function drawIcon(ctx, badgeColor, dim, sweep) {
     // The spark: four points with a waist, stroked as well as filled so it nearly fills the icon and still
     // reads at 16px. Same geometry and gradient as favicon.svg, which is what a browser without canvas still
     // gets - the two are one drawing in two languages, so a change to either is a change to both.
-    const spark = ctx.createLinearGradient(0, 0, 0, 32);
-    spark.addColorStop(0, "#f0c078");
-    spark.addColorStop(1, "#d08a3c");
+    let spark;
+    if (offline) {
+        spark = OFFLINE_SPARK;
+    } else {
+        spark = ctx.createLinearGradient(0, 0, 0, 32);
+        spark.addColorStop(0, "#f0c078");
+        spark.addColorStop(1, "#d08a3c");
+    }
     ctx.fillStyle = spark;
     ctx.strokeStyle = spark;
     ctx.lineWidth = 2;
@@ -194,7 +228,9 @@ function tickIcon() {
 export function refreshBrowserTab() {
     // Just the workspace, no product name: a tab strip gives you a few characters, and the icon already says
     // this is chamba. What the title is for is which workspace, and how many sessions want you.
-    const waiting = sessions.filter((entry) => entry.attention);
+    // The count goes with the icon's marks while the socket is down, and for the same reason. The title says the
+    // workspace and stops there: being offline is the icon's to say, and a tab strip cannot say it twice.
+    const waiting = offline ? [] : sessions.filter((entry) => entry.attention);
     const name = workspaceName || "chamba";
     document.title = waiting.length > 0 ? `(${waiting.length}) ${name}` : name;
 
@@ -202,7 +238,9 @@ export function refreshBrowserTab() {
     // what the sessions are doing: an alert arriving next to one already up is the same state, and restarting the
     // cycle on every frame the server sends would make the mark stutter.
     paintFavicon();
-    if (!dotColor()) {
+    // The grey icon is one still frame: nothing in it moves, so nothing has to be redrawn, and a window sitting
+    // offline for a day costs exactly one paint.
+    if (offline || !dotColor()) {
         if (iconTimer) clearTimeout(iconTimer);
         iconTimer = null;
         iconFrame = 0;
@@ -211,6 +249,42 @@ export function refreshBrowserTab() {
     if (!iconTimer) iconTimer = setTimeout(tickIcon, ICON_TICK_MS);
 }
 
+// The socket went. The only thing the connection has to say, and everything that follows from it - the grace, the
+// flag, the title, the paint and the chime - is this module's, because all five are the same subject as the three
+// states above.
+//
+// Counted from the first close and not restarted by the ones after it, which is the whole difference between
+// three seconds and however long the reconnect loop takes to give up: every failed attempt closes a socket of its
+// own, and each of those closes arrives here. The curtain's own wait is guarded the same way, for the same
+// reason, and a tab that greys later than the curtain it sits above is a tab still showing a live green dot over
+// a page that has already said the container cannot be reached.
+export function socketWentDown() {
+    if (offline || offlineTimer) return;
+    offlineTimer = setTimeout(() => {
+        offlineTimer = null;
+        offline = true;
+        refreshBrowserTab();
+    }, OFFLINE_GRACE_MS);
+}
+
+// And came back.
+export function socketCameBack() {
+    if (offlineTimer) {
+        clearTimeout(offlineTimer);
+        offlineTimer = null;
+    }
+    if (!offline) return;
+    // Spend whatever came due while the tab was grey, before the flag drops. An alert still standing and already
+    // due at this moment can only have come due during the disconnect, because nothing else was left running to
+    // catch it: the chime arms one timer for the soonest alert alone, and the icon's clock, which is what catches
+    // the rest, is stopped while the icon is grey. Without this, the first tick after a reconnect would find one
+    // of those alerts unspent and sound it - a chime for a finish that happened while this window was away.
+    maybeChime();
+    // Then straight back to whatever the sessions say, without waiting for the first frame of the new socket.
+    offline = false;
+    refreshBrowserTab();
+}
+
 // --- A sound, for the session you are not at ---------------------------------------------------------------------------------------------
 //
 // The fourth thing the "an agent finished" alert does, and the only one that reaches a window behind an editor.
@@ -262,6 +336,9 @@ const CHIME_VOLUME = 0.35;
 // reload and covers every window of the same container without touching any other workspace. On by default: a
 // notification nobody discovers is not a notification, and the bell is right there to turn off.
 let soundOn = readSoundPref();
+// Every pane tool that makes a sound of its own reads this window's one preference, so it is said once here at
+// start and again on every toggle.
+toolsHearSound(soundOn);
 
 function readSoundPref() {
     try {
@@ -389,7 +466,10 @@ function maybeChime() {
     // Spent whether or not it is heard, so a muted window does not save up its chimes for whenever the bell is
     // unmuted - nothing new would have happened by then.
     for (const entry of due) chimed.add(entry.id);
-    if (!soundOn) return;
+    // A window that cannot reach its container is the second case of exactly that: calling you back to a session
+    // it can no longer see is worse than saying nothing, and a sound held for the reconnect would be reporting a
+    // state that has had a whole disconnect to move on.
+    if (offline || !soundOn) return;
     const now = Date.now();
     if (now - lastChimeAt < CHIME_GAP_MS) return;
     if (!claimChime()) return;
@@ -424,9 +504,9 @@ export function bellButton() {
     button.type = "button";
     button.classList.toggle("muted", !soundOn);
     button.title = soundOn
-        ? "Sound on - a chime when an agent finishes in a session you have not touched in a while. Click to mute."
-        : "Sound muted - click for a chime when an agent finishes in a session you have not touched in a while.";
-    button.setAttribute("aria-label", soundOn ? "Mute the finish sound" : "Unmute the finish sound");
+        ? "Sound on - a chime when an agent finishes in a session you have not touched in a while, and the bee on the Home tab. Click to mute."
+        : "Sound muted - click for a chime when an agent finishes in a session you have not touched in a while, and for the bee on the Home tab.";
+    button.setAttribute("aria-label", soundOn ? "Mute the interface" : "Unmute the interface");
     button.setAttribute("aria-pressed", String(soundOn));
     const svg = document.createElementNS(SVG_NS, "svg");
     svg.setAttribute("viewBox", "0 0 24 24");
@@ -464,6 +544,7 @@ function toggleSound() {
         // Not remembered past this page, but the toggle still works for as long as it is open.
     }
     renderBar();
+    toolsHearSound(soundOn);
     // The click landed on a button, which took the keyboard off the terminal.
     focusTerminal();
     // Turning it on plays it once, so the first time it happens behind your editor it is a sound you have already

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

@@ -43,15 +43,49 @@ export function refreshComposer() {
     else input.placeholder = "Pick a session above to type in it.";
 }
 
+// The box the text is measured in: a second textarea, hidden and of no height, styled as the composer is.
+// The composer sits under the pane in one column, so a height it takes for one layout pass is a height the
+// tool frames lose for that pass, and a frame in its own process paints at that size before the pass is
+// corrected. Measuring here leaves the composer's height alone until the text needs another line.
+let mirror = null;
+function mirrorOf() {
+    if (mirror !== null) return mirror;
+    mirror = document.createElement("textarea");
+    mirror.id = "input-mirror";
+    mirror.tabIndex = -1;
+    mirror.setAttribute("aria-hidden", "true");
+    mirror.readOnly = true;
+    input.parentElement.appendChild(mirror);
+    return mirror;
+}
+
 export function autoGrow() {
-    input.style.height = "auto";
+    const box = getComputedStyle(input);
+    const ruler = mirrorOf();
+    // What decides where the text wraps and how tall a line is, copied from the composer as it stands now.
+    for (const name of [
+        "font",
+        "letterSpacing",
+        "lineHeight",
+        "padding",
+        "border",
+        "boxSizing",
+        "whiteSpace",
+        "wordBreak",
+        "overflowWrap",
+        "tabSize",
+    ]) {
+        ruler.style[name] = box[name];
+    }
+    ruler.style.width = `${input.clientWidth + Number.parseFloat(box.borderLeftWidth) + Number.parseFloat(box.borderRightWidth)}px`;
+    ruler.value = input.value;
     // 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);
     const floor = Number.parseFloat(box.minHeight) || 0;
     const ceiling = Number.parseFloat(box.maxHeight) || Number.POSITIVE_INFINITY;
-    input.style.height = `${Math.min(Math.max(input.scrollHeight, floor), ceiling)}px`;
+    const wanted = `${Math.min(Math.max(ruler.scrollHeight, floor), ceiling)}px`;
+    if (input.style.height !== wanted) input.style.height = wanted;
 }
 input.addEventListener("input", () => {
     autoGrow();

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

@@ -4,6 +4,7 @@
 // the curtain is the one state that says "this window cannot do anything at all". They live together because
 // they are the same subject read from two ends: what the socket is doing, and what the user is told about it.
 
+import { socketCameBack, socketWentDown } from "./alerts.js";
 import { refreshComposer } from "./composer.js";
 import { curtain, curtainCard } from "./dom.js";
 import { onFrame } from "./frames.js";
@@ -197,6 +198,12 @@ export function noteSocketAlive() {
 // being abandoned must not schedule a second reconnect or overwrite the new one's state.
 function dropSocket() {
     if (!ws) return;
+    // The one close nobody else hears about. A socket retired while the page still believes it is up is the wake
+    // case: after a sleep the socket reads OPEN for minutes with nothing on the other end, the ping gets no
+    // answer, and this replaces it - with the handlers nulled, so no onclose ever fires for it. The browser tab
+    // is told here instead, because a tab left wearing a green dot for a container it cannot reach is exactly
+    // what this state is. Its own grace covers the ordinary case, where the replacement opens a moment later.
+    if (connected) socketWentDown();
     ws.onopen = null;
     ws.onmessage = null;
     ws.onclose = null;
@@ -225,6 +232,9 @@ export function connect() {
         clearCurtainTimer();
         hideCurtain();
         document.body.classList.remove("offline");
+        // The browser tab reads the socket too, and it keeps a grace of its own. Told that the socket moved and
+        // nothing more: what the tab does about it belongs to the tab.
+        socketCameBack();
         // Ask for the session this window was last looking at. The server decides whether it can have
         // it back, and picks something sensible when it cannot.
         // The last session this window drove: the server hands it back when no other window is on it.
@@ -249,6 +259,10 @@ export function connect() {
         // Immediately, ahead of any curtain: every control on the page is answered over this socket, so
         // while it is down they must stop taking clicks.
         document.body.classList.add("offline");
+        // And the browser tab, which is the only thing a hidden window can say any of this with. Said on every
+        // close, whichever curtain the diagnosis ends at: one rule covers a container that is down, a spent key,
+        // a container being stopped and a container that has gone.
+        socketWentDown();
         // An anchored panel hangs off the body, so the bar's own offline rules do not reach it - and no frame
         // is coming to redraw the bar, which leaves the age tick up to a minute away. Both are shut here.
         closeNewPop();

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

@@ -28,6 +28,7 @@ export const paneHalf = document.getElementById("pane-half");
 export const paneCollapse = document.getElementById("pane-collapse");
 export const spine = document.getElementById("spine");
 export const spineBadge = document.getElementById("spine-badge");
+export const toolHome = document.getElementById("tool-home");
 export const toolPages = document.getElementById("tool-pages");
 export const toolSpecs = document.getElementById("tool-specs");
 export const toolReviews = document.getElementById("tool-reviews");

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

@@ -169,7 +169,7 @@ function applySessions(msg) {
     pruneHistory();
     refreshComposer();
     // Same for the pane: a session that left the bar takes this window's copy of its page list with it. The
-    // files themselves are untouched - a resumed conversation gets them back (FR-15).
+    // files themselves are untouched - a resumed conversation gets them back.
     const live = new Set(sessions.map((entry) => entry.id));
     prunePanes(live);
     // And for the pane itself: the shape a session was left in ends with that session, the way its draft does.

package/templates/webterm/public/app/home-host.js

@@ -0,0 +1,16 @@
+// home-host.js - the Home tool on the page.
+//
+// The host around a tool's frame is `tool-host.js`, where every tool's is. What is here is which tool this
+// is: its name, which is what its routes and its messages are named after, the panel the pane gave it, and
+// the sentence its tab shows while it is opening.
+
+import { toolHome } from "./dom.js";
+import { HOME } from "./pane-shell.js";
+import { createToolHost } from "./tool-host.js";
+
+createToolHost({
+    id: HOME,
+    label: "Home",
+    panel: toolHome,
+    opening: "Reading the pulse of this repository.",
+});

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

@@ -35,8 +35,9 @@
 //   pane-shape.js   the shape a pane has beside one session, and the store that keeps one for each
 //   pane.js         the Pages tool: the chips bar and the page
 //   tool-host.js    a tool's frame, and the credentials the shell hands into it
-//   specs-host.js   the Specs tool: which tool it is, and its panel
-//   reviews-host.js the Code Reviews tool, the same way
+//   home-host.js    the Home tool: which tool it is, and its panel
+//   specs-host.js   the Specs tool, the same way
+//   reviews-host.js the Code Reviews tool, the same way again
 //   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
@@ -72,6 +73,7 @@ import "./dom.js";
 import "./palette.js";
 import "./drafts.js";
 import "./frames.js";
+import "./home-host.js";
 import "./new-session.js";
 import "./note.js";
 import "./pane.js";

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

@@ -15,12 +15,14 @@ export const PANE_KEY = "webterm-pane";
 
 // The tools there are to open, which a shape holds one of. Their ids and nothing else about them: what a tool
 // is made of is the pane's business, and all this module asks is whether a stored id is one of them.
+export const HOME = "home";
 export const PAGES = "pages";
 export const SPECS = "specs";
 export const REVIEWS = "reviews";
-const SHAPE_TOOLS = [PAGES, SPECS, REVIEWS];
-// The tool a session opens on.
-const DEFAULT_TOOL = PAGES;
+const SHAPE_TOOLS = [HOME, PAGES, SPECS, REVIEWS];
+// The tool a session opens on. Home, because it is the reading of the repository a session starts in, and
+// because a stored shape naming another tool keeps that tool: this is what a session with no shape gets.
+const DEFAULT_TOOL = HOME;
 
 // 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.

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

@@ -1,7 +1,7 @@
 // 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 Code Reviews
-// (reviews-host.js) - and the line between them is the whole point of this module: a tool draws inside its
+// The pane is furniture. What sits in it are tools - Home (home-host.js), Specs (specs-host.js), Code Reviews
+// (reviews-host.js) and Pages (pane.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.
@@ -31,6 +31,7 @@ import {
     paneHalf,
     spine,
     spineBadge,
+    toolHome,
     toolPages,
     toolReviews,
     toolSpecs,
@@ -40,6 +41,7 @@ import {
     DEFAULT_FRACTION,
     defaultShape,
     draggedTo,
+    HOME,
     isDefaultWidth,
     mergeShape,
     PAGES,
@@ -52,14 +54,17 @@ import {
 
 // The tools' ids come from the shape, which holds one of them. Re-exported here because this module is the
 // pane, and a tool that asks whether it is open is asking the pane rather than the store.
-export { PAGES, REVIEWS, SPECS };
+export { HOME, PAGES, REVIEWS, SPECS };
 
 // 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.
 const TOOLS = [
-    { id: PAGES, label: "Pages", panel: toolPages },
+    { id: HOME, label: "Home", panel: toolHome },
     { id: SPECS, label: "Specs", panel: toolSpecs },
-    { id: REVIEWS, label: "Code Reviews", panel: toolReviews },
+    // "Reviews" on the tab and Code Reviews everywhere else: four tabs have to be readable at the width the
+    // pane reopens at, and the tab is the one place the tool's whole name does not fit.
+    { id: REVIEWS, label: "Reviews", panel: toolReviews },
+    { id: PAGES, label: "Pages", panel: toolPages },
 ];
 
 // The one shape this window is drawing, and the session it belongs to. One and not a map of them: the store
@@ -213,6 +218,14 @@ function drawTabs() {
             badge.className = mark.counted ? "tool-mark" : "tool-mark dot";
             if (mark.counted) badge.textContent = String(mark.unread);
             else badge.setAttribute("aria-label", "something new");
+            // The ring, for a tool something landed in a moment ago. This element is new on every redraw, so
+            // the ring would start from the beginning each time; a negative delay of what has already run
+            // puts it back where it was.
+            const ring = pulsing.get(tool.id);
+            if (ring) {
+                badge.classList.add("pulse");
+                badge.style.setProperty("--ring-delay", `-${Date.now() - ring.at}ms`);
+            }
             button.append(badge);
         }
         button.addEventListener("click", () => showTool(tool.id));
@@ -337,6 +350,33 @@ export function flashPane() {
     arrivalTimer = setTimeout(() => pane.classList.remove("arriving"), ARRIVAL_MS);
 }
 
+// Three turns of the ring in styles.css, which runs for 1.6s each. The two numbers have to agree: the
+// keyframes are there and what takes the ring off again is here.
+const TAB_PULSE_MS = 4_800;
+
+// id -> when that tool's ring started, and the timer that ends it. A tab is rebuilt on every redraw, so the
+// ring cannot be left on the element the way the pane's own flash is - what holds it is this map.
+const pulsing = new Map();
+
+/**
+ * Something landed in a tool the user is not looking at, so its tab draws a ring around its mark for three
+ * turns and then rests.
+ *
+ * A second arrival during those three turns starts them again, which is what the mark means: the tab says
+ * that something arrived just now, and the number beside it says how much is waiting.
+ */
+export function pulseTool(id) {
+    clearTimeout(pulsing.get(id)?.timer);
+    pulsing.set(id, {
+        at: Date.now(),
+        timer: setTimeout(() => {
+            pulsing.delete(id);
+            renderShell();
+        }, TAB_PULSE_MS),
+    });
+    renderShell();
+}
+
 // --- The divider -------------------------------------------------------------------------------------------------------------------------
 
 // Dragging sets a pixel width until it stops making sense, and below the threshold the pane becomes the

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

@@ -34,6 +34,7 @@ import {
     isToolOpen,
     noteTool,
     PAGES,
+    pulseTool,
     registerTool,
     rememberPageSize,
     setPaneCollapsed,
@@ -91,7 +92,10 @@ export function applyPages(msg) {
     // saying-so is held back while another tool has the pane.
     if (arrived !== null) {
         select(msg.sid, arrived.id, { user: false });
+        // The pane switches tools for nobody. With Pages open the pane's own edge says the page is here;
+        // with another tool open the Pages tab says it, and the tool the user is working in is left alone.
         if (isToolOpen(PAGES)) flashPane();
+        else pulseTool(PAGES);
     }
     // A pane someone put away comes back for a page, in the session the page was published in - which is
     // the session this frame is about, since the list only reaches the tool for the one it is driving.
@@ -264,8 +268,10 @@ function render() {
     // because a pane that only appears once an agent has used it is one nobody knows to ask for. What the
     // empty pane says is the tool's own intro; the tab's mark is the shell's, from what the tool says here.
     const bare = pages.length === 0 && !entry?.notice;
-    // A page that arrived is a thing to look at, not a thing to answer, so the tab says so without a number.
-    noteTool(PAGES, { unread, empty: bare, counted: false });
+    // How many pages nobody has opened, the way Specs counts its open asks. Three waiting is a different day
+    // from one, and the pages already read are not a number anyone acts on, so the tab counts the unopened
+    // ones alone and never the whole list.
+    noteTool(PAGES, { unread, empty: bare, counted: true });
 
     chips.replaceChildren(...pages.map((page) => chipFor(sid, page, page.id === entry?.selected)));
     const at = pages.findIndex((page) => page.id === entry?.selected);

package/templates/webterm/public/app/reviews-host.js

@@ -2,6 +2,10 @@
 //
 // As the Specs host beside it: the tool's own name, its panel and its opening sentence, and the frame around
 // them is `tool-host.js`.
+//
+// "Reviews" and not "Code Reviews", because this word is what the user reads on the tab and in the panel
+// while the tool opens, and four tabs have to fit at the width the pane reopens at. The tool's own name is
+// Code Reviews everywhere else, the server table included, so every refusal still names it in full.
 
 import { toolReviews } from "./dom.js";
 import { REVIEWS } from "./pane-shell.js";
@@ -9,7 +13,7 @@ import { createToolHost } from "./tool-host.js";
 
 createToolHost({
     id: REVIEWS,
-    label: "Code Reviews",
+    label: "Reviews",
     panel: toolReviews,
     opening: "Opening the reviews in this repository.",
 });

package/templates/webterm/public/app/tool-host.js

@@ -47,6 +47,17 @@ export function toolsMovedToSession() {
     for (const host of hosts.values()) host.session();
 }
 
+// Whether the bell in the bar is on. It rides in the session message, so a tool that makes a sound obeys the one
+// control this window has rather than a mute of its own. Held here rather than read out of `alerts.js`, so the flow
+// is one way: the bell says it moved, and every frame hears it in the message it already reads.
+let toolSound = true;
+
+/** The bell moved. Every frame hears the new preference in its next session message, which is sent now. */
+export function toolsHearSound(on) {
+    toolSound = on;
+    toolsMovedToSession();
+}
+
 /**
  * Put one tool on the page.
  *
@@ -174,17 +185,22 @@ export function createToolHost({ id, label, panel, opening }) {
     }
 
     /**
-     * Tell one frame which session this window is driving, and how that session reads. `null` says there is none.
+     * Tell one frame which session this window is driving, how that session reads, and whether this window
+     * makes a sound. `null` says there is no session.
      *
      * The theme rides with the session because it belongs to it: the frame has an opaque origin and no storage
-     * of its own, so what it was set to last is the pane's to keep and the pane's to hand back.
+     * of its own, so what it was set to last is the pane's to keep and the pane's to hand back. The sound
+     * preference rides in the same message because it reaches a frame the same way and moves the same way.
      */
     function sendSession(target) {
         const sid = attachedSid ?? null;
         // Both fields say the same session or neither does: the pane is drawn in the session it opened with
         // before the first frame names one, and handing the frame that session's palette beside "there is no
         // session" would have it read in a theme it was never told the reason for.
-        target?.contentWindow?.postMessage({ t: named(SESSION), sid, theme: sid === null ? null : storedPaneTheme() }, "*");
+        target?.contentWindow?.postMessage(
+            { t: named(SESSION), sid, theme: sid === null ? null : storedPaneTheme(), sound: toolSound },
+            "*",
+        );
     }
 
     /**

package/templates/webterm/public/app/workspace-color.js

@@ -75,7 +75,7 @@ function cell(id, hex, label, stored) {
     button.addEventListener("click", () => {
         panel.close();
         // Sent, never held: the server decides, and every window is told on the frame that comes back. A pick
-        // kept to send later would be undone by the next sessions frame anyway (FR-17).
+        // kept to send later would be undone by the next sessions frame anyway.
         sendFrame({ t: "color", color: id });
     });
     return button;

package/templates/webterm/public/index.html

@@ -65,9 +65,13 @@
                 </span>
             </div>
 
+            <!-- Home: the pulse of the repository this workspace holds, in a frame of its own. The tool a
+                 session with no stored shape opens on, so it is the one panel without `hidden`. -->
+            <div id="tool-home" class="tool-panel"></div>
+
             <!-- Pages: the pages this session's agent published, with the chips bar and the counter drawn out
                  here by the interface, and the page itself inside a sandboxed frame. -->
-            <div id="tool-pages" class="tool-panel">
+            <div id="tool-pages" class="tool-panel" hidden>
                 <div id="pagebar">
                     <button type="button" id="pane-prev" class="pane-nav" title="Older pages" aria-label="Older pages" hidden>&#8249;</button>
                     <div id="chips"></div>

package/templates/webterm/public/styles.css

@@ -760,6 +760,44 @@ body.dragging {
     font-weight: 700;
 }
 
+/* Something landed in a tool the user is not looking at: a ring around its mark, three times, then rest.
+   TAB_PULSE_MS in app/pane-shell.js must match three turns of this - it is what takes the class off again,
+   since a tab, unlike the pane, is rebuilt from one frame to the next. The delay is how far a rebuilt tab is
+   already into the ring, so a redraw in the middle of a pulse resumes it. */
+.tool-mark.pulse {
+    position: relative;
+}
+
+.tool-mark.pulse::after {
+    content: "";
+    position: absolute;
+    inset: -4px;
+    border: 2px solid var(--accent);
+    border-radius: 12px;
+    animation: toolMarkRing 1.6s ease-out 3;
+    animation-delay: var(--ring-delay, 0s);
+}
+
+@keyframes toolMarkRing {
+    from {
+        opacity: 0.9;
+        transform: scale(0.8);
+    }
+    to {
+        opacity: 0;
+        transform: scale(1.5);
+    }
+}
+
+/* The same moment, held instead of pulsed, the way the pane's own arrival highlight is. Without this the
+   ring would never appear at all for someone who asked for less movement. */
+@media (prefers-reduced-motion: reduce) {
+    .tool-mark.pulse::after {
+        opacity: 0.9;
+        animation: none;
+    }
+}
+
 /* A tool that counts nothing says only that something arrived, so its mark carries no number and is drawn
    as the dot it means. */
 .tool-mark.dot {
@@ -1493,6 +1531,20 @@ body.offline #wscolorpop {
 /* Border carries the state (no separate status dot): lit in the workspace's colour when you can type into the
    attached session, plain grey while this window is between sessions or reconnecting. A dropped connection is
    not a failure here - the session on the other side kept running - so it goes quiet rather than warning. */
+/* The ruler autoGrow() measures the text in: out of the flow, out of sight, and of no height of its own, so
+   its scroll height is the height of the text and nothing about it moves the composer. */
+#input-mirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 0;
+    min-height: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+    resize: none;
+}
+
 #input.online {
     border-color: var(--ws);
     box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws) 25%, transparent);