@timqi/pier 0.0.1 → 0.0.3

package/dist/web/public/icon.svg

@@ -1,19 +1,37 @@
-<!-- Pier's mark: a dock in profile over water. Kept to four solid shapes so it
-     still reads at 16px in a browser tab. Source of truth for the PNG icons
-     next to it (favicon fallback, apple-touch, manifest).
+<!-- Pier's mark: a dock in profile over water. Two shapes only — the dock and
+     the wave — so it still reads at 16px in a browser tab. Source of truth for
+     the PNG icons next to it (favicon fallback, apple-touch, manifest).
 
      The plate is a squircle, not a rect: a superellipse outline (the iOS /
      Android app-icon silhouette) reads as an app rather than as a coloured
-     tile. Platforms that apply their own mask get the square PNGs instead. -->
+     tile. Platforms that apply their own mask get the square PNGs instead.
+
+     Deck and piers are one closed path, and the joint is where every earlier
+     version failed: three rects under a bar read as loose pills whatever their
+     corner radius, and a concave fillet only softened the seam. So the gap
+     carries the shape instead — each opening is a flat-topped slot (shoulders
+     of 2.3, not the half-circle this started as, which bulged the openings
+     into eyes) between vertical pier flanks. The deck is the subject: 8 deep
+     against pier width 7, and dead flat — bowing it either way turned it into
+     a face (crowned it was a brow, sagged it was a frown). Cuteness is spent
+     on the parts instead: nearly round feet, flanks that splay 0.3, a wave
+     with the same weight as the piers.
+
+     The white mark is centred on the plate as one bounding box (hence the
+     translate, the deck's top edge at y=0 and the wave's stroke edge ending
+     the box) — not shape by shape, which is how it first shipped sitting
+     visibly low. -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
   <path fill="#4f46e5"
     d="M32 0c16 0 24 0 28 4s4 12 4 28-0 24-4 28-12 4-28 4-24 0-28-4-4-12-4-28 0-24 4-28 12-4 28-4Z" />
-  <g fill="#fff">
-    <rect x="11" y="23" width="42" height="6.5" rx="1.5" />
-    <rect x="15" y="29.5" width="5.5" height="16" rx="1" />
-    <rect x="29.25" y="29.5" width="5.5" height="16" rx="1" />
-    <rect x="43.5" y="29.5" width="5.5" height="16" rx="1" />
-  </g>
-  <path d="M11 51q7-4 14 0t14 0 14 0" fill="none" stroke="#fff" stroke-width="4"
+  <path fill="#fff" transform="translate(0 14.5)" d="M10 3 A3 3 0 0 1 13 0 L51 0
+    A3 3 0 0 1 54 3 L54 5 A3 3 0 0 1 51 8
+    L51.3 19.3 A3.2 3.2 0 0 1 48.1 22.5 L47.2 22.5 A3.2 3.2 0 0 1 44 19.3
+    L44 10.3 A2.3 2.3 0 0 0 41.7 8 L37.8 8 A2.3 2.3 0 0 0 35.5 10.3
+    L35.5 19.3 A3.2 3.2 0 0 1 32.3 22.5 L31.7 22.5 A3.2 3.2 0 0 1 28.5 19.3
+    L28.5 10.3 A2.3 2.3 0 0 0 26.2 8 L22.3 8 A2.3 2.3 0 0 0 20 10.3
+    L20 19.3 A3.2 3.2 0 0 1 16.8 22.5 L15.9 22.5 A3.2 3.2 0 0 1 12.7 19.3
+    L13 8 A3 3 0 0 1 10 5 Z" />
+  <path d="M12.5 44.5q6.5-5 13 0t13 0 13 0" fill="none" stroke="#fff" stroke-width="5"
     stroke-linecap="round" opacity=".85" />
 </svg>

package/dist/web/public/index.html

@@ -6,8 +6,7 @@
        under an iPhone's home indicator. -->
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
   <meta name="theme-color" content="#fafafa" />
-  <!-- Installed as a home-screen app, this is also what makes Web Push
-       possible on iOS — notifications there require a standalone web app. -->
+  <!-- Installed as a home-screen app: standalone window, own icon. -->
   <link rel="manifest" href="/manifest.webmanifest" />
   <!-- SVG first (scales to any tab/bookmark size), 32px PNG for the engines
        that still ignore it. iOS wants an opaque square and rounds it itself. -->
@@ -17,8 +16,8 @@
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <meta name="apple-mobile-web-app-title" content="Pier" />
   <title>Pier</title>
-  <script type="module" crossorigin src="/assets/index-DAgP1Gq8.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-8CinH1uR.css">
+  <script type="module" crossorigin src="/assets/index-fASxMPr6.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-cCIuQnDr.css">
 </head>
 <!-- The document never scrolls: this is a fixed-viewport workbench, and every
      scrollable region is an inner pane. h-dvh, not h-screen, because 100vh can
@@ -28,9 +27,29 @@
   <!-- Below md the aside leaves the grid and slides in as a drawer (style.css);
        the scrim is its dismiss target and never paints on desktop. -->
   <div id="drawer-scrim" class="fixed inset-0 z-30 hidden bg-black/25 md:hidden"></div>
+  <!-- Desktop only: one sidebar toggle. Fixed in the title band — style.css
+       moves it between the rail's top-right (open) and main's top-left
+       (closed), flipping the chevron, so expand and collapse are the same
+       control in the same band. -->
+  <button type="button" id="rail-toggle" aria-label="Toggle sidebar"
+    class="fixed top-1.5 z-40 hidden h-7 w-7 cursor-pointer items-center justify-center rounded-md text-neutral-400 hover:bg-neutral-200 hover:text-neutral-700 md:flex">
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5">
+      <path d="M9.5 4 5.5 8l4 4" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  </button>
   <aside id="sidebar" class="flex flex-col overflow-hidden border-r border-neutral-200 bg-neutral-50">
-    <header class="flex items-center justify-between gap-2 px-3 py-2">
+    <header class="flex items-center gap-2 px-3 py-2">
+      <!-- The same mark as the tab and the home-screen icon, so an installed
+           Pier looks like the thing you installed. -->
+      <img src="/icon.svg" alt="" width="20" height="20" class="h-5 w-5 flex-none" />
       <h1 class="text-[15px] font-semibold tracking-tight">Pier</h1>
+      <!-- A link, not a label: AGPL-3.0 section 13 asks a network service to
+           point its users at the source it is running. Beside the title
+           because a version is something you look up, not something you find
+           by scrolling to the bottom. -->
+      <a id="version" href="https://github.com/timqi/pier" target="_blank" rel="noreferrer"
+        title="Pier is free software (AGPL-3.0) — the source of what you are using"
+        class="font-mono text-[11px] text-neutral-400 hover:text-neutral-700 hover:underline"></a>
     </header>
     <details id="console-section" open class="flex-none border-b border-neutral-200/70">
       <summary class="flex cursor-pointer select-none items-center gap-1 px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-neutral-500 hover:bg-neutral-100">
@@ -38,21 +57,28 @@
       </summary>
       <ul class="pb-1 text-[13.5px]">
         <li><button type="button" id="open-activity"
-          class="block w-full cursor-pointer py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">Activity</button></li>
-        <li><button type="button" id="open-config"
-          class="block w-full cursor-pointer py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">Configuration</button></li>
-        <li><button type="button" id="open-channels"
-          class="block w-full cursor-pointer py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">Channels</button></li>
+          class="flex w-full cursor-pointer items-center gap-2 py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5 flex-none text-neutral-400">
+            <path d="M1.5 8h3l2-4.5 3 9L11.5 8h3" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>Activity</button></li>
         <li><button type="button" id="open-boards"
-          class="block w-full cursor-pointer py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">Boards</button></li>
+          class="flex w-full cursor-pointer items-center gap-2 py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5 flex-none text-neutral-400">
+            <rect x="2" y="2" width="12" height="12" rx="1.5" /><path d="M2 6.5h12M6.5 6.5V14" />
+          </svg>Boards</button></li>
         <li><button type="button" id="open-settings"
-          class="block w-full cursor-pointer py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">Settings</button></li>
+          class="flex w-full cursor-pointer items-center gap-2 py-1.5 pl-6 pr-3 text-left hover:bg-neutral-100">
+          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" class="h-3.5 w-3.5 flex-none text-neutral-400">
+            <!-- Teeth every 60° about (8,8); the hub is that same centre. -->
+            <path d="M6.8 2.2h2.4l.32 1.6a4.9 4.9 0 0 1 1.36.79l1.55-.53 1.2 2.08-1.23 1.07a4.9 4.9 0 0 1 0 1.58l1.23 1.07-1.2 2.08-1.55-.53a4.9 4.9 0 0 1-1.36.79l-.32 1.6H6.8l-.32-1.6a4.9 4.9 0 0 1-1.36-.79l-1.55.53-1.2-2.08 1.23-1.07a4.9 4.9 0 0 1 0-1.58L2.37 6.14l1.2-2.08 1.55.53a4.9 4.9 0 0 1 1.36-.79z" stroke-linejoin="round" />
+            <circle cx="8" cy="8" r="1.9" />
+          </svg>Settings</button></li>
       </ul>
     </details>
     <div class="flex items-center gap-1 px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-neutral-500">
       Projects
-      <button type="button" id="open-archive" title="Search all sessions"
-        class="icon-btn ml-auto" aria-label="Search all sessions">
+      <button type="button" id="open-archive"
+        class="icon-btn ml-auto" aria-label="Search sessions and Console">
         <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" class="h-3.5 w-3.5">
           <circle cx="7" cy="7" r="4.25" /><path d="M10.2 10.2 14 14" stroke-linecap="round" />
         </svg>
@@ -66,15 +92,6 @@
       </button>
     </div>
     <div id="project-tree" class="flex-1 overflow-y-auto text-[13.5px]"></div>
-    <footer class="flex flex-none items-center gap-2 border-t border-neutral-200 px-3 py-1.5 text-[11px] text-neutral-400">
-      <button type="button" id="notify-toggle" title="Notify me when a turn finishes"
-        class="cursor-pointer rounded px-1 hover:bg-neutral-200 hover:text-neutral-700">Notify</button>
-      <!-- A link, not a label: AGPL-3.0 section 13 asks a network service to
-           point its users at the source it is running. -->
-      <a id="version" href="https://github.com/timqi/pier" target="_blank" rel="noreferrer"
-        title="Pier is free software (AGPL-3.0) — the source of what you are using"
-        class="ml-auto font-mono hover:text-neutral-700 hover:underline"></a>
-    </footer>
   </aside>
 
   <main class="flex min-w-0 flex-col overflow-hidden">
@@ -93,18 +110,16 @@
     </header>
     <section id="activity-view" class="hidden min-h-0 flex-1 flex-col"></section>
     <section id="tasks-view" class="hidden min-h-0 flex-1 flex-col"></section>
-    <section id="config-view" class="hidden min-h-0 flex-1 flex-col"></section>
-    <section id="channels-view" class="hidden min-h-0 flex-1 flex-col"></section>
     <section id="boards-view" class="hidden min-h-0 flex-1 flex-col"></section>
     <section id="settings-view" class="hidden min-h-0 flex-1 flex-col"></section>
+    <section id="files-view" class="hidden min-h-0 flex-1 flex-col"></section>
     <header id="chat-header" class="flex h-10 flex-none items-center gap-2 border-b border-neutral-200 px-4 max-md:hidden">
       <span id="chat-title" class="truncate font-medium"></span>
       <!-- Right cluster: meta chips sit flush against the ⋯ button. Two
            ml-autos would split the free space, so one wrapper owns it. -->
       <div class="ml-auto flex flex-none items-center gap-1.5">
-        <!-- Inline session meta: a resident token chip; model + reasoning
-             unfold to its left on hover. Costs the header no extra height. -->
-        <div id="session-meta" class="group hidden flex-none items-center gap-1.5 text-[11px]"></div>
+        <!-- Inline session meta: model · reasoning · current context size. -->
+        <div id="session-meta" class="hidden flex-none items-center gap-1 text-[11px]"></div>
         <button type="button" id="chat-menu" title="Session actions" aria-label="Session actions"
           class="icon-btn">⋯</button>
       </div>
@@ -155,9 +170,9 @@
         <div id="image-strip" class="hidden flex-wrap gap-2 px-1 pb-1.5 pt-1"></div>
         <!-- items-end keeps the icons on the bottom row while the textarea grows upward -->
         <div class="flex items-end gap-1.5">
-          <button type="button" id="attach" title="Attach image (or paste / drop)"
+          <button type="button" id="attach" title="Attach file (or paste / drop)"
             class="flex h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-lg text-[17px] leading-none text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600">+</button>
-          <input id="attach-input" type="file" accept="image/*" multiple class="hidden" />
+          <input id="attach-input" type="file" multiple class="hidden" />
           <textarea id="input" rows="1"
             class="block max-h-48 min-w-0 flex-1 resize-none bg-transparent px-1 py-0.5 focus:outline-none"
             placeholder="Message…"></textarea>
@@ -202,9 +217,12 @@
     </form>
   </dialog>
 
-  <dialog id="archive-dialog" class="m-auto w-[35rem] max-w-[90vw] rounded-xl border border-neutral-200 p-0 shadow-xl backdrop:bg-black/20">
+  <!-- Not m-auto: a palette that grows downward as you type should not also
+       drift upward to stay centred. Pinned near the top instead, which is
+       where the eye already is and where every other ⌘K lives. -->
+  <dialog id="archive-dialog" class="mx-auto mb-auto mt-[12vh] w-[35rem] max-w-[90vw] rounded-xl border border-neutral-200 p-0 shadow-xl backdrop:bg-black/20">
     <div class="flex items-center gap-2 border-b border-neutral-200 px-3 py-2">
-      <input id="archive-search" type="text" placeholder="Search all sessions…"
+      <input id="archive-search" type="text" placeholder="Search sessions and Console…"
         class="w-full bg-transparent text-[14px] focus:outline-none" />
       <span id="archive-count" class="flex-none rounded bg-neutral-100 px-1.5 text-[11px] text-neutral-500"></span>
       <button type="button" id="archive-close" class="btn flex-none text-[12px]">Close</button>

package/dist/web/server.js

@@ -1,42 +1,36 @@
 // Web workbench backend: REST + SSE, a pure consumer of core.
 // See docs/design/03-web-workbench.md for the route contract.
-import { relative } from "node:path";
+import { hostname } from "node:os";
+import { readFile } from "node:fs/promises";
+import { join, relative } from "node:path";
 import { fileURLToPath } from "node:url";
 import { serveStatic } from "@hono/node-server/serve-static";
 import { Hono } from "hono";
 import { streamSSE } from "hono/streaming";
 import { EventHub } from "../core/hub.js";
-import { Router } from "../core/router.js";
 import { logger } from "../log.js";
+import { Router } from "../core/router.js";
+import { registerExplorerRoutes } from "./explorer.js";
 import { guarded, registerFileRoutes } from "./files.js";
 import { isThinkingLevel } from "../core/types.js";
-import { normalizePublicUrl } from "../settings.js";
+import { saveInbound } from "../core/inbox.js";
+import { MAX_INBOUND_BYTES } from "../core/inbound-file.js";
+import { registerInstanceRoutes } from "./instance.js";
+import { registerProviderRoutes } from "./providers.js";
+const log = logger("web");
+/** What goes in front of `Pier` in the tab: `$PIER_TITLE`, then the machine.
+ *  The label leads because a tab is narrow and "which instance is this" is the
+ *  question it has to answer before the browser truncates — `staging - g1`. */
+export const tabPrefix = (title, host) => [title?.trim(), host.trim()].filter(Boolean).join(" - ").slice(0, 60);
+/** `<title>staging - g1 - Pier</title>`. Nothing to say, or a shell that does
+ *  not say `Pier`: leave it exactly as built. */
+export const withTabPrefix = (html, prefix) => prefix
+    ? html.replace("<title>Pier</title>", `<title>${prefix.replace(/&/g, "&amp;").replace(/</g, "&lt;")} - Pier</title>`)
+    : html;
 const HEARTBEAT_MS = 15_000;
-/** Client reports per minute, for the whole server: a browser bug can fire in
- *  a loop, and the journal is shared with everything else Pier says. */
-const CLIENT_LOG_PER_MINUTE = 60;
-const MAX_IMAGES = 8;
-const MAX_IMAGE_BYTES = 8 * 1024 * 1024; // per image, base64 length ≈ bytes × 4/3
-/** Validate at the seam: malformed attachments are rejected, never half-sent. */
-function parseImages(raw) {
-    if (raw === undefined)
-        return [];
-    if (!Array.isArray(raw) || raw.length > MAX_IMAGES)
-        return { error: "invalid images" };
-    const images = [];
-    for (const i of raw) {
-        if (typeof i?.data !== "string" ||
-            !i.data ||
-            i.data.length > (MAX_IMAGE_BYTES * 4) / 3 ||
-            typeof i?.mimeType !== "string" ||
-            !i.mimeType.startsWith("image/")) {
-            return { error: "invalid images" };
-        }
-        images.push({ data: i.data, mimeType: i.mimeType });
-    }
-    return images;
-}
-export function createServer({ factory, router, hub, sessions: state, config, settings, secrets, onUnlocked, backgroundRuns }) {
+// Canonical base64 only: Buffer.from(.., "base64") happily "decodes" garbage.
+const BASE64_RE = /^[A-Za-z0-9+/]+={0,2}$/;
+export function createServer({ factory, router, hub, sessions: state, config, providers, settings, secrets, onUnlocked, updates, updater, backgroundRuns, }) {
     const app = new Hono();
     // A finished turn marks its session unread until some client reports it was
     // seen (session selected + tab visible → POST read below). Server-side so
@@ -68,6 +62,10 @@ export function createServer({ factory, router, hub, sessions: state, config, se
         const sessions = await factory.list();
         for (const s of sessions)
             nascent.delete(s.id);
+        // A session created but never prompted would otherwise be listed forever.
+        for (const [id, n] of nascent)
+            if (Date.now() - n.createdAt > 86_400_000)
+                nascent.delete(id);
         return c.json([...[...nascent].map(([id, n]) => ({ id, ...n })), ...sessions].map((s) => ({
             ...s,
             state: router.stateOf(s.id) ?? "idle",
@@ -103,6 +101,8 @@ export function createServer({ factory, router, hub, sessions: state, config, se
         const body = await c.req.json().catch(() => null);
         if (typeof body?.pinned !== "boolean")
             return c.json({ error: "pinned required" }, 400);
+        // The id is trusted: checking existence costs a session list per click,
+        // and the surface is operator-authenticated. Worst case is a stray row.
         state.set("pinned", c.req.param("id"), body.pinned);
         hub.emitWorkspace({ type: "sessions-changed" });
         return c.json({ pinned: body.pinned });
@@ -123,20 +123,24 @@ export function createServer({ factory, router, hub, sessions: state, config, se
             backgroundRuns: backgroundRuns?.(id) ?? [],
         });
     });
-    // Transcript images by their history ordinal: the snapshot ships refs, the
-    // browser pulls (and caches) the bytes only for what it renders.
-    guarded(app, "GET", "/api/sessions/:id/images/:ordinal", 404, async (c) => {
-        const ordinal = Number(c.req.param("ordinal"));
-        if (!Number.isInteger(ordinal) || ordinal < 0)
-            return c.json({ error: "bad ordinal" }, 400);
-        const session = await ensure(c.req.param("id"));
-        const image = await session.image(ordinal);
-        if (!image)
-            return c.json({ error: "no such image" }, 404);
-        return c.body(Buffer.from(image.data, "base64"), 200, {
-            "content-type": image.mimeType,
-            "cache-control": "private, max-age=3600",
-        });
+    // Composer attachments: bytes land in the inbox, the message carries the
+    // path as a `[name](file:///…)` line the client builds itself — upload
+    // first, so the text it sends (and optimistically renders) is final.
+    guarded(app, "POST", "/api/inbox", 400, async (c) => {
+        const body = await c.req.json().catch(() => null);
+        if (typeof body?.data !== "string" ||
+            !body.data ||
+            // Cheap ceiling before decoding; the exact check is on the bytes.
+            body.data.length > Math.ceil(MAX_INBOUND_BYTES / 3) * 4 + 4 ||
+            !BASE64_RE.test(body.data) ||
+            typeof body?.mimeType !== "string") {
+            return c.json({ error: "invalid file" }, 400);
+        }
+        const name = typeof body.name === "string" ? body.name : undefined;
+        const bytes = Buffer.from(body.data, "base64");
+        if (bytes.length > MAX_INBOUND_BYTES)
+            return c.json({ error: "invalid file" }, 400);
+        return c.json({ path: await saveInbound("web", name, body.mimeType, bytes) });
     });
     // Backend model catalog, no session needed: surfaces that configure what a
     // *future* session launches with (IM chats) have none to ask.
@@ -180,21 +184,14 @@ export function createServer({ factory, router, hub, sessions: state, config, se
     app.post("/api/sessions/:id/messages", async (c) => {
         const id = c.req.param("id");
         const body = await c.req.json().catch(() => null);
-        if (!body || typeof body.text !== "string") {
+        if (!body || typeof body.text !== "string" || !body.text.trim()) {
             return c.json({ error: "text required" }, 400);
         }
-        const images = parseImages(body.images);
-        if ("error" in images)
-            return c.json({ error: images.error }, 400);
-        if (!body.text.trim() && images.length === 0) {
-            return c.json({ error: "text or images required" }, 400);
-        }
         const mode = body.mode === "steer" || body.mode === "followUp" ? body.mode : "auto";
         const { sessionId } = await router.dispatch({
             key: { channelId: "web", conversationId: id },
             senderId: "web",
             text: body.text,
-            images: images.length ? images : undefined,
             mode,
         });
         return c.json({ sessionId }, 202);
@@ -209,6 +206,10 @@ export function createServer({ factory, router, hub, sessions: state, config, se
         if (!Number.isInteger(index) || index < 0 || typeof body?.text !== "string" || !body.text.trim()) {
             return c.json({ error: "index and text required" }, 400);
         }
+        // Asked before touching anything: the dispatch below would be refused by
+        // the drain gate, and by then the transcript is already rewound.
+        if (router.isDraining())
+            return c.json({ error: "Pier is restarting — try again in a moment" }, 503);
         const session = await ensure(id);
         if (session.state === "streaming")
             return c.json({ error: "busy — stop the turn first" }, 409);
@@ -231,6 +232,9 @@ export function createServer({ factory, router, hub, sessions: state, config, se
         if (mode !== "steer" && mode !== "restart") {
             return c.json({ error: "mode must be steer or restart" }, 400);
         }
+        // Same reason as edit above: a refused dispatch must not cost the queue.
+        if (router.isDraining())
+            return c.json({ error: "Pier is restarting — try again in a moment" }, 503);
         const session = await ensure(id);
         const { steering, followUp } = await session.clearQueue();
         const text = [...steering, ...followUp].join("\n").trim();
@@ -252,30 +256,6 @@ export function createServer({ factory, router, hub, sessions: state, config, se
         const { steering, followUp } = await session.clearQueue();
         return c.json({ messages: [...steering, ...followUp] });
     });
-    // The browser's half of the log. A workbench that threw after the response
-    // left the server is otherwise invisible here (ui/report.ts) — this is the
-    // one route whose entire purpose is to make it visible.
-    const clientLog = logger("client");
-    let reports = [];
-    app.post("/api/client-log", async (c) => {
-        const body = (await c.req.json().catch(() => null));
-        if (typeof body?.message !== "string" || !body.message.trim()) {
-            return c.json({ error: "message required" }, 400);
-        }
-        const now = Date.now();
-        reports = reports.filter((at) => now - at < 60_000);
-        if (reports.length >= CLIENT_LOG_PER_MINUTE)
-            return c.body(null, 429);
-        reports.push(now);
-        const cap = (value, max) => typeof value === "string" ? value.slice(0, max) : "";
-        const where = cap(body.view, 120);
-        const stack = cap(body.stack, 2000);
-        // One line, ua included: "only on iOS" is the answer half these questions
-        // have, and the report is the only place it exists.
-        clientLog.warn(`${cap(body.message, 500)} [${where || "/"}] ${cap(c.req.header("user-agent"), 160)}` +
-            (stack ? `\n${stack}` : ""));
-        return c.body(null, 204);
-    });
     app.post("/api/sessions/:id/abort", async (c) => {
         const id = c.req.param("id");
         await router.abort(id);
@@ -284,7 +264,8 @@ export function createServer({ factory, router, hub, sessions: state, config, se
     // Workspace stream: one per client, keeps every session list in sync
     // (created/pinned → re-list, run state → patch) without polling.
     app.get("/api/events", (c) => streamSSE(c, async (stream) => {
-        const unsubscribe = hub.subscribeWorkspace((e) => void stream.writeSSE({ data: JSON.stringify(e) }));
+        // A write to a torn-down stream must not become an unhandled rejection.
+        const unsubscribe = hub.subscribeWorkspace((e) => void stream.writeSSE({ data: JSON.stringify(e) }).catch(() => { }));
         stream.onAbort(unsubscribe);
         while (!stream.aborted) {
             await stream.sleep(HEARTBEAT_MS);
@@ -300,7 +281,8 @@ export function createServer({ factory, router, hub, sessions: state, config, se
             const send = (e) => stream.writeSSE({ id: String(e.seq), data: JSON.stringify(e) });
             for (const e of hub.replay(id, lastId))
                 await send(e);
-            const unsubscribe = hub.subscribe(id, (e) => void send(e));
+            // Same as above: the client may be gone by the time an event fires.
+            const unsubscribe = hub.subscribe(id, (e) => void send(e).catch(() => { }));
             stream.onAbort(unsubscribe);
             // Heartbeat keeps proxies from closing the stream; loop ends on abort.
             while (!stream.aborted) {
@@ -309,58 +291,66 @@ export function createServer({ factory, router, hub, sessions: state, config, se
             }
         });
     });
-    // Instance settings. The password lives behind its own route (web/auth.ts):
-    // it is a credential, and changing it takes the old one.
-    app.get("/api/settings", (c) => c.json(settings.get()));
-    app.put("/api/settings", async (c) => {
-        const body = await c.req.json().catch(() => null);
-        if (typeof body?.publicUrl !== "string")
-            return c.json({ error: "publicUrl required" }, 400);
-        const publicUrl = normalizePublicUrl(body.publicUrl);
-        if (publicUrl === null) {
-            return c.json({ error: "not a URL: expected http(s)://host, no query or fragment" }, 400);
-        }
-        return c.json(settings.setPublicUrl(publicUrl));
-    });
-    // Layer-1 key status and control (Console → Settings → Security). The GET
-    // is what a locked instance shows; unlock is how it recovers without a
-    // restart, and rotate is the only way to change how the KEK is protected.
-    const secretsStatus = () => ({
-        state: secrets.state,
-        mode: secrets.mode ?? null,
-        ...(secrets.state === "locked" ? { reason: secrets.lockedReason } : {}),
-    });
-    app.get("/api/secrets", (c) => c.json(secretsStatus()));
-    app.post("/api/secrets/unlock", async (c) => {
-        try {
-            await secrets.unlock();
-        }
-        catch (err) {
-            return c.json({ error: String(err) }, 500);
-        }
-        onUnlocked?.();
-        return c.json(secretsStatus());
+    // Provider credentials, the agent files and the surface prompt are read when
+    // a session *opens*: a live one keeps what it opened with, so a Console save
+    // would otherwise reach nothing until the idle sweep got around to it half an
+    // hour later. Letting the idle sessions go is what `pier reload` does — the
+    // next message re-opens them with the configuration just written. Watched
+    // included, unlike the background sweep: the session open in the tab that
+    // just saved is the likeliest one to need it. A turn in flight is still never
+    // interrupted; it picks the change up at its next natural eviction.
+    const recycle = (what) => {
+        void router.evictIdle(0, Date.now(), { includeWatched: true })
+            .then((n) => {
+            if (n)
+                log.info(`${what} changed — recycled ${n} idle session(s)`);
+        })
+            .catch((err) => log.error(`recycling sessions after ${what} failed`, err));
+    };
+    registerInstanceRoutes(app, {
+        settings,
+        updates,
+        updater,
+        secrets,
+        onUnlocked,
+        onSettingsChanged: () => recycle("instance settings"),
     });
-    app.post("/api/secrets/rotate", async (c) => {
-        const body = (await c.req.json().catch(() => ({})));
-        if (body.mode !== undefined && body.mode !== "vt" && body.mode !== "file") {
-            return c.json({ error: "mode must be vt or file" }, 400);
-        }
-        try {
-            await secrets.rotateKek(body.mode);
-        }
-        catch (err) {
-            return c.json({ error: String(err) }, 500);
-        }
-        return c.json(secretsStatus());
+    registerProviderRoutes(app, providers, () => recycle("provider configuration"));
+    registerFileRoutes(app, {
+        factory,
+        config,
+        nascentCwd: (id) => nascent.get(id)?.cwd,
+        onConfigWritten: () => recycle("an agent file"),
     });
-    registerFileRoutes(app, { factory, config, nascentCwd: (id) => nascent.get(id)?.cwd });
+    registerExplorerRoutes(app);
     // serveStatic resolves `root` against the *working directory*, and an
     // installed Pier is started from wherever the operator happens to be. The
     // bundle sits beside this module in both trees — src/web/public when tsx
     // runs the source, dist/web/public in a build — so the path is derived from
     // the module and handed over as the relative form the option wants.
     const bundle = fileURLToPath(new URL("./public", import.meta.url));
+    // The tab says which instance this is (`staging - g1 - Pier`): an operator
+    // keeps a workbench open per environment and they are otherwise identical,
+    // and mistaking the test one for production is the mistake worth a few lines.
+    // Both facts are known only at runtime, so they are patched into the shell
+    // here rather than built in — and served behind the auth guard, so a stranger
+    // at /login learns neither. Read once: neither can change under a process.
+    const prefix = tabPrefix(process.env.PIER_TITLE, hostname().split(".")[0] ?? "");
+    let shell = null;
+    app.get("/", async (c, next) => {
+        if (shell === null) {
+            try {
+                shell = withTabPrefix(await readFile(join(bundle, "index.html"), "utf8"), prefix);
+            }
+            catch (err) {
+                // A workbench that will not load is not worth a nicer tab: hand the
+                // request back to the static handler, which answers as it always did.
+                log.warn(`shell unreadable, serving it unpatched: ${String(err)}`);
+                return next();
+            }
+        }
+        return c.html(shell);
+    });
     app.use("/*", serveStatic({ root: relative(process.cwd(), bundle) || "." }));
     return app;
 }