@oharness/server 0.7.1 → 0.9.0

package/dist/server.js

@@ -1,5 +1,6 @@
 import { createServer } from "node:http";
 import { randomUUID, timingSafeEqual } from "node:crypto";
+import { createReadStream } from "node:fs";
 import { readFile, stat } from "node:fs/promises";
 import path from "node:path";
 import { homedir } from "node:os";
@@ -17,6 +18,9 @@ import { visibleText } from "@oharness/engine/core/types.ts";
 import { errorMessage } from "@oharness/engine/core/errors.ts";
 import { officialBaseUrl, officialTeam } from "@oharness/engine/auth/providers/official.ts";
 import { loadUserConfig, updateUserConfig } from "@oharness/engine/config.ts";
+import { EXTENSION_ID, EXTENSION_INSTALL_URL } from "@oharness/engine/browser/host-manifest.ts";
+import { announcePresence } from "@oharness/engine/browser/presence.ts";
+import { extensionHostReachable } from "@oharness/engine/browser/socket.ts";
 import { RoutineRunner } from "@oharness/engine/schedule/runner.ts";
 import { accountsConfigured, browserKeyUrl, browserSignInUrl, exchangeHandoff, siteUrl, } from "@oharness/engine/auth/providers/account.ts";
 import { ChangeLedger } from "./changes.js";
@@ -25,9 +29,11 @@ import { readPrefs, writePrefs } from "./prefs.js";
 import { sortModelsForDisplay } from "./model-order.js";
 import { loadModelsDev, releaseDateOf, releaseDates } from "@oharness/engine/providers/models-dev.ts";
 import { listDirectories, pickDirectory, pickFiles, revealDirectory } from "./pick.js";
-import { browseFiles, searchFiles, within } from "./files.js";
+import { TerminalHub, terminalAsset } from "./terminal.js";
+import { PREVIEW_MEDIA, browseFiles, previewFile, resolveFile, searchFiles, within } from "./files.js";
 import { analyticsState } from "./analytics.js";
 import { PAGE } from "./page.js";
+import { browserState, parseInputEvent, streamFrames } from "./browser-pane.js";
 import { artifactDocument, sendArtifact } from "./artifacts.js";
 import { sendProjectExport } from "./project-export.js";
 import { ArtifactStore, getArtifactStore, isCanvas, isValidArtifactId, restoreArtifacts, } from "@oharness/engine/artifacts/store.ts";
@@ -204,12 +210,23 @@ export async function startWebServer(opts) {
     const makeRunner = (session, harness) => {
         const ledger = new ChangeLedger(session.cwd);
         ledger.attach(harness.hooks);
-        return { session, agent: harness.agent(session), harness, ledger, queue: [] };
+        return {
+            session,
+            agent: harness.agent(session),
+            harness,
+            browser: harness.browserFor(session.id),
+            ledger,
+            queue: [],
+        };
     };
     /** The runner a request names, or the most recently focused one. */
     let focused = opts.session.id;
     const runnerFor = (id) => runners.get(typeof id === "string" && id ? id : focused);
-    runners.set(opts.session.id, makeRunner(opts.session, opts.harness));
+    const initial = makeRunner(opts.session, opts.harness);
+    // Preserve caller-supplied agent overrides for the initial session. Its
+    // browser is still the same one bound by Harness.agent(session).
+    initial.agent = opts.agent;
+    runners.set(opts.session.id, initial);
     let current = { session: opts.session, agent: opts.agent, harness: opts.harness };
     /**
      * Sign-ins waiting for their emailed code.
@@ -418,6 +435,7 @@ export async function startWebServer(opts) {
         broadcast(announce(entry));
         notify(entry);
     });
+    const terminals = new TerminalHub();
     const server = createServer((req, res) => {
         void handle(req, res).catch((err) => {
             send(res, 500, { error: errorMessage(err) });
@@ -430,7 +448,12 @@ export async function startWebServer(opts) {
         if (url.pathname === "/" && req.method === "GET") {
             if (!authorized(url, req))
                 return send(res, 401, { error: "missing or bad token" });
-            res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+            res.writeHead(200, {
+                "content-type": "text/html; charset=utf-8",
+                // Framed by itself and by the OHarness extension's side panel, and by
+                // nothing else: a page that drives a shell is not one to embed.
+                "content-security-policy": `frame-ancestors 'self' chrome-extension://${EXTENSION_ID}`,
+            });
             res.end(PAGE);
             return;
         }
@@ -458,6 +481,201 @@ export async function startWebServer(opts) {
                 const runner = runnerFor(url.searchParams.get("session"));
                 return send(res, 200, { pages: runner?.harness.extensions.listPages() ?? [] });
             }
+            /*
+             * The browser pane: what state it is in, its picture, and the input of
+             * somebody who has taken it over.
+             *
+             * State is polled by every open page, so it is answered from what the
+             * session already knows and never starts a browser to find out — a person
+             * who opened the pane has not asked for Chrome.
+             */
+            case "GET /browser/state": {
+                res.setHeader("cache-control", "no-store");
+                const runner = runnerFor(url.searchParams.get("session"));
+                return send(res, 200, await browserState(runner?.browser));
+            }
+            case "GET /browser/stream": {
+                const runner = runnerFor(url.searchParams.get("session"));
+                const quality = Number(url.searchParams.get("quality") ?? "85");
+                return streamFrames(runner?.browser, res, Number.isFinite(quality) ? Math.min(90, Math.max(20, quality)) : 85);
+            }
+            case "POST /browser/input": {
+                res.setHeader("cache-control", "no-store");
+                const body = await readJson(req);
+                const runner = runnerFor(typeof body.session === "string" ? body.session : undefined);
+                const session = runner?.browser;
+                if (!session || !session.state().running)
+                    return send(res, 409, { error: "no browser is running" });
+                const event = parseInputEvent(body.event);
+                if (!event)
+                    return send(res, 400, { error: "unrecognised input event" });
+                await session.forward(event);
+                return send(res, 200, { ok: true });
+            }
+            case "POST /browser/navigate": {
+                res.setHeader("cache-control", "no-store");
+                const body = await readJson(req);
+                const runner = runnerFor(typeof body.session === "string" ? body.session : undefined);
+                const session = runner?.browser;
+                if (!session)
+                    return send(res, 409, { error: "browser is disabled" });
+                if (body.action === "reload") {
+                    if (!session.running)
+                        return send(res, 409, { error: "no browser is running" });
+                    try {
+                        return send(res, 200, await session.reload());
+                    }
+                    catch (error) {
+                        return send(res, 400, { error: errorMessage(error) });
+                    }
+                }
+                const raw = typeof body.url === "string" ? body.url.trim() : "";
+                if (!raw)
+                    return send(res, 400, { error: "url is required" });
+                const local = /^(?:localhost|127(?:\.\d{1,3}){3}|\[::1\])(?::|\/|$)/i.test(raw);
+                const value = /^[a-z][a-z0-9+.-]*:/i.test(raw) ? raw : `${local ? "http" : "https"}://${raw}`;
+                let parsed;
+                try {
+                    parsed = new URL(value);
+                }
+                catch {
+                    return send(res, 400, { error: "invalid url" });
+                }
+                if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+                    return send(res, 400, { error: "only http and https URLs are supported" });
+                }
+                try {
+                    return send(res, 200, await session.navigate(parsed.href));
+                }
+                catch (error) {
+                    return send(res, 400, { error: errorMessage(error) });
+                }
+            }
+            case "POST /browser/tab": {
+                res.setHeader("cache-control", "no-store");
+                const body = await readJson(req);
+                const runner = runnerFor(typeof body.session === "string" ? body.session : undefined);
+                const session = runner?.browser;
+                if (!session || !session.running)
+                    return send(res, 409, { error: "no browser is running" });
+                if (typeof body.id !== "string" || !body.id)
+                    return send(res, 400, { error: "tab id is required" });
+                if (body.action === "close") {
+                    if (runner?.running)
+                        return send(res, 409, { error: "stop the running turn before closing its browser tab" });
+                    if (!session.closePaneTab)
+                        return send(res, 501, { error: "this browser provider cannot close tabs" });
+                    try {
+                        return send(res, 200, await session.closePaneTab(body.id));
+                    }
+                    catch (error) {
+                        return send(res, 400, { error: errorMessage(error) });
+                    }
+                }
+                if (!session.selectPaneTab)
+                    return send(res, 501, { error: "this browser provider cannot switch tabs" });
+                try {
+                    return send(res, 200, await session.selectPaneTab(body.id));
+                }
+                catch (error) {
+                    return send(res, 400, { error: errorMessage(error) });
+                }
+            }
+            case "POST /browser/close": {
+                res.setHeader("cache-control", "no-store");
+                const body = await readJson(req);
+                const runner = runnerFor(typeof body.session === "string" ? body.session : undefined);
+                const session = runner?.browser;
+                if (!runner || !session)
+                    return send(res, 404, { error: "no such browser session" });
+                if (runner.running)
+                    return send(res, 409, { error: "stop the running turn before stopping its browser" });
+                if (!session.running)
+                    return send(res, 200, { closed: false, running: false });
+                await session.close();
+                return send(res, 200, { closed: true, running: false });
+            }
+            /*
+             * Importing a site's sign-in from the person's own browser.
+             *
+             * GET lists what could be imported and names the browser; it lists tabs
+             * and attaches to none. POST is the dialog's confirmation — the only way
+             * anything is read out of that browser — or its "don't ask again".
+             */
+            /**
+             * Hand the person's current tab to a conversation. Asked for by the
+             * extension's side panel, from the page the person is looking at — a
+             * click of theirs, never something the agent can call.
+             */
+            case "POST /browser/adopt": {
+                res.setHeader("cache-control", "no-store");
+                const body = await readJson(req);
+                const session = runnerFor(typeof body.session === "string" ? body.session : null)?.browser;
+                if (!session)
+                    return send(res, 404, { error: "browser is disabled" });
+                if (!session.adoptYourTab)
+                    return send(res, 501, { error: "this browser cannot take one of your tabs" });
+                const tabId = typeof body.tabId === "number" || typeof body.tabId === "string" ? String(body.tabId) : "";
+                if (!tabId)
+                    return send(res, 400, { error: "tabId is required" });
+                try {
+                    return send(res, 200, await session.adoptYourTab(tabId));
+                }
+                catch (error) {
+                    return send(res, 409, { error: errorMessage(error) });
+                }
+            }
+            /** Whether the extension is connected, and how to get it; see extensionInfo. */
+            case "GET /browser/extension":
+                res.setHeader("cache-control", "no-store");
+                return send(res, 200, await extensionInfo());
+            /** Open the extension's folder, for loading it into Chrome by hand. */
+            case "POST /browser/extension/reveal": {
+                if (!opts.extensionDir || !(await isDirectory(opts.extensionDir)))
+                    return send(res, 404, { error: "no extension folder here" });
+                const result = await revealDirectory(opts.extensionDir);
+                return send(res, "error" in result ? 500 : 200, result);
+            }
+            case "GET /browser/import": {
+                res.setHeader("cache-control", "no-store");
+                const session = runnerFor(url.searchParams.get("session"))?.browser;
+                if (!session)
+                    return send(res, 404, { error: "browser is disabled" });
+                if (!session.loginImportSources)
+                    return send(res, 501, { error: "this browser provider cannot import sign-ins" });
+                try {
+                    return send(res, 200, await session.loginImportSources());
+                }
+                catch (error) {
+                    return send(res, 409, { error: errorMessage(error) });
+                }
+            }
+            case "POST /browser/import": {
+                res.setHeader("cache-control", "no-store");
+                const body = await readJson(req);
+                const runner = runnerFor(typeof body.session === "string" ? body.session : undefined);
+                const session = runner?.browser;
+                if (!runner || !session)
+                    return send(res, 404, { error: "no such browser session" });
+                if (body.action === "dismiss") {
+                    if (typeof body.site !== "string")
+                        return send(res, 400, { error: "site is required" });
+                    await session.dismissLoginImport?.(body.site);
+                    return send(res, 200, { ok: true });
+                }
+                // The import navigates the page the agent is using.
+                if (runner.running)
+                    return send(res, 409, { error: "wait for the running turn to finish before importing a sign-in" });
+                if (!session.importLogin)
+                    return send(res, 501, { error: "this browser provider cannot import sign-ins" });
+                const sites = Array.isArray(body.sites) ? body.sites.filter((site) => typeof site === "string").slice(0, 20) : [];
+                try {
+                    return send(res, 200, await session.importLogin(sites));
+                }
+                catch (error) {
+                    return send(res, 400, { error: errorMessage(error) });
+                }
+            }
             case "GET /plugin-page": {
                 res.setHeader("cache-control", "no-store");
                 const runner = runnerFor(url.searchParams.get("session"));
@@ -854,6 +1072,137 @@ export async function startWebServer(opts) {
                 const result = await revealDirectory(dir);
                 return send(res, "error" in result ? 500 : 200, result);
             }
+            /*
+             * The files pane: a project's tree one folder at a time, one file's
+             * contents, and an image's bytes. Addressed by the project's folder
+             * rather than a session, because the pane opens from the sidebar's
+             * project menu too, where there may be no session in that tree at all.
+             */
+            // The embedded terminal. One shell per project folder; see terminal.ts.
+            case "POST /term/open": {
+                const body = await readJson(req);
+                const root = await projectRoot(typeof body.cwd === "string" ? body.cwd : null);
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                const replace = typeof body.replace === "string" ? body.replace : undefined;
+                const result = await terminals.open(root, { cols: body.cols, rows: body.rows }, replace);
+                return send(res, "error" in result ? 500 : 200, result);
+            }
+            case "GET /term/list": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                return send(res, 200, { terminals: terminals.list(root) });
+            }
+            case "GET /term/stream": {
+                if (!terminals.stream(url.searchParams.get("id") ?? "", res)) {
+                    return send(res, 404, { error: "no such terminal" });
+                }
+                return;
+            }
+            case "POST /term/input": {
+                const body = await readJson(req);
+                const ok = terminals.input(String(body.id ?? ""), body.data);
+                return send(res, ok ? 200 : 404, ok ? { ok } : { error: "no such terminal" });
+            }
+            case "POST /term/resize": {
+                const body = await readJson(req);
+                const ok = terminals.resize(String(body.id ?? ""), body.cols, body.rows);
+                return send(res, ok ? 200 : 404, ok ? { ok } : { error: "no such terminal" });
+            }
+            case "POST /term/close": {
+                const body = await readJson(req);
+                terminals.close(String(body.id ?? ""));
+                return send(res, 200, { ok: true });
+            }
+            case "GET /vendor/xterm.js":
+            case "GET /vendor/xterm.css":
+            case "GET /vendor/xterm-fit.js": {
+                const file = terminalAsset(url.pathname);
+                if (!file)
+                    return send(res, 404, { error: "terminal assets are not installed" });
+                const data = await readFile(file);
+                res.writeHead(200, {
+                    "content-type": url.pathname.endsWith(".css") ? "text/css; charset=utf-8" : "text/javascript; charset=utf-8",
+                    "content-length": data.byteLength,
+                    "cache-control": "private, max-age=3600",
+                });
+                res.end(data);
+                return;
+            }
+            case "GET /files/tree": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                return send(res, 200, await browseFiles(root, url.searchParams.get("dir") ?? "", { all: true }));
+            }
+            case "GET /files/read": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                const result = await previewFile(root, url.searchParams.get("path") ?? "");
+                return send(res, "error" in result ? 404 : 200, result);
+            }
+            case "GET /files/raw": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                const full = root && resolveFile(root, url.searchParams.get("path") ?? "");
+                const media = full && PREVIEW_MEDIA[path.extname(full).toLowerCase()];
+                if (!full || !media)
+                    return send(res, 415, { error: "not previewable" });
+                let size;
+                try {
+                    const info = await stat(full);
+                    if (!info.isFile())
+                        return send(res, 404, { error: "not a file" });
+                    size = info.size;
+                }
+                catch {
+                    return send(res, 404, { error: "no such file" });
+                }
+                // A video is seeked by asking for the bytes at the new position, and
+                // one too long to buffer whole would not play at all without this.
+                const range = /^bytes=(\d*)-(\d*)$/.exec(req.headers.range ?? "");
+                let first = 0;
+                let last = size - 1;
+                if (range && (range[1] || range[2])) {
+                    if (range[1]) {
+                        first = Number(range[1]);
+                        if (range[2])
+                            last = Math.min(Number(range[2]), size - 1);
+                    }
+                    else {
+                        first = Math.max(0, size - Number(range[2]));
+                    }
+                    if (first > last || first >= size) {
+                        res.writeHead(416, { "content-range": `bytes */${size}` });
+                        res.end();
+                        return;
+                    }
+                }
+                const partial = Boolean(range && (range[1] || range[2]));
+                res.writeHead(partial ? 206 : 200, {
+                    "content-type": media.type,
+                    "content-length": last - first + 1,
+                    "accept-ranges": "bytes",
+                    ...(partial ? { "content-range": `bytes ${first}-${last}/${size}` } : {}),
+                    "x-content-type-options": "nosniff",
+                    // Served inert: this is same-origin to a page that holds the session
+                    // token, and an SVG is a document that can script. A PDF is left
+                    // unsandboxed, because the browser's viewer will not open inside a
+                    // sandbox; the viewer runs in its own process, apart from the page.
+                    ...(media.kind === "pdf"
+                        ? {}
+                        : { "content-security-policy": "default-src 'none'; style-src 'unsafe-inline'; sandbox" }),
+                    "cache-control": "private, no-store",
+                });
+                if (req.method === "HEAD" || size === 0)
+                    return void res.end();
+                const stream = createReadStream(full, { start: first, end: last });
+                stream.on("error", () => res.destroy());
+                res.on("close", () => stream.destroy());
+                stream.pipe(res);
+                return;
+            }
             case "POST /pick": {
                 const body = await readJson(req);
                 // The dialog opens on this machine's desktop, which is the same
@@ -1370,6 +1719,10 @@ export async function startWebServer(opts) {
                     // The whole status, not just the path: the page needs to know
                     // whether the switch it draws is the user's to flip.
                     audit: await current.harness.auditStatus(),
+                    browserMode: current.harness.browserMode(),
+                    // For the browser row: whether the person's browser can be reached
+                    // now, and where to get the extension when it cannot.
+                    browserExtension: await extensionInfo(),
                     settingsPaths: {
                         user: current.harness.settings.pathFor("user"),
                         project: current.harness.settings.pathFor("project"),
@@ -1392,6 +1745,23 @@ export async function startWebServer(opts) {
                 const saved = await current.harness.setWritableRoots(body.roots);
                 return send(res, 200, { roots: saved });
             }
+            /**
+             * The built-in browser or the person's own, through the extension.
+             *
+             * A machine preference, so every project's harness moves with it — a
+             * switch that changed only the project on screen would look ignored the
+             * moment someone opened another one.
+             */
+            case "POST /settings/browser-mode": {
+                const body = await readJson(req);
+                if (body.mode !== "auto" && body.mode !== "builtin" && body.mode !== "extension") {
+                    return send(res, 400, { error: "mode must be auto, builtin or extension" });
+                }
+                for (const harness of new Set([current.harness, ...harnesses.values()])) {
+                    await harness.setBrowserMode(body.mode);
+                }
+                return send(res, 200, { mode: body.mode });
+            }
             /**
              * Who is signed in, if anyone.
              *
@@ -2253,6 +2623,7 @@ export async function startWebServer(opts) {
                     const runner = runners.get(id);
                     runner?.running?.abort();
                     runners.delete(id);
+                    await runner?.harness.closeBrowserFor(id);
                     // Its artifacts move from memory to the log half of the catalogue,
                     // and a fold taken before this session existed does not have them.
                     cachedLogs = undefined;
@@ -2282,7 +2653,9 @@ export async function startWebServer(opts) {
                     // knowing about it at all, not the absence of a transcript.
                     if (!deleted && !runners.has(id))
                         return send(res, 404, { error: "no such session" });
+                    const removed = runners.get(id);
                     runners.delete(id);
+                    await removed?.harness.closeBrowserFor(id);
                     // Its artifact log went with it, and a fold taken a moment ago
                     // still names it.
                     cachedLogs = undefined;
@@ -2344,6 +2717,7 @@ export async function startWebServer(opts) {
                 const runner = runnerFor(id);
                 if (runner)
                     runner.session.title = title;
+                broadcast({ type: "title", session: id, title });
                 return send(res, 200, { ok: true, id, title });
             }
             case "POST /upload": {
@@ -2557,14 +2931,14 @@ export async function startWebServer(opts) {
         // attempt could be replayed by anything that saw it in the address bar.
         pendingBrowserSignIns.delete(state);
         if (!pending) {
-            return closeTab(res, 400, "That sign-in has expired. Start it again from the app.");
+            return closeTab(res, 400, "That sign-in has expired.", "These links are only good for a few minutes. Start the sign-in again from OHarness.");
         }
         const failure = url.searchParams.get("error");
         if (failure)
-            return closeTab(res, 400, failure);
+            return closeTab(res, 400, "That sign-in did not go through.", failure);
         const code = url.searchParams.get("code") ?? "";
         if (!code)
-            return closeTab(res, 400, "The site sent no sign-in back.");
+            return closeTab(res, 400, "That sign-in did not go through.", "The site sent no sign-in back. Start it again from OHarness.");
         const result = await exchangeHandoff(code, state);
         if (result.type !== "success") {
             const message = result.error ?? "that sign-in was not accepted";
@@ -2572,19 +2946,19 @@ export async function startWebServer(opts) {
                 type: "notice",
                 message: `${pending.intent === "key" ? "getting a key" : "sign-in"} failed: ${message}`,
             });
-            return closeTab(res, 400, message);
+            return closeTab(res, 400, "That sign-in was not accepted.", message);
         }
         try {
             await current.harness.auth.complete(pending.provider, result);
         }
         catch (err) {
-            return closeTab(res, 500, errorMessage(err));
+            return closeTab(res, 500, "That sign-in could not be saved.", errorMessage(err));
         }
         // What happened, in the words of the errand that was run. "Signed in" on
         // a tab where somebody just created an API key is a small lie that makes
         // them wonder which of the two actually took.
         closeTab(res, 200, pending.intent === "key"
-            ? `That key is now in use for ${pending.provider}. You can close this tab.`
+            ? `That key is now in use for ${pending.provider}.`
             : `Signed in to ${pending.provider}.`);
         // Same as a saved key: the credential is stored, now go ask the gateway
         // what the account can actually call.
@@ -2851,6 +3225,8 @@ export async function startWebServer(opts) {
                 cwd: project.path,
                 permissionPrompt: (request, signal) => permissionPrompt(request, signal),
                 questionPrompt: (request, signal) => questionPrompt(request, signal),
+                ...(opts.browserTarget ? { browserTarget: opts.browserTarget } : {}),
+                ...(opts.browserUsePlugin ? { browserUsePlugin: opts.browserUsePlugin } : {}),
             }));
         harnesses.set(project.path, harness);
         watchConnections(harness);
@@ -2871,6 +3247,8 @@ export async function startWebServer(opts) {
                 cwd,
                 permissionPrompt: async () => false,
                 questionPrompt: async () => ({ outcome: "unavailable" }),
+                ...(opts.browserTarget ? { browserTarget: opts.browserTarget } : {}),
+                ...(opts.browserUsePlugin ? { browserUsePlugin: opts.browserUsePlugin } : {}),
             }),
         onStart: (routine, meta) => {
             if (meta.catchUp)
@@ -3039,8 +3417,16 @@ export async function startWebServer(opts) {
         const text = note ? `${note}\n\n${prompt}` : prompt;
         const input = staged.length ? buildMessage(text, staged) : text;
         let failed = false;
+        // The session names itself from its first prompt once the agent takes it
+        // in. Said the moment that happens: waiting for the idle state left a new
+        // tab reading "Untitled" for the whole of its first turn.
+        let untitled = !runner.session.title;
         try {
             for await (const event of runner.agent.run(input, { signal: controller.signal })) {
+                if (untitled && runner.session.title) {
+                    untitled = false;
+                    broadcast({ type: "title", session: id, title: runner.session.title });
+                }
                 // The agent's own question_request is not forwarded: the page draws
                 // the card from questionPrompt's announce, which carries the id the
                 // answer is posted back to. Forwarding both drew the card twice, and
@@ -3084,6 +3470,12 @@ export async function startWebServer(opts) {
                 ...(typeof err?.provider === "string"
                     ? { provider: err.provider }
                     : {}),
+                // And the code, for the failure that carries no status: nothing was
+                // sent, so there is no HTTP answer to read — but "not signed in" is
+                // just as much a dialog to open as a refused key is.
+                ...(typeof err?.code === "string"
+                    ? { code: err.code }
+                    : {}),
                 fatal: true,
             });
         }
@@ -3275,6 +3667,18 @@ export async function startWebServer(opts) {
             return send(res, 404, { error: "no such artifact" });
         sendArtifact(res, found.artifact, found.revision);
     }
+    /**
+     * What the page needs to help someone get the browser extension: whether it
+     * is connected now, where to get it, and — where this app ships its files —
+     * that there is a folder to load it from.
+     */
+    async function extensionInfo() {
+        return {
+            connected: await extensionHostReachable(),
+            installUrl: EXTENSION_INSTALL_URL,
+            folder: Boolean(opts.extensionDir) && (await isDirectory(opts.extensionDir)),
+        };
+    }
     function constantTimeEqual(supplied, expected) {
         if (!supplied)
             return false;
@@ -3317,6 +3721,9 @@ export async function startWebServer(opts) {
     }
     const address = server.address();
     const port = typeof address === "object" && address ? address.port : opts.port;
+    const presence = opts.presence === false
+        ? undefined
+        : announcePresence({ url: `http://${host}:${port}`, token, kind: opts.presence?.kind ?? "web" });
     return {
         url: `http://${host}:${port}/?token=${token}`,
         token,
@@ -3324,11 +3731,13 @@ export async function startWebServer(opts) {
         questionPrompt,
         async close() {
             clearInterval(staleTimer);
+            presence?.close();
             await routines.close();
             for (const unsubscribe of connectionSubscriptions)
                 unsubscribe();
             for (const harness of harnesses.values())
                 harness.cloudConnectors.close();
+            terminals.closeAll();
             for (const client of clients)
                 client.end();
             clients.clear();
@@ -3535,35 +3944,88 @@ function isLoopbackHost(host) {
     }
     return hostname === "127.0.0.1" || hostname === "[::1]" || hostname === "localhost";
 }
-function closeTab(res, status, message) {
-    const escaped = message.replace(/[&<>]/g, (char) => char === "&" ? "&amp;" : char === "<" ? "&lt;" : "&gt;");
+/**
+ * The last thing a sign-in shows anybody.
+ *
+ * A tab the app opened, on a loopback port, that exists to say one sentence
+ * and be closed. It is still the product's own page, though — for a lot of
+ * people it is the first screen after "Continue with Google" — so it gets the
+ * mark, a state that is legible at a glance, and a line saying what to do
+ * next. `message` is the sentence; `hint` is what follows it, and defaults to
+ * the only useful instruction a successful sign-in has.
+ *
+ * Failure is carried by the badge and by one tinted rule, not by a heading set
+ * in red: a red sentence reads as the page shouting, and the sentence is
+ * usually the calmest thing on it ("that sign-in has expired").
+ */
+function closeTab(res, status, message, hint) {
     const ok = status < 400;
+    const escape = (text) => text.replace(/[&<>]/g, (char) => (char === "&" ? "&amp;" : char === "<" ? "&lt;" : "&gt;"));
+    const heading = escape(message);
+    const body = escape(hint ?? (ok ? "You can close this tab and go back to OHarness." : "Start it again from OHarness."));
     const page = `<!doctype html><meta charset="utf-8"><title>OHarness</title>` +
         `<meta name="viewport" content="width=device-width,initial-scale=1">` +
         `<style>` +
         `:root{color-scheme:light dark;` +
-        `--bg:#fff;--card:#fff;--fg:#1a1a1a;--dim:#6b7280;--line:#00000012;--mark:#111827;--bad:#b91c1c}` +
+        `--bg:#fafafa;--card:#fff;--fg:#141618;--dim:#6b7280;--line:#0000001a;--mark:#111827;` +
+        `--good:#047857;--good-bg:#0478571f;--bad:#b91c1c;--bad-bg:#b91c1c1a;--glow:#f9731640}` +
         `@media(prefers-color-scheme:dark){:root{` +
-        `--bg:#0e1013;--card:#15171c;--fg:#e6e6e6;--dim:#8b93a1;--line:#ffffff14;--mark:#e5e7eb;--bad:#f87171}}` +
+        `--bg:#0a0b0d;--card:#141619;--fg:#e8e8e8;--dim:#8b93a1;--line:#ffffff14;--mark:#e5e7eb;` +
+        `--good:#6ee7b7;--good-bg:#6ee7b71f;--bad:#f87171;--bad-bg:#f871711f;--glow:#f9731636}}` +
         `*{box-sizing:border-box}` +
-        `body{margin:0;min-height:100vh;display:grid;place-items:center;padding:24px;` +
+        // The two washes are the site's own lighting, reduced to what a page this
+        // small can carry: a warm pool above the card and a cooler one below it.
+        // Fixed, so a short page does not scroll them into view as a seam.
+        `body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px;` +
         `background:var(--bg);color:var(--fg);` +
+        `background-image:radial-gradient(60% 46% at 50% 4%,var(--glow) 0%,transparent 68%),` +
+        `radial-gradient(48% 38% at 50% 100%,#6366f11f 0%,transparent 70%);` +
+        `background-attachment:fixed;` +
         `font:15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,sans-serif;` +
         `-webkit-font-smoothing:antialiased}` +
-        `main{width:100%;max-width:26rem;padding:28px;border-radius:16px;background:var(--card);` +
-        `border:1px solid var(--line);box-shadow:0 1px 2px #0000000f,0 20px 60px #00000014;text-align:center}` +
-        `svg{width:34px;height:34px;color:var(--mark)}` +
-        `h1{margin:14px 0 0;font-size:16px;font-weight:600;letter-spacing:-.01em}` +
-        `h1.bad{color:var(--bad)}` +
-        `p{margin:8px 0 0;font-size:13px;color:var(--dim)}` +
+        `main{width:100%;max-width:25rem;padding:32px 28px 26px;border-radius:18px;background:var(--card);` +
+        `border:1px solid var(--line);box-shadow:0 1px 2px #0000000f,0 24px 60px #00000026;text-align:center;` +
+        `animation:rise .34s cubic-bezier(.2,.8,.3,1) both}` +
+        `@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}` +
+        `@media(prefers-reduced-motion:reduce){main{animation:none}}` +
+        // The mark alone, in the state's colour. A disc behind it made a third
+        // bordered shape on a card that only has one thing to say, and a filled
+        // circle reads as a notification — nothing here needs acknowledging.
+        `.badge{display:grid;place-items:center;color:var(--tone)}` +
+        `.badge svg{width:30px;height:30px}` +
+        `.ok{--tone:var(--good);--tone-bg:var(--good-bg)}` +
+        `.bad{--tone:var(--bad);--tone-bg:var(--bad-bg)}` +
+        `h1{margin:18px 0 0;font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.4}` +
+        `p{margin:9px 0 0;font-size:13.5px;color:var(--dim)}` +
+        // The mark, at a size that says whose page this is without competing with
+        // the one sentence it exists to show. No rule above it: the gap already
+        // separates it, and a divider on a card this short is a second border
+        // around almost nothing.
+        `footer{display:flex;align-items:center;justify-content:center;gap:7px;` +
+        `margin-top:26px;opacity:.75;` +
+        `font-size:12px;font-weight:550;letter-spacing:.01em;color:var(--dim)}` +
+        `footer svg{width:15px;height:15px;color:var(--mark)}` +
         `</style>` +
         `<body><main>` +
+        `<div class="badge ${ok ? "ok" : "bad"}">` +
+        `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" ` +
+        `stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">` +
+        (ok
+            ? `<path d="M4 12.5 9.5 18 20 6.5"/>`
+            : // The ring belongs to the glyph, not behind it: a bare exclamation
+                // stroke, with nothing around it, reads as a piece of punctuation
+                // that lost its sentence.
+                `<circle cx="12" cy="12" r="9.2" stroke-width="1.9"/><path d="M12 7.4v5.4"/>` +
+                    `<circle cx="12" cy="16.4" r="1.15" fill="currentColor" stroke="none"/>`) +
+        `</svg></div>` +
+        `<h1>${heading}</h1>` +
+        `<p>${body}</p>` +
+        `<footer>` +
         `<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2.2" ` +
         `stroke-linecap="round" aria-hidden="true">` +
         `<path d="M20 6h-8a6 6 0 0 0-6 6v8"/><path d="M12 26h8a6 6 0 0 0 6-6v-8"/>` +
         `<circle cx="16" cy="16" r="3.5" fill="currentColor" stroke="none"/></svg>` +
-        `<h1${ok ? "" : ' class="bad"'}>${escaped}</h1>` +
-        (ok ? `<p>You can close this tab and go back to OHarness.</p>` : "") +
+        `OHarness</footer>` +
         `</main>`;
     res.writeHead(status, {
         "content-type": "text/html; charset=utf-8",
@@ -3619,6 +4081,13 @@ async function readBody(req, limit) {
  * shape. Anything else is inlined as text under its filename — a base64 blob
  * of a zip would burn context and tell the model nothing.
  */
+/** A project folder named by the page, resolved, or undefined if it is not one. */
+async function projectRoot(dir) {
+    if (!dir)
+        return undefined;
+    const full = path.resolve(dir);
+    return (await isDirectory(full)) ? full : undefined;
+}
 /** Whether a chosen path is a folder; anything unreadable is treated as a file. */
 async function isDirectory(target) {
     try {