chamba 0.5.1 → 0.6.0

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

@@ -0,0 +1,36 @@
+// pane-arrival.js - which page an incoming list opens by itself, if any.
+//
+// One question, kept apart from everything that draws so it can be run and checked where there is no browser -
+// the same reason strip-format.js is its own file. It is the rule the whole of the pane's arrival behaviour
+// rests on, and the one place where getting it subtly wrong shows up as the window walking through a session's
+// pages rather than as anything that looks like an error.
+
+/**
+ * The page a pages frame should open, or null when the pane should leave what it is showing alone.
+ *
+ * The list is oldest first, so this is the last one - and only while it is unread, which is the server's own
+ * answer to "did this arrive since we last looked". Two things follow from testing the newest page rather than
+ * any unread one, and both are the point:
+ *
+ * - Opening a page marks it read, which produces another pages frame. Under "any unread page" that frame
+ *   answers with the page below the one just opened, and the window walks backwards through everything waiting
+ *   until it comes to rest on the oldest. Under this rule the newest is read by then, so it stops.
+ * - A session with pages waiting in it - published while the user was on another tab - opens the newest when
+ *   they arrive, and the rest keep their badges instead of being torn through and marked read unseen.
+ *
+ * A burst is the other case, and it is not this one: three publishes a moment apart are three frames, each
+ * carrying one more page, so the pages open in turn and the last of them is what stays on the screen. The ones
+ * before it are usually opened in passing - which is what marks a page read - and lose their badges without
+ * having been looked at, though one that lands while the page before it is still being fetched is skipped and
+ * keeps its badge. That is the cost of opening a page the instant it lands, and it was taken deliberately:
+ * waiting to see whether another follows would put a delay in front of every page, and let a timer overrule a
+ * chip the user clicked in the meantime.
+ *
+ * One thing this narrows, deliberately: a file copied into the pane directory by hand, numbered below the
+ * newest page, is unread but not last, so it badges its chip and waits to be clicked like any page did before
+ * this. Publishing always numbers last, so nothing an agent does lands there.
+ */
+export function arrivingPage(pages) {
+    const newest = pages[pages.length - 1] ?? null;
+    return newest?.unread === true ? newest : null;
+}

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

@@ -6,19 +6,38 @@
 // outside its frame.
 //
 // 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, and
-// whether it is collapsed - and that survives the switch, and a reload.
+// 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.
 //
-// A page that arrives never steals the pane. It badges its chip (and ticks the spine's counter when the pane
-// is collapsed) and waits to be clicked. The one exception is a pane with nothing in it: the first page of a
-// session opens on arrival, because there is nothing to interrupt.
+// 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.
 //
 // The pane exists before any of that. A session that has published nothing still has its spine, 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, pagebar, pageCount, pageDoc, pane, paneCollapse, paneNext, panePrev, spine, spineBadge } from "./dom.js";
+import {
+    chips,
+    grip,
+    pageBigger,
+    pagebar,
+    pageCount,
+    pageDoc,
+    pageSizeVal,
+    pageSmaller,
+    pane,
+    paneCollapse,
+    paneNext,
+    panePrev,
+    spine,
+    spineBadge,
+} from "./dom.js";
+import { arrivingPage } from "./pane-arrival.js";
 import { dropPage, fetchPage, renderPage, submitFeedback } from "./pane-frame.js";
 import { attachedSid } from "./state.js";
 
@@ -31,9 +50,14 @@ 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, and whether it is collapsed. Not the session's - a pane is
-// furniture, and furniture does not move because you looked at another tab.
+// 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.
+const TEXT_SIZES = [0.8, 0.9, 1, 1.25, 1.5];
+const DEFAULT_SIZE_STEP = 2;
 // Chips say how long ago a page arrived, so the bar goes stale sitting still. Cheap to redraw; nothing else
 // on the page depends on it.
 const AGE_TICK_MS = 30_000;
@@ -47,6 +71,8 @@ let width = null;
 // 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;
 
@@ -56,13 +82,17 @@ 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 }));
+        localStorage.setItem(GEOMETRY_KEY, JSON.stringify({ width, collapsed, size: TEXT_SIZES[sizeStep] }));
     } catch {
         // The pane still works for this page's lifetime.
     }
@@ -88,10 +118,19 @@ export function applyPages(msg) {
     // A page the user was reading can go: the file was moved, or the pane was adopted into another
     // conversation's directory while this window was looking at it.
     if (entry.selected !== null && !entry.pages.some((page) => page.id === entry.selected)) entry.selected = null;
-    // The one time a page selects itself. An empty pane has nothing to interrupt, so the first page to
-    // arrive opens; from then on an arrival is a badge and a click.
-    if (entry.selected === null && entry.pages.length === 1) select(msg.sid, entry.pages[0].id, { user: false });
-    if (msg.sid === attachedSid) render();
+    if (msg.sid !== attachedSid) return;
+    // 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);
+    if (arrived !== null) {
+        select(msg.sid, arrived.id, { user: false });
+        flashArrival();
+    }
+    // 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);
+    else render();
 }
 
 /** Sessions that are gone take their pane state with them. The files on disk are untouched; this is a window. */
@@ -228,6 +267,52 @@ function applyGeometry(collapsedNow = shut) {
     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.
+function applyTextSize() {
+    const size = TEXT_SIZES[sizeStep];
+    pane.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;
+    pageBigger.disabled = sizeStep === TEXT_SIZES.length - 1;
+}
+
+function stepTextSize(by) {
+    const next = Math.min(Math.max(sizeStep + by, 0), TEXT_SIZES.length - 1);
+    if (next === sizeStep) return;
+    sizeStep = next;
+    applyTextSize();
+    rememberGeometry();
+}
+
+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);

package/templates/webterm/public/app/status-strip.js

@@ -13,6 +13,7 @@
 import { sendFrame } from "./connection.js";
 import { strip } from "./dom.js";
 import { attachedSid } from "./state.js";
+import { short, until } from "./strip-format.js";
 
 // The countdown to the quota recharge goes stale sitting still, and so does nothing else here. A redraw is
 // a handful of spans, so the whole strip is rebuilt rather than the one number patched.
@@ -60,29 +61,6 @@ export function refreshStrip() {
     render();
 }
 
-// --- Saying a number ---------------------------------------------------------------------------------------------------------------------
-
-/** 45.0k, 174k, 1M - a token count at a glance, never to the token. */
-function short(value) {
-    if (value >= 1_000_000) return `${trimZero(value / 1_000_000)}M`;
-    if (value >= 100_000) return `${Math.round(value / 1000)}k`;
-    if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
-    return String(Math.round(value));
-}
-
-function trimZero(value) {
-    const text = value.toFixed(1);
-    return text.endsWith(".0") ? text.slice(0, -2) : text;
-}
-
-/** How long until a moment: "2h 15m", "15m", or "now" once it has passed. */
-function until(epochSeconds) {
-    const seconds = Math.round(epochSeconds - Date.now() / 1000);
-    if (seconds <= 0) return "now";
-    if (seconds < 3600) return `${Math.max(1, Math.round(seconds / 60))}m`;
-    return `${Math.floor(seconds / 3600)}h ${Math.round((seconds % 3600) / 60)}m`;
-}
-
 // --- Drawing -----------------------------------------------------------------------------------------------------------------------------
 
 // The icons and the separator the mock draws, written as escapes so this file stays plain ASCII: an emoji
@@ -107,9 +85,12 @@ function segment(...parts) {
     return seg;
 }
 
-/** A meter, filled to a percentage of itself. `tone` is what the fill says about that number. */
-function bar(percent, tone) {
-    const el = span(tone ? `bar ${tone}` : "bar");
+/**
+ * A meter, filled to a percentage of itself. `tone` is what the fill says about that number, and `variant` its
+ * width: the quota meters are narrow, because there are two of them and one line to fit on.
+ */
+function bar(percent, tone, variant) {
+    const el = span(["bar", tone, variant].filter(Boolean).join(" "));
     const fill = span("fill");
     fill.style.width = `${Math.max(0, Math.min(100, percent))}%`;
     el.append(fill);
@@ -136,13 +117,15 @@ function contextSegment(status) {
     return segment(...parts);
 }
 
-// What is left of the five-hour window, and when it comes back. Absent on a free account and before the first
-// answer of a session, which is why the whole segment goes rather than showing a full meter that is a guess.
-function quotaSegment(status) {
-    if (status.quotaPct === null) return null;
-    const tone = status.quotaPct <= QUOTA_LOW_AT ? "low" : status.quotaPct <= QUOTA_WARN_AT ? "warn" : "";
-    const parts = [span("icon", BOLT), bar(status.quotaPct, tone), span("name", `${Math.round(status.quotaPct)}%`)];
-    if (status.quotaResetsAt !== null) parts.push(span("dim", `(${PLUG} ${until(status.quotaResetsAt)})`));
+// What is left of one rate-limit window, and when it comes back. Drawn once per window the account has, with a
+// tag - "5h", "7d" - so the two are told apart without reading the percentages. A window the account does not
+// have is absent from the snapshot, and so is its whole segment: an empty meter would be a guess. So is one
+// before the first answer of a session, and on an account that has no limits at all.
+function quotaSegment(percent, resetsAt, tag) {
+    if (percent === null) return null;
+    const tone = percent <= QUOTA_LOW_AT ? "low" : percent <= QUOTA_WARN_AT ? "warn" : "";
+    const parts = [span("icon", BOLT), span("tag", tag), bar(percent, tone, "narrow"), span("name", `${Math.round(percent)}%`)];
+    if (resetsAt !== null) parts.push(span("dim", `(${PLUG} ${until(resetsAt)})`));
     return segment(...parts);
 }
 
@@ -152,7 +135,16 @@ function versionSegment(status) {
 
 function render() {
     const status = attachedSid === null ? null : (statuses.get(attachedSid) ?? null);
-    const segments = status === null ? [] : [modelSegment(status), contextSegment(status), quotaSegment(status), versionSegment(status)];
+    const segments =
+        status === null
+            ? []
+            : [
+                  modelSegment(status),
+                  contextSegment(status),
+                  quotaSegment(status.quotaPct, status.quotaResetsAt, "5h"),
+                  quotaSegment(status.quotaWeekPct, status.quotaWeekResetsAt, "7d"),
+                  versionSegment(status),
+              ];
     const shown = segments.filter((seg) => seg !== null);
     // A snapshot every field of which was missing says nothing, and an empty bar above the composer is worse
     // than no bar: it looks like something failed to load.

package/templates/webterm/public/app/strip-format.js

@@ -0,0 +1,36 @@
+// strip-format.js - saying the strip's numbers in words, and nothing else.
+//
+// These three are the whole of the arithmetic behind the strip: a token count at a glance, and how long until a
+// rate-limit window comes back. They are here rather than in status-strip.js because they touch nothing on the
+// page - no element, no state, no socket - which is what lets them be run and checked where there is no browser,
+// the way the shell scripts beside them are. Everything else the strip does is drawing, and is read as source.
+
+/** 45.0k, 174k, 1M - a token count at a glance, never to the token. */
+export function short(value) {
+    if (value >= 1_000_000) return `${trimZero(value / 1_000_000)}M`;
+    if (value >= 100_000) return `${Math.round(value / 1000)}k`;
+    if (value >= 1000) return `${(value / 1000).toFixed(1)}k`;
+    return String(Math.round(value));
+}
+
+function trimZero(value) {
+    const text = value.toFixed(1);
+    return text.endsWith(".0") ? text.slice(0, -2) : text;
+}
+
+const DAY_SECONDS = 86_400;
+
+/**
+ * How long until a moment: "4d 6h", "2h 15m", "15m", or "now" once it has passed.
+ *
+ * The day unit is here for the seven-day rate-limit window, which is days away for most of its life. One
+ * countdown draws both quota meters, so the five-hour one has it too; there it simply never fires.
+ */
+export function until(epochSeconds, nowSeconds = Date.now() / 1000) {
+    const seconds = Math.round(epochSeconds - nowSeconds);
+    if (seconds <= 0) return "now";
+    if (seconds < 3600) return `${Math.max(1, Math.round(seconds / 60))}m`;
+    if (seconds < DAY_SECONDS) return `${Math.floor(seconds / 3600)}h ${Math.round((seconds % 3600) / 60)}m`;
+    // The hours are floored rather than rounded, so a reset 4 days and 23h50m away never reads "4d 24h".
+    return `${Math.floor(seconds / DAY_SECONDS)}d ${Math.floor((seconds % DAY_SECONDS) / 3600)}h`;
+}

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

@@ -3,8 +3,9 @@
 // Every live agent in the container is a tab, this window drives one of them at a time, and none of them ends
 // because a window closed or a laptop slept. Tabs are dragged to reorder them, and the order is the registry's,
 // so every window agrees on it. A tab also says what its session is doing without being opened: a light travels
-// round it while the agent works, and it holds lit until visited when an agent finished something nobody was
-// there to see.
+// round it while the agent works, it holds lit until visited when an agent finished something nobody was there
+// to see, and it takes its session's colour and a small page beside its age when a page was published into a
+// pane this window is not looking at.
 //
 // The bar is rebuilt from scratch on every frame the server sends and on the age tick, so nothing in it is
 // updated in place and nothing outside it may keep a reference to a tab.
@@ -54,9 +55,11 @@ export function ageLabel(createdAt) {
 // worse, be cut off half way and never seen. Both are fixed the same way: work out how far in the animation
 // should already be and hand that to the browser as a negative delay, so a fresh element carries on mid-stride.
 
-// One lap of the travelling light, and how long the arrival flash lasts. Both must match styles.css.
+// One lap of the travelling light, how long the arrival flash lasts, and how long a published page flashes
+// the tab it landed in. All three must match styles.css.
 const TRACE_MS = 4_000;
 const ARRIVAL_MS = 1_400;
+const PAGE_ARRIVAL_MS = 1_400;
 
 // The travelling light, in its own clipped layer: the light rides the layer's edge and turns the corners, so
 // the part of it that hangs past a corner has to be cut off rather than drawn over the neighbouring tab.
@@ -98,6 +101,51 @@ function startArrival(tab, sid) {
     tab.style.animationDelay = `-${elapsed}ms`;
 }
 
+// The same idea for the pane: a page published in a session this window is not looking at. The session list is
+// the only frame that says anything about such a session, so the count of unopened pages rides on it, and this
+// is where a rise in that count becomes a single flash rather than one per frame.
+const pagesArrivedAt = new Map();
+
+export function notePageArrivals() {
+    for (const entry of sessions) {
+        if (entry.unreadPages > 0 && !pagesArrivedAt.has(entry.id)) pagesArrivedAt.set(entry.id, Date.now());
+    }
+    // Read, or gone from the bar: the next page published there is a new arrival and flashes again.
+    for (const sid of [...pagesArrivedAt.keys()]) {
+        if (sessions.some((entry) => entry.id === sid && entry.unreadPages > 0)) continue;
+        pagesArrivedAt.delete(sid);
+    }
+}
+
+function startPageArrival(tab, sid) {
+    const elapsed = Date.now() - (pagesArrivedAt.get(sid) ?? Date.now());
+    if (elapsed >= PAGE_ARRIVAL_MS) return;
+    tab.classList.add("page-arriving");
+    tab.style.animationDelay = `-${elapsed}ms`;
+}
+
+// A page waiting in this session's pane, drawn rather than shipped in the page like every other icon the bar
+// makes, because the bar is rebuilt from scratch on every frame. It says "a page", where a dot in the corner
+// would only say "something" - and the corner is taken anyway, by the button that ends the session.
+function pageMark() {
+    const mark = document.createElement("span");
+    mark.className = "pagemark";
+    const svg = document.createElementNS(SVG_NS, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("width", "11");
+    svg.setAttribute("height", "11");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    const sheet = document.createElementNS(SVG_NS, "path");
+    sheet.setAttribute("d", "M6 3h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2M8 9h8M8 13h8M8 17h5");
+    svg.append(sheet);
+    mark.append(svg);
+    return mark;
+}
+
 // --- One tab -----------------------------------------------------------------------------------------------------------------------------
 
 // The tab's name is either a static label or, while this tab is being renamed, an inline editor.
@@ -178,6 +226,12 @@ function stateNote(entry) {
     return "";
 }
 
+// Said alongside whatever else the tab is saying, because a page waiting is not a state the session is in.
+function pagesNote(entry, waiting) {
+    if (!waiting) return "";
+    return entry.unreadPages === 1 ? " - a page is waiting in its web pane" : ` - ${entry.unreadPages} pages are waiting in its web pane`;
+}
+
 // How a directory reads in a sentence. The root has no path worth printing, so it gets a name.
 function whereLabel(cwd) {
     return cwd === "" ? "the workspace root" : cwd;
@@ -199,13 +253,20 @@ function tabFor(entry) {
     if (entry.unread) tab.classList.add("unread");
     if (entry.working) tab.classList.add("working");
     if (entry.attention) tab.classList.add("attention");
+    // A page nobody has opened, in a session this window is not looking at. The attached session says it in
+    // the pane instead, where the page has already opened itself.
+    const pagesWaiting = entry.unreadPages > 0 && entry.id !== attachedSid;
+    if (pagesWaiting) tab.classList.add("pages");
     tab.style.setProperty("--sc", colorFor(entry));
     // The tooltip keeps the default "agent N" even when a custom name is shown, so the number stays findable.
     const where = entry.cwd ? ` in ${entry.cwd}` : "";
-    tab.title = `${entry.label}${where} - running ${ageLabel(entry.createdAt)}${stateNote(entry)} - double-click the name to rename`;
+    const state = `${stateNote(entry)}${pagesNote(entry, pagesWaiting)}`;
+    tab.title = `${entry.label}${where} - running ${ageLabel(entry.createdAt)}${state} - double-click the name to rename`;
 
     if (entry.working) tab.append(traceLayer());
+    // One flash at a time: a tab has one animation-delay, and the alert is the louder of the two.
     if (entry.attention) startArrival(tab, entry.id);
+    else if (pagesWaiting) startPageArrival(tab, entry.id);
 
     const dot = document.createElement("span");
     dot.className = "dot";
@@ -214,6 +275,7 @@ function tabFor(entry) {
     age.className = "age";
     age.textContent = ageLabel(entry.createdAt);
     tab.append(dot, name, age);
+    if (pagesWaiting) tab.append(pageMark());
     if (entry.cwd) tab.append(dirChip(entry));
 
     // Another window is driving this one, so a takeover prompt on click is not a surprise.

package/templates/webterm/public/index.html

@@ -37,6 +37,13 @@
                 <div id="chips"></div>
                 <button type="button" id="pane-next" class="pane-nav" title="Newer pages" aria-label="Newer pages" hidden>&#8250;</button>
                 <span id="page-count"></span>
+                <!-- How big the shown page is drawn, for this browser. Interface furniture: no agent knows it
+                     exists, and a page written before it scales like any other. -->
+                <span id="page-size">
+                    <button type="button" id="page-smaller" title="Smaller text" aria-label="Smaller text">&#8722;</button>
+                    <span id="page-size-val"></span>
+                    <button type="button" id="page-bigger" title="Larger text" aria-label="Larger text">+</button>
+                </span>
                 <!-- An arrow into the pane's own edge: put it away, that way. Inline because this bar is static
                      chrome, unlike the session bar's icons, which are drawn per frame. -->
                 <button type="button" id="pane-collapse" class="pane-nav" title="Collapse the web pane" aria-label="Collapse the web pane">
@@ -55,9 +62,9 @@
     </div>
 
     <!-- The status strip, drawn by app/status-strip.js from the snapshot the attached session's status line
-         wrote: model and effort, context against the window, quota left with its recharge countdown, and the
-         Claude Code version. Hidden until that session has a snapshot, and no session but a claude one ever
-         does. -->
+         wrote: model and effort, context against the window, what is left of each rate-limit window with its
+         recharge countdown, and the Claude Code version. Hidden until that session has a snapshot, and no
+         session but a claude one ever does. -->
     <div id="strip" hidden></div>
 
     <section id="composer">
@@ -70,6 +77,19 @@
                         <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
                     </svg>
                 </button>
+                <!-- The one button that sends without being written: it types a fixed sentence into the
+                     session, through the same paste path as anything else, and leaves the box alone. Its
+                     place in the markup is what puts it above Send: the block fills row by row. -->
+                <button type="button" id="ask-page" class="icon-btn" title="Put the last answer in the web pane"
+                        aria-label="Put the last answer in the web pane">
+                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
+                        <title>Put the last answer in the web pane</title>
+                        <rect x="3" y="4" width="18" height="16" rx="2" />
+                        <path d="M14 4v16" />
+                        <path d="M17 9h1" />
+                        <path d="M17 12h1" />
+                    </svg>
+                </button>
                 <button type="button" id="mic" class="icon-btn" title="Dictate" aria-label="Dictate">
                     <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                         <title>Dictate</title>