chamba 0.3.0 → 0.4.0

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

@@ -0,0 +1,353 @@
+// pane.js - the web pane: 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.
+//
+// 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.
+//
+// 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.
+//
+// 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 { dropPage, fetchPage, renderPage, submitFeedback } from "./pane-frame.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, and whether it is collapsed. Not the session's - a pane is
+// furniture, and furniture does not move because you looked at another tab.
+const GEOMETRY_KEY = "webterm-pane";
+// 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;
+
+// sid -> { pages: [{ id, title, mtime, unread }], notice, selected }. Kept for every session this window has
+// 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;
+// 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;
+} 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 }));
+    } catch {
+        // The pane still works for this page's lifetime.
+    }
+}
+
+// --- The pane's own state ----------------------------------------------------------------------------------------------------------------
+
+function paneFor(sid) {
+    let entry = panes.get(sid);
+    if (!entry) {
+        entry = { pages: [], notice: null, selected: null };
+        panes.set(sid, entry);
+    }
+    return entry;
+}
+
+/** The pages frame for a session: the list as it now stands, and why it is not the conversation's own. */
+export function applyPages(msg) {
+    if (typeof msg.sid !== "string") return;
+    const entry = paneFor(msg.sid);
+    entry.pages = Array.isArray(msg.pages) ? msg.pages : [];
+    entry.notice = msg.notice ?? null;
+    // 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();
+}
+
+/** Sessions that are gone take their pane state with them. The files on disk are untouched; this is a window. */
+export function prunePanes(live) {
+    for (const sid of [...panes.keys()]) {
+        if (!live.has(sid)) panes.delete(sid);
+    }
+}
+
+/**
+ * Draw the pane 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.
+ */
+export function refreshPane() {
+    if (attachedSid !== null && !panes.has(attachedSid)) sendFrame({ t: "pages" });
+    render();
+}
+
+// --- Selecting and showing a page --------------------------------------------------------------------------------------------------------
+
+// The page shown last, so an ordinary redraw (a chip's age, another session's frame) does not reload the
+// document under the user and lose their scroll position or a half-filled form.
+let shown = { sid: null, id: null };
+
+function select(sid, id, { user }) {
+    const entry = paneFor(sid);
+    entry.selected = id;
+    // Reading is what makes a page read, and the server owns that: it answers with a fresh list, which is
+    // also what clears the badge. Marking it here as well only makes the two disagree for a moment.
+    if (user) show(sid, id);
+}
+
+async function show(sid, id) {
+    if (shown.sid === sid && shown.id === id) return;
+    shown = { sid, id };
+    let html;
+    try {
+        html = await fetchPage(sid, id);
+    } catch {
+        // The page is gone, or too large to serve. The list will say so on the next frame; until then the
+        // pane says it plainly rather than sitting on the previous page.
+        if (shown.sid === sid && shown.id === id) {
+            shown = { sid: null, id: null };
+            dropPage(pageDoc);
+            pageDoc.append(emptyState("That page could not be opened."));
+        }
+        return;
+    }
+    // The user clicked something else while this was in flight.
+    if (shown.sid !== sid || shown.id !== id) return;
+    renderPage(pageDoc, {
+        html,
+        onFeedback: (submission) => submitFeedback(sid, id, submission),
+    });
+}
+
+// --- Drawing -----------------------------------------------------------------------------------------------------------------------------
+
+function emptyState(line) {
+    const el = document.createElement("p");
+    el.className = "pane-empty";
+    el.textContent = line;
+    return el;
+}
+
+// Three things you might say, because the pane is asked for in words. Every agent already knows how to
+// publish (its injected context says so); what is missing is the person knowing they can ask.
+const INTRO_ASKS = ['"show me the plan as a page"', '"put the comparison in the pane"', '"ask me the rest as a form"'];
+
+// What a session that has published nothing shows once its pane is opened. It is the only place the feature
+// introduces itself, so it also carries the half nobody guesses: a page can ask something back.
+function introState() {
+    const wrap = document.createElement("div");
+    wrap.className = "pane-intro";
+    const title = document.createElement("h2");
+    title.textContent = "The web pane";
+    const lede = document.createElement("p");
+    lede.textContent = "Ask the agent for a page whenever the answer is longer or more structured than the terminal carries well:";
+    const asks = document.createElement("ul");
+    for (const ask of INTRO_ASKS) {
+        const item = document.createElement("li");
+        item.textContent = ask;
+        asks.append(item);
+    }
+    const forms = document.createElement("p");
+    forms.textContent = "A page can ask you things too - what you submit goes straight back to the agent.";
+    wrap.append(title, lede, asks, forms);
+    return wrap;
+}
+
+// "now", "6 m", "3 h", "2 d" - short enough for a chip, and never a date, because everything in the pane
+// happened during this conversation.
+function ago(mtime) {
+    const seconds = Math.max(0, Math.round((Date.now() - mtime) / 1000));
+    if (seconds < 60) return "now";
+    if (seconds < 3600) return `${Math.floor(seconds / 60)} m`;
+    if (seconds < 86_400) return `${Math.floor(seconds / 3600)} h`;
+    return `${Math.floor(seconds / 86_400)} d`;
+}
+
+function chipFor(sid, page, selected) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = selected ? "chip sel" : "chip";
+    chip.dataset.id = page.id;
+    const title = document.createElement("span");
+    title.className = "ct";
+    title.textContent = page.title;
+    const time = document.createElement("span");
+    time.className = "time";
+    time.textContent = ago(page.mtime);
+    chip.append(title, time);
+    if (page.unread) {
+        const badge = document.createElement("span");
+        badge.className = "new";
+        badge.textContent = "new";
+        chip.append(badge);
+    }
+    chip.addEventListener("click", () => {
+        select(sid, page.id, { user: true });
+        render();
+    });
+    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`);
+}
+
+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.
+    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;
+
+    chips.replaceChildren(...pages.map((page) => chipFor(sid, page, page.id === entry?.selected)));
+    const at = pages.findIndex((page) => page.id === entry?.selected);
+    pageCount.textContent = bare ? "no pages yet" : `${at === -1 ? 0 : at + 1} / ${pages.length}`;
+    // The arrows are the mock's way through a bar too narrow to hold every chip.
+    const overflowing = chips.scrollWidth > chips.clientWidth + 1;
+    panePrev.hidden = !overflowing;
+    paneNext.hidden = !overflowing;
+
+    if (bare) {
+        dropPage(pageDoc);
+        shown = { sid: null, id: null };
+        pageDoc.append(introState());
+        return;
+    }
+
+    // A session refused adoption keeps a pane of its own, and publishes into it, so its chips have to open
+    // like any other. The notice explains where the conversation's earlier pages went, and stands in for
+    // "Pick a page above." until this session has one open.
+    if (entry === null || entry.selected === null) {
+        const notice =
+            entry?.notice === "shared"
+                ? "This conversation's pages are open in another session, so this one keeps a pane of its own."
+                : "Pick a page above.";
+        dropPage(pageDoc);
+        shown = { sid: null, id: null };
+        pageDoc.append(emptyState(notice));
+        return;
+    }
+    show(sid, entry.selected);
+    // A chip that scrolled out of the bar while the user was reading something else.
+    chips.querySelector(".chip.sel")?.scrollIntoView({ block: "nearest", inline: "nearest" });
+}
+
+setInterval(() => {
+    if (!shut) 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 pagebar is chrome: a click on it must not leave the terminal without focus for no reason.
+pagebar.addEventListener("mousedown", (event) => event.preventDefault());

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

@@ -0,0 +1,51 @@
+// state.js - what the server last told this window, and the key the window was opened with.
+//
+// Everything the session bar draws comes from the server, so every window agrees on it. It lives here because
+// most of the page reads it and only the frame router writes it: the readers import it as a live binding, so
+// there is one copy of the truth, and the writing is in one place rather than wherever a frame arrived.
+
+// Everything the session bar draws comes from the server, so every window agrees on it.
+export let sessions = [];
+export let attachedSid = null;
+export let maxSessions = 8;
+// Which agent "+ New session" starts, and every agent this container will run. A session's own agent is on
+// its entry - several can be live at once - so these two are only about starting the next one.
+export let defaultAgent = "the agent";
+export let agents = [];
+export let workspaceName = "";
+// Where "+ New session" starts an agent, relative to the workspace root ("" is the root itself). The server
+// owns it - it follows the directory chamba was last run in - and the picker opens on it.
+export let defaultCwd = "";
+
+// A whole `sessions` frame, taken in one go. The frame router calls this and then redraws everything that
+// reads it; nothing else writes any of it.
+export function adoptSessionsFrame(msg) {
+    sessions = Array.isArray(msg.list) ? msg.list : [];
+    attachedSid = msg.attachedSid ?? null;
+    maxSessions = msg.max ?? maxSessions;
+    defaultAgent = msg.agent || defaultAgent;
+    if (Array.isArray(msg.agents)) agents = msg.agents;
+    workspaceName = msg.workspace || "";
+    defaultCwd = msg.defaultCwd ?? "";
+}
+
+// Which session this window is driving, or null for none. Moved by the frames that move it: a replay lands on
+// one, a takeover or an exit leaves the window on nothing at all.
+export function setAttachedSid(sid) {
+    attachedSid = sid;
+}
+
+// The label a session tab is showing, for a sentence about a session that may already be gone.
+export function labelOf(sid, fallback) {
+    return sessions.find((entry) => entry.id === sid)?.label ?? fallback;
+}
+
+// The key that came with the URL. The server mints a new one every time it starts and refuses everything
+// without it, so this is also what goes stale: a window left open across a restart still holds the old key,
+// which is the case the curtain explains rather than reconnecting forever.
+export const WEB_KEY = new URLSearchParams(location.search).get("k") ?? "";
+export const KEY_QUERY = `?k=${encodeURIComponent(WEB_KEY)}`;
+// The header the pane sends the key in. A published page's content must never be reachable at a URL that
+// carries the key, because a script inside a page can read the URL of the document it is in - so the two
+// pane routes take the key here instead, and the query form stays for everything else.
+export const KEY_HEADER = "X-Webterm-Key";

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

@@ -0,0 +1,170 @@
+// status-strip.js - the attached session's own numbers, in one line above the composer.
+//
+// In a terminal this is the Claude Code status line. In chamba it is not: the script that would draw it prints
+// nothing and writes a snapshot instead, and the server turns that file into a frame. The reason is that a
+// status line is redrawn inside the conversation, which in a browser means it scrolls away with the output and
+// takes a slice of the terminal every prompt; here it sits still, outside the terminal, where it belongs.
+//
+// The strip is the attached session's, like the pane: switching tabs switches the numbers, and a session with
+// no snapshot has no strip at all. Only claude writes snapshots, so a codex tab is a terminal and a composer
+// and nothing else - the server never sends a frame for one, which is what keeps the strip from flickering
+// into existence empty.
+
+import { sendFrame } from "./connection.js";
+import { strip } from "./dom.js";
+import { attachedSid } from "./state.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.
+const TICK_MS = 30_000;
+
+// Where the bars change colour. The quota is an energy meter, so it warns as it drains; the context is a
+// filling one, so it warns as it fills. Both say the same thing in the end - it is time to do something.
+const QUOTA_WARN_AT = 50;
+const QUOTA_LOW_AT = 20;
+const CONTEXT_WARN_AT = 70;
+const CONTEXT_FULL_AT = 90;
+
+// sid -> the session's status, or null when it has none yet. Kept per session so switching tabs is a redraw
+// rather than a round trip.
+const statuses = new Map();
+
+// Sessions this window has already asked about. The server pushes a session's status when the window lands on
+// it, so asking is only for the frame that did not arrive - and a session that will never have one (any agent
+// but claude) must not be asked again every time the bar redraws.
+const asked = new Set();
+
+/** The snapshot frame for a session: everything the strip draws, already normalised by the server. */
+export function applySnapshot(msg) {
+    if (typeof msg.sid !== "string") return;
+    statuses.set(msg.sid, msg.status ?? null);
+    if (msg.sid === attachedSid) render();
+}
+
+/** Sessions that are gone take their numbers with them. */
+export function pruneStatuses(live) {
+    for (const sid of [...statuses.keys()]) {
+        if (!live.has(sid)) statuses.delete(sid);
+    }
+    for (const sid of [...asked]) {
+        if (!live.has(sid)) asked.delete(sid);
+    }
+}
+
+/** Draw the strip for whatever session this window is now on, asking for its numbers when it has none. */
+export function refreshStrip() {
+    if (attachedSid !== null && !statuses.has(attachedSid) && !asked.has(attachedSid)) {
+        asked.add(attachedSid);
+        sendFrame({ t: "snapshot" });
+    }
+    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
+// that arrives as a mojibake through some editor or pipe is a bug nobody sees until it is on screen.
+const ROBOT = "\u{1F916}";
+const BRAIN = "\u{1F9E0}";
+const BOLT = "\u26A1";
+const PLUG = "\u{1F50C}";
+const DOT = "\u00B7";
+
+function span(className, textContent) {
+    const el = document.createElement("span");
+    if (className) el.className = className;
+    if (textContent !== undefined) el.textContent = textContent;
+    return el;
+}
+
+/** One segment of the strip. Everything in it is text this interface wrote, so nothing here parses markup. */
+function segment(...parts) {
+    const seg = span("seg");
+    seg.append(...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");
+    const fill = span("fill");
+    fill.style.width = `${Math.max(0, Math.min(100, percent))}%`;
+    el.append(fill);
+    return el;
+}
+
+function modelSegment(status) {
+    if (status.model === null) return null;
+    const parts = [span("icon", ROBOT), span("name", status.model)];
+    if (status.effort !== null) parts.push(span("dim", status.effort));
+    return segment(...parts);
+}
+
+// Tokens held, against the window they are held in. The window half is dropped when Claude Code did not say
+// how big it is, and the bar with it - a bar with no scale is decoration.
+function contextSegment(status) {
+    if (status.tokens === null) return null;
+    const parts = [span("icon", BRAIN), span("name", short(status.tokens))];
+    if (status.windowSize !== null && status.windowSize > 0) parts.push(span("dim", `/ ${short(status.windowSize)}`));
+    if (status.contextPct !== null) {
+        const tone = status.contextPct >= CONTEXT_FULL_AT ? "low" : status.contextPct >= CONTEXT_WARN_AT ? "warn" : "";
+        parts.push(bar(status.contextPct, tone), span("dim", `${Math.round(status.contextPct)}%`));
+    }
+    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)})`));
+    return segment(...parts);
+}
+
+function versionSegment(status) {
+    return status.version === null ? null : segment(span("dim", `Claude Code v${status.version}`));
+}
+
+function render() {
+    const status = attachedSid === null ? null : (statuses.get(attachedSid) ?? null);
+    const segments = status === null ? [] : [modelSegment(status), contextSegment(status), quotaSegment(status), 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.
+    strip.hidden = shown.length === 0;
+    const line = [];
+    for (const seg of shown) {
+        if (line.length > 0) line.push(span("sep", DOT));
+        line.push(seg);
+    }
+    strip.replaceChildren(...line);
+}
+
+setInterval(() => {
+    if (!strip.hidden) render();
+}, TICK_MS);