@gavin-hu/my-pi-agent 0.20.0 → 0.21.0

package/extensions/board/transport/server.ts

@@ -1,37 +1,41 @@
 /**
- * The board page's server: one loopback listener, the snapshot pushed to every
- * attached tab, and the idle grace that closes the page when the last one leaves.
+ * The board page's mount: the prefix it holds on the session's one server, the snapshot
+ * pushed to every attached tab, and the idle grace that gives the prefix back when the
+ * last one leaves.
  *
- * `lib/http` owns the socket — binding, the body cap, the SSE head, and the
- * idempotent close — so this module owns only the board's own decisions: when a
- * frame is pushed (only when a card's revision moved), who receives it, and what
- * stops the ticker.
+ * `lib/http` owns the socket and `serve` owns the session's port, so this module owns only
+ * the board's own decisions: where it answers (`BOARD_BASE`), when a frame is pushed (only
+ * when a card's revision moved), who receives it, and what stops the ticker.
  */
 
+import { BOARD_BASE } from "../../../lib/board/page-pointer.ts";
+import type { BoardView } from "../../../lib/board/view.ts";
 import {
 	type EventSink,
+	type HttpMount,
 	LOOPBACK_HOSTS,
-	type LoopbackServer,
+	type MountSource,
+	type MountSpec,
 	mintToken,
-	serveLoopback,
 	tokenMatches,
 } from "../../../lib/http/index.ts";
 import type { IdleReason } from "../../../lib/http/sink.ts";
 import { defaultInterval, type RepeatTimer } from "../../../lib/timer.ts";
-import type { BoardView } from "../../../lib/board/view.ts";
 import type { PageView } from "../view/page.ts";
 import { type BoardRouterContext, handleBoardRequest } from "./router.ts";
 
 /** How often the page is offered a frame; a frame is sent only when the signature moved. */
-export const PUSH_MS = 1_000;
+const PUSH_MS = 1_000;
 
 /** Largest request body the page accepts: a card and a note are small. */
-export const MAX_BODY_BYTES = 64 * 1_024;
+const MAX_BODY_BYTES = 64 * 1_024;
 
 /** What the page is built from. The lifecycle (`page.ts`) supplies all of it. */
 export interface BoardServerOptions {
-	/** Ports tried in order: the session's remembered port, then an OS-chosen one. */
-	ports: readonly number[];
+	/** Where the prefix comes from: the session's server, or a suite's own. */
+	mount: MountSource;
+	/** The Pi session asking, so the prefix lands on this session's socket. */
+	session: string;
 	/** The page's token; minted here when the caller has none, so the note carries one. */
 	token?: string;
 	page: (view: PageView) => Promise<string>;
@@ -41,8 +45,17 @@ export interface BoardServerOptions {
 	onIdle?: (reason: IdleReason) => void;
 	/** Grace after the last stream leaves; 0 or absent waits for `close()`. */
 	idleMs?: number;
-	/** Grace for a page no tab ever attached to; absent leaves the server open. */
+	/** Grace for a page no tab ever attached to; absent leaves the mount open. */
 	firstIdleMs?: number;
+	/**
+	 * A read that failed while building a frame.
+	 *
+	 * A snapshot can fail for reasons the page does not control — the board directory removed
+	 * or made unreadable under a running page — and a ticker nobody awaits must not turn that
+	 * into an unhandled rejection in the session. The frame is dropped, the next tick tries
+	 * again, and this is the one place the failure is said. Absent, the page stays quiet.
+	 */
+	onError?: (error: unknown) => void;
 	/** The interval seam, so a test drives the ticker instead of waiting. */
 	interval?: RepeatTimer;
 }
@@ -59,10 +72,15 @@ export interface BoardServer {
 	close: () => Promise<void>;
 }
 
-export async function createBoardServer(options: BoardServerOptions): Promise<BoardServer> {
+/** The page, or the reason the session's server has no prefix for it. */
+export type BoardServerResult = { kind: "served"; server: BoardServer } | { kind: "refused"; reason: string };
+
+export async function createBoardServer(options: BoardServerOptions): Promise<BoardServerResult> {
 	const token = options.token ?? mintToken();
 	const clients = new Set<EventSink>();
 	const interval = options.interval ?? defaultInterval;
+	/** A frame that could not be built is not sent; the next tick tries again. */
+	const report = (error: unknown): void => options.onError?.(error);
 	let pushed = "";
 
 	const ctx: BoardRouterContext = {
@@ -84,8 +102,10 @@ export async function createBoardServer(options: BoardServerOptions): Promise<Bo
 		for (const sink of clients) sink.write(frame);
 	};
 
-	const server: LoopbackServer = await serveLoopback({
-		ports: options.ports,
+	/** The prefix this page asks for: the session's server holds it, not this module. */
+	const spec: Omit<MountSpec, "handler"> = {
+		session: options.session,
+		prefix: BOARD_BASE,
 		maxBodyBytes: MAX_BODY_BYTES,
 		...(options.idleMs === undefined || options.onIdle === undefined
 			? {}
@@ -96,6 +116,9 @@ export async function createBoardServer(options: BoardServerOptions): Promise<Bo
 						onIdle: options.onIdle,
 					},
 				}),
+	};
+	const outcome = await options.mount({
+		...spec,
 		async handler(request) {
 			const result = await handleBoardRequest(ctx, request.method, request.url, request.headers);
 			if (!result.stream) return { result };
@@ -105,10 +128,13 @@ export async function createBoardServer(options: BoardServerOptions): Promise<Bo
 					clients.add(sink);
 					// A tab that just attached gets the current frame without waiting for a
 					// card to change — otherwise a quiet board looks like a dead page.
-					void options.view().then((view) => {
-						pushed = view.sig;
-						sink.write(`data: ${JSON.stringify(view)}\n\n`);
-					});
+					void options
+						.view()
+						.then((view) => {
+							pushed = view.sig;
+							sink.write(`data: ${JSON.stringify(view)}\n\n`);
+						})
+						.catch(report);
 					return () => {
 						clients.delete(sink);
 					};
@@ -116,8 +142,10 @@ export async function createBoardServer(options: BoardServerOptions): Promise<Bo
 			};
 		},
 	});
+	if (outcome.kind === "refused") return { kind: "refused", reason: outcome.reason };
+	const mount: HttpMount = outcome.mount;
 
-	const stopTicker = interval(PUSH_MS, () => void push());
+	const stopTicker = interval(PUSH_MS, () => void push().catch(report));
 	let closed = false;
 	const close = async (): Promise<void> => {
 		if (closed) return;
@@ -125,14 +153,17 @@ export async function createBoardServer(options: BoardServerOptions): Promise<Bo
 		stopTicker();
 		for (const sink of clients) sink.end();
 		clients.clear();
-		await server.close();
+		await mount.release();
 	};
 
 	return {
-		port: server.port,
-		url: `http://127.0.0.1:${server.port}/?token=${token}`,
-		watchers: () => clients.size,
-		pushed: () => pushed,
-		close,
+		kind: "served",
+		server: {
+			port: mount.port,
+			url: `${mount.origin}${mount.base}/?token=${token}`,
+			watchers: () => clients.size,
+			pushed: () => pushed,
+			close,
+		},
 	};
 }

package/extensions/board/types.ts

@@ -84,16 +84,6 @@ export const ACTION_FIELDS: Record<BoardAction, readonly string[]> = {
 	drop: ["card"],
 };
 
-/**
- * The actions that change the board: everything but a read.
- *
- * One definition, read by the tool (does this call need a teammate?) and by plan
- * mode (may this call run while planning?), so "a read" cannot mean two things.
- */
-export const BOARD_MUTATING_ACTIONS: ReadonlySet<BoardAction> = new Set(
-	BOARD_ACTIONS.filter((action) => action !== "list"),
-);
-
 /** A result the transcript renders and the page's routes mirror. */
 export interface BoardDetails {
 	action: BoardAction;

package/extensions/board/view/client.ts

@@ -14,7 +14,7 @@
  */
 
 import { MATCHES_QUERY_JS } from "../../../lib/board/card.ts";
-import { CLIENT_RUNTIME_JS } from "../../../lib/web/index.ts";
+import { CLIENT_BASE_JS, CLIENT_RUNTIME_JS } from "../../../lib/web/index.ts";
 import { PLURAL_JS } from "../../../lib/board/round-text.ts";
 import { FORMAT_AGE_JS } from "../../../lib/format.ts";
 import { namesScript, TAB_TITLE_JS, THEME_TOGGLE_JS, dialogScript, keysDialogScript } from "../../../lib/web/index.ts";
@@ -32,7 +32,8 @@ import { BOARD_TEAM_JS } from "./team.ts";
  * shape, what a `query` matches, and how an age reads: the browser has no import graph,
  * and a second copy of any of them is exactly what this bundle is not allowed to hold.
  */
-export const BOARD_CLIENT_JS = `${namesScript(BOARD_CLASS)}
+export const BOARD_CLIENT_JS = `${CLIENT_BASE_JS}
+${namesScript(BOARD_CLASS)}
 ${renderJs({ plural: PLURAL_JS, tabTitle: TAB_TITLE_JS, matches: MATCHES_QUERY_JS, age: FORMAT_AGE_JS, runtime: CLIENT_RUNTIME_JS })}
 ${BOARD_TEAM_JS}
 ${BOARD_DIALOG_JS}

package/extensions/board/view/live.ts

@@ -11,12 +11,6 @@ export const BOARD_LIVE_JS = String.raw`(function () {
   "use strict";
   var board = window.bfBoard || (window.bfBoard = {});
   var token = new URLSearchParams(window.location.search).get("token") || "";
-  var LANE_LABEL = { todo: "To do", doing: "Doing", blocked: "Blocked", done: "Done" };
-
-  /** The lane's word, for the dialog's move buttons. */
-  board.laneLabel = function (lane) {
-    return LANE_LABEL[lane] || lane;
-  };
 
   /** The badge's text and its kit status role: connecting, live, reconnecting. */
   function badge(state, at) {
@@ -161,7 +155,7 @@ export const BOARD_LIVE_JS = String.raw`(function () {
 
   /** The live channel: a reconnect is the browser's own retry, not a second request. */
   function stream() {
-    var source = new EventSource("/events?token=" + encodeURIComponent(token));
+    var source = new EventSource(pageBase() + "/events?token=" + encodeURIComponent(token));
     source.onopen = function () {
       badge("live", board.lastFrame);
     };

package/extensions/board/view/page.ts

@@ -13,7 +13,15 @@
  * contract test holds every class to the kit or to this page's stylesheet.
  */
 
-import { brandLockup, button, docHead, keysSheet, tabTitle, themeToggle } from "../../../lib/web/index.ts";
+import {
+	baseAttribute,
+	brandLockup,
+	button,
+	docHead,
+	keysSheet,
+	tabTitle,
+	themeToggle,
+} from "../../../lib/web/index.ts";
 import { BOARD_KEYS } from "./keys.ts";
 import { BOARD_CLASS as N } from "./names.ts";
 import { BOARD_CSS } from "./styles.ts";
@@ -28,12 +36,15 @@ export type PageView = "board" | "team";
  * shared link opens the tab it names. The document has no form and no write affordance:
  * a page that cannot change a card cannot offer a button the server would refuse.
  */
-export function renderBoardPage(input: { view: PageView }): string {
+export function renderBoardPage(input: { view: PageView; base?: string }): string {
 	const team = input.view === "team";
+	// The page answers under the session's mount, so its own script and theme are named
+	// from that prefix rather than from the origin's root.
+	const base = input.base ?? "";
 	return `<!doctype html>
-<html lang="en" data-view="${team ? "team" : "board"}">
+<html lang="en" data-view="${team ? "team" : "board"}"${baseAttribute(base)}>
 <head>
-${docHead({ title: tabTitle("board"), css: BOARD_CSS })}
+${docHead({ title: tabTitle("board"), css: BOARD_CSS, base })}
 </head>
 <body class="bf-app">
 <h1 class="sr-only">board — the shared feature list for this repository</h1>
@@ -111,7 +122,7 @@ ${docHead({ title: tabTitle("board"), css: BOARD_CSS })}
 </div>
 
 ${keysSheet(BOARD_KEYS)}
-<script src="/app.js" defer></script>
+<script src="${base}/app.js" defer></script>
 </body>
 </html>
 `;

package/extensions/board/view/render.ts

@@ -68,13 +68,12 @@ __RUNTIME__
   /**
    * One button that calls back, so nothing on the page is a click handler in markup.
    *
-   * 'plain' is the bordered kit button, 'ghost' the text one: a card's primary
-   * action (Claim, Move) is bordered and the rest are text, which is what makes one
-   * of three controls on a card the obvious one.
+   * The class comes from the caller: a card's title and a lane's head are buttons drawn
+   * by the page's own rule, not by the kit's chip-with-border look — and a card draws no
+   * action button at all, since claiming, moving, and editing are the tools' work.
    */
-  function actionButton(label, onClick, variant) {
-    var kind = variant === "plain" ? "" : variant ? " bf-btn--" + variant : " bf-btn--ghost";
-    var node = el("button", "bf-btn" + kind, label);
+  function actionButton(className, label, onClick) {
+    var node = el("button", className, label);
     node.type = "button";
     node.addEventListener("click", onClick);
     return node;
@@ -153,7 +152,11 @@ __RUNTIME__
     var shown = card.paths.slice(0, limit);
     for (var i = 0; i < shown.length; i++) {
       var item = el("li", "");
-      item.appendChild(chip(shown[i]));
+      var hint = chip(shown[i]);
+      // A path longer than the card elides, and the whole of it is on the hover title: the
+      // card is often the only place its hints are read before opening the record.
+      hint.title = shown[i];
+      item.appendChild(hint);
       list.appendChild(item);
     }
     if (card.paths.length > limit) {
@@ -173,10 +176,9 @@ __RUNTIME__
 
     var head = el("p", N.cardHead);
     head.appendChild(el("span", N.cardId, "#" + card.id));
-    var title = actionButton(card.title, function () {
+    var title = actionButton(N.cardTitle, card.title, function () {
       board.openCard(card.id);
     });
-    title.className = N.cardTitle;
     head.appendChild(title);
     item.appendChild(head);
 
@@ -248,14 +250,19 @@ __RUNTIME__
       // A footer that only counts read cards would say "2 cards" over a board holding
       // three files, so the unreadable ones are named beside the size.
       where.textContent =
-        "store " + view.where + " · " + plural(view.counts.total, "card") + " · " + size(view.bytes) +
+        view.repo + " · store " + view.where + " · " + plural(view.counts.total, "card") + " · " + size(view.bytes) +
         (view.skipped > 0 ? " · " + plural(view.skipped, "unreadable") : "");
+      // The name is what the line has room for; the path is what tells two clones of one
+      // repository apart when the name is the same.
+      where.title = view.root;
     }
-    // The tab has to tell two boards apart, and a board's own name is the last segment of
-    // its store: one board per repository, so that key is the subject. The count is what
-    // a browser full of tabs is read for, and an empty board says nothing rather than 0.
+    // The tab has to tell two boards apart, and a board's subject is its repository: one
+    // board per repository, named the way the directory holding it is. The store key is a
+    // hash, which no reader can say out loud, so it is not what a tab leads with. The count
+    // is what a browser full of tabs is read for, and an empty board says nothing rather
+    // than 0.
     var open = view.counts.total - view.counts.done;
-    document.title = tabTitle("board", view.where.split("/").pop(), open > 0 ? open + " open" : undefined);
+    document.title = tabTitle("board", view.repo, open > 0 ? open + " open" : undefined);
   }
 
   /** 1 card, 2 cards — the one body, handed in by the bundle's assembler. */
@@ -289,10 +296,9 @@ __RUNTIME__
     section = el("section", N.lane);
     section.setAttribute("data-status", lane.status);
     var head = el("h2", N.laneHead);
-    var toggle = actionButton(LANE_LABEL[lane.status] || lane.status, function () {
+    var toggle = actionButton(N.laneToggle, LANE_LABEL[lane.status] || lane.status, function () {
       board.toggleLane(lane.status);
     });
-    toggle.className = N.laneToggle;
     toggle.setAttribute("aria-expanded", "true");
     toggle.setAttribute("aria-controls", "lane-" + lane.status);
     toggle.id = "lane-head-" + lane.status;
@@ -508,7 +514,6 @@ __RUNTIME__
   board.el = el;
   board.typing = typing;
   board.chip = chip;
-  board.actionButton = actionButton;
   board.ago = ago;
   board.findCard = findCard;
   board.drawnCards = drawnCards;

package/extensions/board/view/styles.ts

@@ -77,7 +77,7 @@ ${WEB_COMPONENTS_CSS}
 .board-card[hidden]{display:none}
 .board-card__head{display:flex;align-items:baseline;gap:var(--space-2);margin:0;min-width:0}
 .board-card__id{font:var(--fs-xs) var(--font-mono);color:var(--dim)}
-.board-card__title{margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:var(--fw-semibold) var(--fs-base)/var(--lh-snug) var(--font-ui);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.board-card__title{margin:0;padding:0;border:0;background:none;text-align:left;cursor:pointer;font:var(--fw-semibold) var(--fs-base)/var(--lh-snug) var(--font-ui);color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .board-card__title:hover{color:var(--accent)}
 /* Finished work recedes: it is history, and the live lanes should not compete with it. */
 .board-card[data-status="done"] .board-card__title{color:var(--muted)}
@@ -85,6 +85,12 @@ ${WEB_COMPONENTS_CSS}
 .board-card[data-status="done"] .bf-chip--accent{color:var(--muted);border-color:var(--border)}
 .board-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0;font:var(--fs-xs) var(--font-ui);color:var(--muted)}
 .board-card__paths{display:flex;flex-wrap:wrap;gap:var(--space-1);margin:0;padding:0;list-style:none}
+/* A chip is one line and nowrap by design, so an owner label or a path longer than the card
+   would spill past its border and across the lane beside it: clipped to the card instead,
+   with the whole of it on the hover title the renderer sets. The list item has to be the one
+   that shrinks, because a flex item's automatic minimum is its chip's width. */
+.board-card__paths li{min-width:0;max-width:100%}
+.board-card .bf-chip{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
 .board-card__reason{margin:0;font:var(--fs-sm)/var(--lh-snug) var(--font-ui);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
 .board-card__reason--blocked{color:var(--danger)}
 .board-card__reason--unplanned{color:var(--warn)}

package/extensions/bytefly/footer/config.ts

@@ -28,16 +28,13 @@ export const CONFIG = {
 		branch: GLYPHS.branch,
 		detached: GLYPHS.detached,
 		worktree: GLYPHS.worktree,
-		board: GLYPHS.board,
-		browse: GLYPHS.browse,
+		http: GLYPHS.http,
 		delegation: GLYPHS.delegation,
 	},
 	/** Status key the worktree extension uses; routed to line 1's right zone. */
 	worktreeStatusKey: STATUS_KEYS.worktree,
-	/** Status key the board extension publishes its page port under. */
-	boardStatusKey: STATUS_KEYS.board,
-	/** Status key the file-browse extension uses; routed to line 1's right zone. */
-	browseStatusKey: STATUS_KEYS.browse,
+	/** Status key `serve` publishes the session's one page port under. */
+	httpStatusKey: STATUS_KEYS.http,
 	/** Status key whose ` · detail` suffix (the plan file name) is dropped. */
 	planStatusKey: STATUS_KEYS.planMode,
 	/**

package/extensions/bytefly/footer/render/footer.ts

@@ -9,14 +9,25 @@
 
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import type { Component } from "@earendil-works/pi-tui";
+import { RenderCache } from "../../../../lib/tui/render-cache.ts";
+import { snapshotKey } from "./key.ts";
 import { renderLine } from "./layout.ts";
 import { buildLines } from "./lines.ts";
 import type { FooterData, StatusSnapshot, TuiLike } from "../types.ts";
 
-/** A two-line, width-adaptive status bar. */
+/**
+ * A two-line, width-adaptive status bar.
+ *
+ * The bar is derived from a snapshot the reader rebuilds every frame, so it memoizes on a
+ * key rather than on the snapshot's identity: the width, the theme object (its strings are
+ * what the memo holds), and `snapshotKey`'s walk over every field the bar could draw. A
+ * frame where nothing moved costs the key and a comparison; a frame that moved pays the key
+ * as well, which is why the key is measured against the build it saves.
+ */
 class StatusBar implements Component {
 	/** Unsubscribes the branch watcher; set by `createFooter`. */
 	dispose?: () => void;
+	private readonly cache = new RenderCache();
 
 	constructor(
 		private readonly read: () => StatusSnapshot,
@@ -25,15 +36,18 @@ class StatusBar implements Component {
 	) {}
 
 	invalidate(): void {
-		// The bar recomputes from a fresh snapshot each render, so there is
-		// nothing cached to clear. Theme-dependent strings are built in render.
+		// Pi calls this on a theme change; the key holds the theme's identity too, so this
+		// is what drops themed strings a rebuild would otherwise keep.
+		this.cache.invalidate();
 	}
 
 	render(width: number): string[] {
 		const snapshot = this.read();
 		const theme = this.getTheme();
 		const target = Math.max(1, width);
-		return buildLines(snapshot, theme, this.home).map((line) => renderLine(line, target, theme));
+		return this.cache.keyed([target, theme, snapshotKey(snapshot)], () =>
+			buildLines(snapshot, theme, this.home).map((line) => renderLine(line, target, theme)),
+		);
 	}
 }
 

package/extensions/bytefly/footer/render/key.ts

@@ -0,0 +1,46 @@
+/**
+ * A key for one status snapshot: everything the bar draws, and nothing about identity.
+ *
+ * The footer repaints on every frame, and its snapshot is a fresh object each time — the
+ * reader rebuilds it from the session and the host, and prices only what moved — so a memo
+ * cannot key on the snapshot itself. It keys on this string instead, and this string is
+ * derived from the snapshot's own shape: object keys sorted, a `Map` walked as sorted
+ * entries, a list by its items, a primitive by its value.
+ *
+ * That derivation is the point. A hand-written list of the fields a bar reads is exactly
+ * the kind of list that goes stale silently — a field added to `StatusSnapshot` and
+ * forgotten here is a bar that keeps showing the old value until something else moves —
+ * whereas a walk over the object cannot miss a field that exists.
+ *
+ * Lengths prefix strings and collection sizes, so no two different snapshots can produce
+ * one key by running values together.
+ */
+
+import type { StatusSnapshot } from "../types.ts";
+
+/** The key for one snapshot: equal strings mean a frame would draw the same bar. */
+export function snapshotKey(snapshot: StatusSnapshot): string {
+	return keyPart(snapshot);
+}
+
+/** One value's part of the key, tagged by kind so `1` and `"1"` cannot collide. */
+function keyPart(value: unknown): string {
+	if (value === undefined) return "~";
+	if (value === null) return "n";
+	if (typeof value === "number") return String(value);
+	if (typeof value === "boolean") return value ? "t" : "f";
+	if (typeof value === "string") return `${value.length}:${value}`;
+	if (value instanceof Map) {
+		// Sorted, because a Map's insertion order is not a fact about what the bar draws.
+		const entries = [...value.entries()].map(([key, entry]) => `${keyPart(String(key))}=${keyPart(entry)}`);
+		entries.sort();
+		return `m${value.size}{${entries.join(",")}}`;
+	}
+	if (Array.isArray(value)) return `a${value.length}[${value.map(keyPart).join(",")}]`;
+	if (typeof value === "object") {
+		const record = value as Record<string, unknown>;
+		const keys = Object.keys(record).sort();
+		return `o${keys.length}{${keys.map((key) => `${key}:${keyPart(record[key])}`).join(",")}}`;
+	}
+	return String(value);
+}

package/extensions/bytefly/footer/render/layout.ts

@@ -125,16 +125,26 @@ export function renderLine(spec: LineSpec, width: number, theme: Theme): string
 	const target = Math.max(1, width);
 	const states = makeStates(spec);
 
+	// Each pass keeps the line it measured, so a decision never costs a second assembly and
+	// a line that already fits never reaches `truncateToWidth` — which walks the string
+	// character by character (14 µs on a footer line, against 0.2 µs for the width scan) and
+	// is the whole reason this function was measurable per frame.
+	let line = assemble(states, target);
+	let measured = visibleWidth(line);
 	let guard = 0;
-	while (visibleWidth(assemble(states, target)) > target && guard++ < states.length * 8 + 16) {
+	while (measured > target && guard++ < states.length * 8 + 16) {
 		if (!reduceOnce(states)) break;
+		line = assemble(states, target);
+		measured = visibleWidth(line);
 	}
 	// Only once every segment is at its floor do we shrink separators, so the
 	// truncation ellipsis never replaces a separator's content and adjacent
 	// segments always keep at least one column of padding between them.
-	while (visibleWidth(assemble(states, target)) > target) {
+	while (measured > target) {
 		if (!collapseSeparator(states)) break;
+		line = assemble(states, target);
+		measured = visibleWidth(line);
 	}
 
-	return truncateToWidth(assemble(states, target), target, paint(theme, "faint", "…"));
+	return measured > target ? truncateToWidth(line, target, paint(theme, "faint", "…")) : line;
 }

package/extensions/bytefly/footer/render/lines.ts

@@ -2,7 +2,7 @@
  * Turn a `StatusSnapshot` into the two footer lines.
  *
  * Line 1 — state: left `pwd` and the session name, right the alert, the mode
- * chips, then `⎇ branch · ⑂ worktree · ⊞ 5043 · ◉ 4909`. Line 2 — meters: left
+ * chips, then `⎇ branch · ⑂ worktree · ◉ 4780`. Line 2 — meters: left
  * the context gauge and usage, right the model and thinking level.
  *
  * The split is one job per row. The state chips change while a session runs, so
@@ -46,9 +46,9 @@ export function buildLines(snapshot: StatusSnapshot, theme: Theme, home: string
 			modesSegment(snapshot, theme),
 			branchSegment(snapshot, theme),
 			worktreeSegment(snapshot, theme),
-			// Last, so the two ports form one run behind the location chips. A page starting
-			// or stopping then changes the end of the line, and `⎇ branch · ⑂ worktree` stays
-			// the adjacent pair a reader scans for where the work lands.
+			// Last, so the page port rides behind the location chips. A page starting or
+			// stopping then changes the end of the line, and `⎇ branch · ⑂ worktree` stays the
+			// adjacent pair a reader scans for where the work lands.
 			portsSegment(snapshot, theme),
 		]),
 	};

package/extensions/bytefly/footer/render/segments.ts

@@ -101,41 +101,23 @@ export function worktreeSegment(snapshot: StatusSnapshot, theme: Theme): Segment
 }
 
 /**
- * The pages this session is serving, as one cluster.
+ * The session's page port, while anything is served on it.
  *
- * The board and file-browse chips say one thing — a page is up on this port — so they
- * share a segment, a weight, and a floor. Read separately they were a mode chip and a
- * port chip: `▤ 5043` rode the mode weight and outlived `◉ 4909` by four columns, which
- * made two facts of the same kind look like two kinds of fact. Shared, they also drop
- * together, and the surviving form is the pair of glyphs, so a bar too narrow for a port
- * still says a page is up.
+ * One server serves every page of a session, so there is one number to draw: the chip
+ * the `serve` extension publishes, with the glyph alone as the form that survives a bar
+ * too narrow for a port.
  */
 export function portsSegment(snapshot: StatusSnapshot, theme: Theme): Segment | null {
-	const open = [
-		{ key: CONFIG.boardStatusKey, icon: CONFIG.icons.board },
-		{ key: CONFIG.browseStatusKey, icon: CONFIG.icons.browse },
-	]
-		.filter((entry) => snapshot.statuses.has(entry.key))
-		.map((entry) => ({
-			icon: paint(theme, "ok", entry.icon),
-			port: chipLabel(snapshot.statuses.get(entry.key) ?? ""),
-		}));
-	if (open.length === 0) return null;
-	const joined = (separator: string): string =>
-		open
-			.map((entry) => (entry.port ? `${entry.icon} ${paint(theme, "accent", entry.port)}` : entry.icon))
-			.join(separator);
-	// Widest first: the item separator, then a single space, then the glyphs alone. A
-	// one-page session has two forms; two pages sharing a padded bar have three.
-	const forms = [
-		...new Set([joined(faint(theme, CONFIG.separators.item)), joined(" "), open.map((entry) => entry.icon).join(" ")]),
-	];
+	const chip = snapshot.statuses.get(CONFIG.httpStatusKey);
+	if (chip === undefined) return null;
+	const icon = paint(theme, "ok", CONFIG.icons.http);
+	const port = chipLabel(chip);
 	return {
 		id: "ports",
 		weight: 3,
 		droppable: true,
 		separator: faint(theme, CONFIG.separators.item),
-		forms,
+		forms: [...new Set([port ? `${icon} ${paint(theme, "accent", port)}` : icon, icon])],
 	};
 }
 
@@ -171,13 +153,7 @@ export function alertSegment(snapshot: StatusSnapshot, theme: Theme): Segment |
 
 export function modesSegment(snapshot: StatusSnapshot, theme: Theme): Segment | null {
 	const others = [...snapshot.statuses.entries()]
-		.filter(
-			([key]) =>
-				key !== CONFIG.worktreeStatusKey &&
-				key !== CONFIG.boardStatusKey &&
-				key !== CONFIG.browseStatusKey &&
-				!isAlert(key),
-		)
+		.filter(([key]) => key !== CONFIG.worktreeStatusKey && key !== CONFIG.httpStatusKey && !isAlert(key))
 		.sort(([a], [b]) => a.localeCompare(b))
 		.map(([key, value]) => {
 			const status = sanitize(value);