@oharness/server 0.9.3 → 0.11.0

package/dist/server.js

@@ -1,7 +1,7 @@
 import { createServer } from "node:http";
 import { randomUUID, timingSafeEqual } from "node:crypto";
 import { createReadStream } from "node:fs";
-import { readFile, stat } from "node:fs/promises";
+import { mkdir, readFile, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { homedir } from "node:os";
 import { Harness } from "@oharness/engine/harness.ts";
@@ -14,7 +14,10 @@ import { isFree } from "@oharness/engine/providers/types.ts";
 import { PERMISSION_MODES } from "@oharness/engine/agent/permissions.ts";
 import { canDisableThinking, effectiveEffort, isEffortChoice, thinkingFor, } from "@oharness/engine/providers/types.ts";
 import { isReadable } from "@oharness/engine/agent/workspace.ts";
+import { BRANCH_TYPES, createWorktree, findWorktree, finishWorktree, listWorktrees, previewWorktree, worktreeStatus, } from "@oharness/engine/worktree/index.ts";
+import { within as insideAny } from "@oharness/engine/paths.ts";
 import { visibleText } from "@oharness/engine/core/types.ts";
+import { previewJson } from "@oharness/engine/util/json.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";
@@ -22,16 +25,19 @@ import { EXTENSION_IDS, EXTENSION_INSTALL_URL } from "@oharness/engine/browser/h
 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 { activeRun, onRunActivity, onRunsChanged } from "@oharness/engine/schedule/scheduler.ts";
 import { accountsConfigured, browserKeyUrl, browserSignInUrl, exchangeHandoff, siteUrl, } from "@oharness/engine/auth/providers/account.ts";
 import { ChangeLedger } from "./changes.js";
+import { projectPath } from "@oharness/engine/paths.ts";
+import { listTurnShots, removeTurnShots, saveTurnShots, turnShotPath, turnShotView } from "./turn-shots.js";
 import { addProject, ensureProject, listProjects, removeProject, renameProject } from "./projects.js";
 import { readPrefs, writePrefs } from "./prefs.js";
 import { sortModelsForDisplay } from "./model-order.js";
-import { loadModelsDev, releaseDateOf, releaseDates } from "@oharness/engine/providers/models-dev.ts";
+import { loadModelsDev, orderingDate, releaseDates } from "@oharness/engine/providers/models-dev.ts";
 import { listDirectories, pickDirectory, pickFiles, revealDirectory } from "./pick.js";
-import { TerminalHub, terminalAsset } from "./terminal.js";
+import { isAgentSessionId, isLauncher, TerminalHub, terminalAsset } from "./terminal.js";
 import { PREVIEW_MEDIA, browseFiles, previewFile, resolveFile, searchFiles, within } from "./files.js";
-import { analyticsState } from "./analytics.js";
+import { analyticsState, cleanEvent, flushAnalytics, markUsed, setConsent, startHeartbeat, track } from "./analytics.js";
 import { PAGE } from "./page.js";
 import { browserState, parseInputEvent, streamFrames } from "./browser-pane.js";
 import { artifactDocument, sendArtifact } from "./artifacts.js";
@@ -39,6 +45,13 @@ import { sendProjectExport } from "./project-export.js";
 import { ArtifactStore, getArtifactStore, isCanvas, isValidArtifactId, restoreArtifacts, } from "@oharness/engine/artifacts/store.ts";
 import { accountTeams, publishArtifact, unpublishArtifact } from "@oharness/engine/artifacts/publish.ts";
 import { accountUsage } from "./account-usage.js";
+import { createStarters } from "./starters.js";
+import { suggestNext } from "./suggest.js";
+import { ThemeStore } from "./theme-store.js";
+import { ASSET_TYPES, assetExists, assetPath as themeAssetPath } from "./theme-assets.js";
+import { createThemeTools } from "./theme-tools.js";
+import { ASSET_ID, assetUrl, swatches, themeCss } from "./user-theme.js";
+import { pairedDevices, remoteMachine, revokeDevice, startRemote, } from "./remote.js";
 /**
  * How many stored sessions the usage page counts.
  *
@@ -189,14 +202,18 @@ function tokensOf(usage) {
  *
  * Its date wins over a model's own: a listing's `created` is sometimes the
  * time it was listed, or a constant, and the snapshot knows most of the models
- * a gateway or an aggregator relays under the same name.
+ * a gateway or an aggregator relays under the same name. A model with neither
+ * is dated to the snapshot itself — see `orderingDate`.
  */
 let knownDates;
 async function withReleaseDates(models) {
-    const dates = await (knownDates ??= loadModelsDev().then(releaseDates));
+    const { dates, at } = await (knownDates ??= loadModelsDev().then((snapshot) => {
+        const fetched = Date.parse(snapshot.fetchedAt ?? "");
+        return { dates: releaseDates(snapshot), at: Number.isFinite(fetched) ? fetched : undefined };
+    }));
     return models.map((model) => {
-        const known = releaseDateOf(dates, model.model);
-        return known === undefined || known === model.releasedAt ? model : { ...model, releasedAt: known };
+        const date = orderingDate(dates, at, model);
+        return date === undefined || date === model.releasedAt ? model : { ...model, releasedAt: date };
     });
 }
 export async function startWebServer(opts) {
@@ -214,8 +231,181 @@ export async function startWebServer(opts) {
     const artifactToken = randomUUID();
     const host = opts.host ?? "127.0.0.1";
     const clients = new Set();
+    // Remote control's half of this page, filled in once the server is listening.
+    let pairingCards = () => [];
+    let answerPairing = () => false;
+    let remoteView = async () => ({ available: false, on: false, state: "off" });
+    let setRemote = async () => { };
+    let forgetPhone = () => { };
+    /**
+     * Whether the computer is held awake: by the setting for it, or because a
+     * phone may be reaching for it. A Mac asleep is a Mac the phone cannot find.
+     */
+    let remoteRunning = () => false;
+    const applyKeepAwake = async () => {
+        if (!opts.onKeepAwake)
+            return;
+        const prefs = await readPrefs().catch(() => ({}));
+        opts.onKeepAwake(prefs.keepAwake === true || remoteRunning());
+    };
     const pending = new Map();
+    /*
+     * Themes the agent proposed, and the one in use.
+     *
+     * A proposal is a card, not a change: it waits here until the person applies
+     * or discards it, and is kept in memory only, so a restart drops the ones
+     * nobody acted on. What is applied lives in theme.json via the store, and its
+     * CSS is printed into the page on every load — see `GET /` — and pushed to
+     * open pages as a `theme` event when it changes.
+     */
+    const themes = await ThemeStore.load();
+    const themePreviews = new Map();
+    const themePreviewView = (p) => ({
+        id: p.id,
+        session: p.session,
+        name: p.theme.input.name,
+        mode: p.theme.input.mode,
+        css: themeCss(p.theme),
+        swatches: swatches(p.theme),
+        // One thumbnail per filled slot, in slot order, for the card.
+        images: Object.entries(p.theme.input.images ?? {}).map(([slot, value]) => ({ slot, url: assetUrl(value.asset) })),
+        report: p.theme.report,
+    });
+    const themeTools = createThemeTools({
+        activeInput: () => themes.activeInput(),
+        propose: (session, theme) => {
+            const preview = { id: randomUUID(), session, theme, createdAt: Date.now() };
+            themePreviews.set(preview.id, preview);
+            // Bounded: a model looping on set_theme must not grow this forever.
+            if (themePreviews.size > 20)
+                themePreviews.delete(themePreviews.keys().next().value);
+            broadcast({ type: "theme_preview", session, preview: themePreviewView(preview) });
+            return preview.id;
+        },
+        reset: async () => {
+            const was = themes.state().active?.name;
+            if (!was)
+                return undefined;
+            themeChanged(await themes.reset());
+            return was;
+        },
+    });
+    /** Give a harness the theme tools; the page is what makes them meaningful. */
+    const equipThemes = (tools) => {
+        for (const tool of themeTools)
+            if (!tools.has(tool.name))
+                tools.register(tool);
+    };
+    equipThemes(opts.harness.tools);
+    // The first agent was built before this server existed, and may hold its own
+    // copy of the registry rather than the harness's.
+    equipThemes(opts.agent.tools);
+    const themeChanged = (state) => broadcast({ type: "theme", state });
     const runners = new Map();
+    /** Agents whose background tasks are being watched; see watchTasks. */
+    const watchedTasks = new WeakSet();
+    // Written in the background; the page on that project swaps them in.
+    const starters = createStarters((cwd, locale, written) => {
+        broadcast({ type: "starters", cwd, locale, starters: written });
+    });
+    /**
+     * The next-message guess being written for each conversation. Dropped the
+     * moment that conversation starts another turn: a guess about the turn
+     * before is wrong once there is a new one.
+     */
+    const suggesting = new Map();
+    let suggestionsOn = true;
+    void readPrefs().then((prefs) => { suggestionsOn = prefs.suggestions !== false; }).catch(() => { });
+    function suggest(runner) {
+        if (!suggestionsOn)
+            return;
+        const id = runner.session.id;
+        const controller = new AbortController();
+        suggesting.set(id, controller);
+        void suggestNext(runner.harness, runner.session.messages, runner.session.model.id, controller.signal)
+            .then((text) => {
+            if (text && !controller.signal.aborted)
+                broadcast({ type: "suggestion", session: id, text });
+        })
+            .catch(() => { })
+            .finally(() => {
+            if (suggesting.get(id) === controller)
+                suggesting.delete(id);
+        });
+    }
+    /**
+     * What the OS lets Computer Use do, read from the helper when a conversation
+     * switches it on and whenever the permission card asks again. Cached because
+     * `state()` is synchronous and sent on every change; the grants can be
+     * revoked at any time, and the tools report that themselves when it happens.
+     */
+    const computerStatus = {};
+    /**
+     * Whether a turn's windows and tabs are pictured when it ends: the one
+     * setting for Computer use and the browser. Kept here because the engine
+     * asks synchronously; read once, then updated by the setting's own route.
+     */
+    let turnShotsOn = true;
+    void readPrefs().then((prefs) => { turnShotsOn = prefs.turnShots !== false; }).catch(() => { });
+    /**
+     * The live view: what each conversation is doing on the computer, pushed as
+     * it happens. The last event per conversation is kept, so a pane opened
+     * later, or a reloaded page, starts on the window being worked in.
+     */
+    const computerLast = new Map();
+    /**
+     * Where each conversation's last Computer use turn ended, in messages. Read
+     * on the idle event, which the engine sends synchronously as the turn ends:
+     * the pictures arrive a moment later, by which time a queued message may
+     * already have started the next turn.
+     */
+    const computerTurnEnd = new Map();
+    opts.computerUsePlugin?.runtime.onAction((event) => {
+        if (event.kind === "idle") {
+            const runner = runners.get(event.sessionId);
+            if (runner)
+                computerTurnEnd.set(event.sessionId, runner.session.messages.length);
+        }
+        computerLast.set(event.sessionId, event);
+        broadcast({ type: "computer", session: event.sessionId, event });
+    });
+    opts.computerUsePlugin?.runtime.onSnapshot((event) => {
+        const at = computerTurnEnd.get(event.sessionId);
+        if (at === undefined || !turnShotsOn)
+            return;
+        keepTurnShots(event.sessionId, at, event.shots);
+    });
+    // The agent switched it on with computer_enable: what the + menu route does
+    // after flipping the flag, so the chip, the permission card and a resumed
+    // conversation all see it.
+    opts.computerUsePlugin?.runtime.onEnabled((sessionId) => {
+        const runner = runners.get(sessionId);
+        if (!runner)
+            return;
+        void runner.session.persist().catch(() => { });
+        void refreshComputer(opts.computerUsePlugin).finally(() => {
+            broadcast({ type: "state", session: runner.session.id, state: state(runner) });
+        });
+    });
+    async function refreshComputer(plugin) {
+        // Grants first and on their own: they come from the host app, and a
+        // helper that will not start must not leave the card showing old ones.
+        try {
+            computerStatus.permissions = await plugin.runtime.permissions();
+        }
+        catch (err) {
+            computerStatus.error = errorMessage(err);
+        }
+        try {
+            const info = await plugin.runtime.info();
+            computerStatus.platform = info.platform;
+            computerStatus.background = info.background;
+            delete computerStatus.error;
+        }
+        catch (err) {
+            computerStatus.error = errorMessage(err);
+        }
+    }
     const anyRunning = () => [...runners.values()].some((runner) => Boolean(runner.running));
     const makeRunner = (session, harness) => {
         const ledger = new ChangeLedger(session.cwd);
@@ -237,6 +427,7 @@ export async function startWebServer(opts) {
     // browser is still the same one bound by Harness.agent(session).
     initial.agent = opts.agent;
     runners.set(opts.session.id, initial);
+    adoptTasks(initial);
     let current = { session: opts.session, agent: opts.agent, harness: opts.harness };
     /**
      * Sign-ins waiting for their emailed code.
@@ -266,6 +457,40 @@ export async function startWebServer(opts) {
      * because rebuilding one reconnects every MCP server.
      */
     const harnesses = new Map([[opts.session.cwd, opts.harness]]);
+    /**
+     * The mode new conversations start in: the last one chosen, with two
+     * exceptions. Bypass permissions approves everything without asking, and a
+     * mode that strong is chosen for a conversation, not inherited by every one
+     * after it — a new conversation gets Auto instead. Plan is a step within a
+     * task, so choosing it leaves the default where it was.
+     *
+     * Written to the user config, where new conversations already take their
+     * mode from, and to each harness this server holds, which read that config
+     * once when they were built.
+     */
+    async function rememberMode(mode) {
+        if (mode === "plan")
+            return;
+        const next = mode === "bypassPermissions" ? "auto" : mode;
+        for (const harness of new Set([current.harness, ...harnesses.values()])) {
+            harness.config.permissionMode = next;
+        }
+        await updateUserConfig((config) => {
+            const { permissionMode: _was, ...rest } = config;
+            return next === "default" ? rest : { ...rest, permissionMode: next };
+        }).catch(() => { });
+    }
+    /**
+     * Routines that name no model — or one that is gone — run on the one picked
+     * in the composer, when this harness has it. Without this they took the
+     * first-configured model, which can be a local server that is not running
+     * or a gated one the account never unlocked.
+     */
+    const adoptRoutineModel = (harness) => {
+        harness.routineModel = () => preferredModel && harness.listModels().some((model) => model.id === preferredModel) ? preferredModel : undefined;
+        return harness;
+    };
+    adoptRoutineModel(opts.harness);
     void ensureProject(opts.session.cwd);
     /**
      * The model the user last picked, carried into every session started here.
@@ -302,6 +527,14 @@ export async function startWebServer(opts) {
      * reclaimed by `sweepAttachments`.
      */
     const attachments = new Map();
+    /**
+     * Files the person chose in the system file dialog, which the page may show
+     * a picture of — and only those. Outside the project the page has no other
+     * way to see a file (/files/raw stays inside it), and a path the person
+     * picked themselves, a moment ago, in a dialog of their own OS is the one
+     * kind it is safe to open on their behalf.
+     */
+    const pickedPaths = new Set();
     /**
      * Carry a chosen file whose bytes are the only way it can mean anything.
      *
@@ -322,7 +555,8 @@ export async function startWebServer(opts) {
             // Images by extension, and everything else left unnamed: `buildMessage`
             // decides text from bytes rather than from a type, so guessing one for
             // a .log would add nothing and could be wrong.
-            const mediaType = PICKED_IMAGE_TYPES[path.extname(target).toLowerCase()] ?? "application/octet-stream";
+            const ext = path.extname(target).toLowerCase();
+            const mediaType = PICKED_IMAGE_TYPES[ext] ?? PICKED_VIDEO_TYPES[ext] ?? "application/octet-stream";
             const id = randomUUID();
             attachments.set(id, { name, mediaType, data, at: Date.now() });
             sweepAttachments();
@@ -374,8 +608,38 @@ export async function startWebServer(opts) {
         connectionSubscriptions.push(harness.cloudConnectors.subscribe((card) => {
             broadcast({ type: "connection_card", session: card.session, card });
         }));
+        pictureBrowserTurns(harness);
     }
     watchConnections(opts.harness);
+    /** Keep a turn's pictures beside its session, and show them under its last reply. */
+    function keepTurnShots(session, at, shots) {
+        void saveTurnShots(session, at, shots)
+            .then((saved) => {
+            broadcast({ type: "turn_shots", session, shots: saved.map((shot) => turnShotView(session, shot)) });
+        })
+            .catch(() => { });
+    }
+    /** A tab's caption when it has no title: the site, not the whole address. */
+    function hostOf(url) {
+        try {
+            return url ? new URL(url).host || url : "";
+        }
+        catch {
+            return url ?? "";
+        }
+    }
+    /** The browser tabs a turn left, the same as the windows Computer use did. */
+    function pictureBrowserTurns(harness) {
+        harness.turnShotSink = {
+            enabled: () => turnShotsOn,
+            save: (session, at, shots) => keepTurnShots(session, at, shots.map((shot) => ({
+                app: hostOf(shot.url),
+                ...(shot.title ? { title: shot.title } : {}),
+                kind: "browser",
+                data: shot.data,
+            }))),
+        };
+    }
     /**
      * Take a waiting interaction off every screen.
      *
@@ -464,7 +728,14 @@ export async function startWebServer(opts) {
                 // nothing else: a page that drives a shell is not one to embed.
                 "content-security-policy": `frame-ancestors 'self' ${EXTENSION_IDS.map((id) => `chrome-extension://${id}`).join(" ")}`,
             });
-            res.end(PAGE);
+            // The applied theme, after the built-in stylesheet so it wins on order.
+            // `?theme=default` is safe mode: a page that cannot be read must still
+            // be reachable, so the way out does not depend on the theme it escapes.
+            // The CSS is ours, printed from validated colours; `</` cannot occur in
+            // it, but is refused anyway so nothing could ever close the tag early.
+            const css = url.searchParams.get("theme") === "default" ? "" : themes.state().css;
+            const tag = css && !css.includes("</") ? `<style id="oh-user-theme">${css}</style>` : `<style id="oh-user-theme"></style>`;
+            res.end(PAGE.replace("</head>", `${tag}\n</head>`));
             return;
         }
         // The other exception, and for the same kind of reason: this one is
@@ -484,6 +755,21 @@ export async function startWebServer(opts) {
             }
             return serveArtifactBody(url, res);
         }
+        // Fourth exception: a theme's images, loaded by CSS `url()`, which cannot
+        // carry the token. The name is the sha-256 of the bytes (theme-assets.ts),
+        // so knowing it already means having the picture; nothing else is served.
+        if (url.pathname.startsWith("/theme-asset/") && req.method === "GET") {
+            const id = url.pathname.slice("/theme-asset/".length);
+            if (!ASSET_ID.test(id) || !(await assetExists(id)))
+                return send(res, 404, { error: "no such asset" });
+            res.writeHead(200, {
+                "content-type": ASSET_TYPES[id.slice(id.lastIndexOf(".") + 1)],
+                "cache-control": "private, max-age=31536000, immutable",
+                "x-content-type-options": "nosniff",
+            });
+            res.end(await readFile(themeAssetPath(id)));
+            return;
+        }
         if (!authorized(url, req))
             return send(res, 401, { error: "missing or bad token" });
         switch (`${req.method} ${url.pathname}`) {
@@ -742,6 +1028,25 @@ export async function startWebServer(opts) {
             }
             case "GET /events":
                 return stream(res);
+            /**
+             * What the empty state offers, for the session's project: the fixed
+             * three while the project has no memory, three written from its notes
+             * once it does. Asked separately from /state because writing them can
+             * take the small model a few seconds, and the page must not wait on it.
+             */
+            case "GET /starters": {
+                // Only a project already open: asking must not open one, which would
+                // connect its MCP servers and make it the one the next launch opens.
+                const cwd = url.searchParams.get("cwd") || current.session.cwd;
+                const harness = cwd === current.session.cwd ? current.harness : harnesses.get(cwd);
+                if (!harness)
+                    return send(res, 200, { kind: "fixed" });
+                const locale = url.searchParams.get("locale") ?? "en";
+                // The model picked in the composer is one the user has reached; the
+                // first-configured one may sit behind a gate they never passed.
+                const picked = (await readPrefs()).model;
+                return send(res, 200, await starters(harness, cwd, locale, picked));
+            }
             case "GET /state": {
                 const runner = runnerFor(url.searchParams.get("session"));
                 if (!runner)
@@ -757,13 +1062,41 @@ export async function startWebServer(opts) {
              * the page, and without this its chip would be the only one in the row
              * with no picture on it.
              */
+            case "GET /pick/preview": {
+                // A picture of a file picked in the dialog: an image, or a clip the
+                // tray plays muted. Nothing else, and nothing not picked.
+                const target = path.resolve(url.searchParams.get("path") ?? "");
+                const type = PICKED_IMAGE_TYPES[path.extname(target).toLowerCase()] ?? PICKED_VIDEO_TYPES[path.extname(target).toLowerCase()];
+                if (!pickedPaths.has(target) || !type)
+                    return send(res, 404, { error: "not a picked picture" });
+                let size = 0;
+                try {
+                    size = (await stat(target)).size;
+                }
+                catch {
+                    return send(res, 404, { error: "not a picked picture" });
+                }
+                res.writeHead(200, {
+                    "content-type": type,
+                    "content-length": size,
+                    "x-content-type-options": "nosniff",
+                    "content-security-policy": "default-src 'none'; sandbox",
+                    "cache-control": "private, no-store",
+                });
+                const stream = createReadStream(target);
+                stream.on("error", () => res.destroy());
+                res.on("close", () => stream.destroy());
+                stream.pipe(res);
+                return;
+            }
             case "GET /upload/preview": {
                 const staged = attachments.get(url.searchParams.get("id") ?? "");
                 if (!staged)
                     return send(res, 404, { error: "no such upload" });
                 // The same allowlist as the transcript's images, for the same reason:
-                // this is served same-origin to a page holding the session token.
-                if (!VIEWABLE_IMAGE_TYPES.has(staged.mediaType)) {
+                // this is served same-origin to a page holding the session token —
+                // and the clips the tray can play, which no browser runs as a page.
+                if (!VIEWABLE_IMAGE_TYPES.has(staged.mediaType) && !Object.values(PICKED_VIDEO_TYPES).includes(staged.mediaType)) {
                     return send(res, 415, { error: `cannot display ${staged.mediaType}` });
                 }
                 res.writeHead(200, {
@@ -795,7 +1128,13 @@ export async function startWebServer(opts) {
                 const index = Number(url.searchParams.get("message"));
                 const position = Number(url.searchParams.get("block"));
                 const message = Number.isInteger(index) ? runner.session.messages[index - 1] : undefined;
-                const block = Number.isInteger(position) ? message?.content[position] : undefined;
+                let block = Number.isInteger(position) ? message?.content[position] : undefined;
+                // A tool's own image, such as a screenshot, sits one level down: inside
+                // the tool_result, at `part`.
+                if (block?.type === "tool_result" && url.searchParams.has("part")) {
+                    const part = Number(url.searchParams.get("part"));
+                    block = Number.isInteger(part) ? block.content[part] : undefined;
+                }
                 if (!block || block.type !== "image")
                     return send(res, 404, { error: "no such image" });
                 // The media type on a block is whatever the upload claimed, and this
@@ -819,6 +1158,28 @@ export async function startWebServer(opts) {
                 res.end(data);
                 return;
             }
+            case "GET /turn-shot": {
+                const file = turnShotPath(String(url.searchParams.get("session") ?? ""), String(url.searchParams.get("file") ?? ""));
+                if (!file)
+                    return send(res, 404, { error: "no such picture" });
+                let data;
+                try {
+                    data = await readFile(file);
+                }
+                catch {
+                    return send(res, 404, { error: "no such picture" });
+                }
+                res.writeHead(200, {
+                    "content-type": "image/jpeg",
+                    "content-length": data.byteLength,
+                    "x-content-type-options": "nosniff",
+                    "content-security-policy": "default-src 'none'; sandbox",
+                    // Each name is written once and never rewritten.
+                    "cache-control": "private, max-age=31536000, immutable",
+                });
+                res.end(data);
+                return;
+            }
             case "GET /artifacts": {
                 const runner = runnerFor(url.searchParams.get("session"));
                 if (!runner)
@@ -1002,6 +1363,52 @@ export async function startWebServer(opts) {
                     teams: await accountTeams({ accountToken: await current.harness.accountToken() }),
                 });
             }
+            // Background tasks: the list, one task's conversation, and the two
+            // things a person can do to one — stop it, or tell it something.
+            case "GET /tasks": {
+                const runner = runnerFor(url.searchParams.get("session"));
+                if (!runner)
+                    return send(res, 404, { error: "no such session" });
+                return send(res, 200, { tasks: runner.agent.backgroundTasks?.list() ?? [] });
+            }
+            case "GET /task": {
+                const runner = runnerFor(url.searchParams.get("session"));
+                if (!runner)
+                    return send(res, 404, { error: "no such session" });
+                const id = url.searchParams.get("id") ?? "";
+                const task = runner.agent.backgroundTasks?.get(id);
+                if (!task)
+                    return send(res, 404, { error: "no such task" });
+                return send(res, 200, { task, transcript: taskTranscript(runner.agent.backgroundTranscript(id) ?? []) });
+            }
+            case "POST /task": {
+                const body = await readJson(req);
+                const runner = runnerFor(body.session);
+                const tasks = runner?.agent.backgroundTasks;
+                if (!runner || !tasks)
+                    return send(res, 404, { error: "no such session" });
+                const id = String(body.id ?? "");
+                if (!tasks.get(id))
+                    return send(res, 404, { error: "no such task" });
+                if (body.action === "stop")
+                    return send(res, 200, { stopped: tasks.stop(id), task: tasks.get(id) });
+                if (body.action === "dismiss")
+                    return send(res, 200, { dismissed: tasks.dismiss(id), task: tasks.get(id) });
+                if (body.action === "message") {
+                    const text = String(body.text ?? "").trim();
+                    if (!text)
+                        return send(res, 400, { error: "text is required" });
+                    // Said so, because the subagent's "user" is otherwise its parent
+                    // agent: this one came from the person, past the parent.
+                    const sent = tasks.send(id, `[From the person, directly:]\n${text}`);
+                    if (sent === "stopped")
+                        return send(res, 409, { error: "this task was stopped and cannot be continued" });
+                    if (sent === "busy")
+                        return send(res, 409, { error: "the task is between steps; try again in a moment" });
+                    return send(res, 200, { sent, task: tasks.get(id) });
+                }
+                return send(res, 400, { error: "action must be stop, dismiss or message" });
+            }
             case "GET /history":
                 {
                     // Opening the page mid-session should show what has happened, not an
@@ -1017,11 +1424,16 @@ export async function startWebServer(opts) {
                 const pinned = new Set(prefs.pinnedProjects ?? []);
                 return send(res, 200, {
                     order: prefs.projectOrder ?? [],
+                    // So the picker can write a path the way people say it: ~/code/app.
+                    home: homedir(),
                     projects: projects.map((project) => ({
                         ...project,
                         pinned: pinned.has(project.path),
                         current: project.path === current.session.cwd,
                     })),
+                    // Which session directories are worktrees, and of what: the sidebar
+                    // nests them under the project they came from.
+                    worktrees: (await listWorktrees()).map(worktreeView),
                 });
             }
             /**
@@ -1095,7 +1507,11 @@ export async function startWebServer(opts) {
                 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);
+                const run = isLauncher(body.run) ? body.run : undefined;
+                // Only for the claude launcher, and only an id shaped like one: it is
+                // typed into a shell, so nothing else gets near the command line.
+                const resume = run === "claude" && isAgentSessionId(body.resume) ? body.resume : undefined;
+                const result = await terminals.open(root, { cols: body.cols, rows: body.rows }, replace, run, resume);
                 return send(res, "error" in result ? 500 : 200, result);
             }
             case "GET /term/list": {
@@ -1146,6 +1562,12 @@ export async function startWebServer(opts) {
                     return send(res, 400, { error: "not a folder" });
                 return send(res, 200, await browseFiles(root, url.searchParams.get("dir") ?? "", { all: true }));
             }
+            case "GET /files/search": {
+                const root = await projectRoot(url.searchParams.get("cwd"));
+                if (!root)
+                    return send(res, 400, { error: "not a folder" });
+                return send(res, 200, await searchFiles(root, (url.searchParams.get("q") ?? "").slice(0, 200)));
+            }
             case "GET /files/read": {
                 const root = await projectRoot(url.searchParams.get("cwd"));
                 if (!root)
@@ -1229,7 +1651,14 @@ export async function startWebServer(opts) {
                     const entries = await Promise.all(chosen.paths.map(async (chosenPath) => {
                         const dir = await isDirectory(chosenPath);
                         const reachable = isReadable(current.harness.workspace, chosenPath);
-                        const carried = dir || reachable ? undefined : await stageFromDisk(chosenPath);
+                        if (!dir)
+                            pickedPaths.add(path.resolve(chosenPath));
+                        // An image or a PDF is carried even from inside the project: the
+                        // model looks at it directly, rather than learning a path and
+                        // spending a tool call to open it. Anything else in reach stays
+                        // a reference the agent reads with its own tools.
+                        const media = !dir && /\.(png|jpe?g|gif|webp|pdf)$/i.test(chosenPath);
+                        const carried = dir || (reachable && !media) ? undefined : await stageFromDisk(chosenPath);
                         return {
                             path: within(current.session.cwd, chosenPath),
                             dir,
@@ -1484,11 +1913,139 @@ export async function startWebServer(opts) {
                     return send(res, 400, { error: errorMessage(err) });
                 }
             }
+            /**
+             * What a worktree for this task would be called, before it is made.
+             */
+            case "GET /worktree/preview": {
+                const task = (url.searchParams.get("task") ?? "").trim();
+                const from = url.searchParams.get("cwd") || current.session.cwd;
+                if (!task)
+                    return send(res, 400, { error: "task is required" });
+                try {
+                    return send(res, 200, await previewWorktree(from, { task, slug: url.searchParams.get("slug") ?? undefined }));
+                }
+                catch (err) {
+                    return send(res, 400, { error: errorMessage(err) });
+                }
+            }
+            /**
+             * A new session in a new worktree beside a project, and optionally its
+             * first message — the composer's "In a new worktree".
+             */
+            case "POST /worktree": {
+                const body = await readJson(req);
+                const task = typeof body.task === "string" ? body.task.trim() : "";
+                if (!task)
+                    return send(res, 400, { error: "task is required" });
+                const from = typeof body.cwd === "string" && body.cwd.trim() ? body.cwd.trim() : current.session.cwd;
+                const type = BRANCH_TYPES.includes(body.type) ? body.type : undefined;
+                let worktree;
+                try {
+                    worktree = await createWorktree(from, {
+                        task,
+                        ...(typeof body.slug === "string" && body.slug.trim() ? { slug: body.slug.trim() } : {}),
+                        ...(type ? { type } : {}),
+                    });
+                }
+                catch (err) {
+                    return send(res, 400, { error: errorMessage(err) });
+                }
+                const snapshot = await switchSession({ action: "new", cwd: worktree.cwd });
+                if ("error" in snapshot)
+                    return send(res, 400, snapshot);
+                broadcast({ type: "projects" });
+                broadcast({ type: "sessions" });
+                const prompt = typeof body.prompt === "string" ? body.prompt.trim() : "";
+                const runner = runners.get(snapshot.sessionId);
+                if (prompt && runner) {
+                    const ids = Array.isArray(body.attachments) ? body.attachments : [];
+                    const staged = ids
+                        .map((id) => (typeof id === "string" ? attachments.get(id) : undefined))
+                        .filter((entry) => Boolean(entry));
+                    for (const id of ids)
+                        if (typeof id === "string")
+                            attachments.delete(id);
+                    void runTurn(runner, prompt, staged, readReferences(body.references), body.goal === true);
+                }
+                return send(res, 200, { ...snapshot, worktree: worktreeView(worktree) });
+            }
+            case "GET /worktree/status": {
+                const dir = url.searchParams.get("path") ?? "";
+                const worktree = dir ? await findWorktree(dir) : undefined;
+                if (!worktree)
+                    return send(res, 404, { error: "not a worktree" });
+                try {
+                    const status = await worktreeStatus(worktree);
+                    return send(res, 200, { worktree: worktreeView(worktree), status, actions: finishActions(worktree, status) });
+                }
+                catch (err) {
+                    return send(res, 400, { error: errorMessage(err) });
+                }
+            }
+            /**
+             * Leave a worktree: commit, push, merge, apply back, remove or discard.
+             *
+             * The sessions recorded in it stay in history; what goes, for the
+             * actions that remove it, is the open tabs and the harness bound to a
+             * directory that is about to disappear.
+             */
+            case "POST /worktree/finish": {
+                const body = await readJson(req);
+                const dir = typeof body.path === "string" ? body.path : "";
+                const action = String(body.action ?? "");
+                if (!["remove", "discard", "commit", "push", "merge", "apply"].includes(action)) {
+                    return send(res, 400, { error: `unknown action: ${action}` });
+                }
+                const worktree = dir ? await findWorktree(dir) : undefined;
+                if (!worktree)
+                    return send(res, 404, { error: "not a worktree" });
+                const inside = [...runners.values()].filter((runner) => insideAny([worktree.path], runner.session.cwd));
+                if (inside.some((runner) => runner.running))
+                    return send(res, 409, { error: "a turn is running in that worktree" });
+                let result;
+                try {
+                    result = await finishWorktree(worktree, action, {
+                        ...(typeof body.message === "string" ? { message: body.message } : {}),
+                    });
+                }
+                catch (err) {
+                    return send(res, 400, { error: errorMessage(err) });
+                }
+                let moved;
+                if (result.removed) {
+                    for (const runner of inside) {
+                        await runner.agent.closeBackgroundTasks();
+                        runners.delete(runner.session.id);
+                        await runner.harness.closeBrowserFor(runner.session.id);
+                    }
+                    for (const [dirKey, harness] of [...harnesses]) {
+                        if (!insideAny([worktree.path], dirKey))
+                            continue;
+                        harnesses.delete(dirKey);
+                        await harness.close().catch(() => { });
+                    }
+                    await removeProject(worktree.cwd).catch(() => false);
+                    cachedLogs = undefined;
+                    // The window was standing in it: back to the project it came from.
+                    if (insideAny([worktree.path], current.session.cwd) || !runners.has(focused)) {
+                        moved = await switchProject(worktree.source).catch(() => undefined);
+                    }
+                }
+                broadcast({ type: "projects" });
+                broadcast({ type: "sessions" });
+                return send(res, 200, { result, open: [...runners.keys()], ...(moved ? { state: moved } : {}) });
+            }
             case "POST /project": {
                 const body = await readJson(req);
                 const dir = typeof body.path === "string" ? body.path : "";
                 // Any tab: switching projects rebuilds the harness under every runner.
-                if (anyRunning())
+                // Except a purge, which stops the turns in its own tree itself — that
+                // is half of what deleting permanently means — so only a turn running
+                // somewhere else stands in its way.
+                const blocking = body.purge === true
+                    ? [...runners.values()].some((runner) => runner.running && runner.session.cwd !== path.resolve(dir))
+                    : anyRunning();
+                if (blocking)
                     return send(res, 409, { error: "a turn is running" });
                 if (typeof body.rename === "string") {
                     const oldPath = path.resolve(dir);
@@ -1537,9 +2094,34 @@ export async function startWebServer(opts) {
                  * the work.
                  */
                 if (body.purge === true) {
-                    const deleted = await current.harness.deleteSessionsIn(dir);
-                    for (const id of deleted)
+                    // Every session open in this tree, not only those the store finds:
+                    // one nobody has spoken to, or whose transcript is already gone, is
+                    // still a runner here and a row in the sidebar, and closing only
+                    // what was on disk left exactly those behind — the delete looked
+                    // like it did nothing. "Delete permanently" is the answer to whether
+                    // a turn still going should go on, so it is stopped, and given a
+                    // moment to end before the store goes, or its last write would
+                    // bring the transcript back. A wedged turn is not waited on forever.
+                    const open = [...runners.values()].filter((runner) => runner.session.cwd === dir);
+                    for (const runner of open) {
+                        runner.queue.length = 0;
+                        runner.running?.abort();
+                    }
+                    for (let waited = 0; open.some((runner) => runner.running) && waited < 5000; waited += 50) {
+                        await new Promise((resolve) => setTimeout(resolve, 50));
+                    }
+                    // Before the store goes, as for one session: a task stopped
+                    // afterwards would write its record back.
+                    for (const runner of open)
+                        await runner.agent.discardBackgroundTasks();
+                    const onDisk = await current.harness.deleteSessionsIn(dir);
+                    const deleted = [...new Set([...onDisk, ...open.map((runner) => runner.session.id)])];
+                    for (const id of deleted) {
+                        const removed = runners.get(id);
                         runners.delete(id);
+                        await removed?.harness.closeBrowserFor(id);
+                        await removeTurnShots(id);
+                    }
                     // Their artifact logs went with them, and a listing built a moment
                     // ago still names them.
                     cachedLogs = undefined;
@@ -1663,7 +2245,36 @@ export async function startWebServer(opts) {
                 const name = url.searchParams.get("name") ?? "";
                 if (!name)
                     return send(res, 400, { error: "name is required" });
-                return send(res, 200, { runs: await current.harness.scheduler.history(name, 30) });
+                // The one going now first: its line is only written when it ends.
+                const going = activeRun(name);
+                const runs = await current.harness.scheduler.history(name, 30);
+                return send(res, 200, { runs: going ? [{ ...going, running: true }, ...runs] : runs });
+            }
+            case "GET /turn-shots":
+                return send(res, 200, { enabled: turnShotsOn });
+            case "POST /turn-shots": {
+                const body = await readJson(req);
+                if (typeof body.enabled !== "boolean")
+                    return send(res, 400, { error: "enabled must be a boolean" });
+                await writePrefs({ turnShots: body.enabled });
+                turnShotsOn = body.enabled;
+                return send(res, 200, { enabled: body.enabled });
+            }
+            case "GET /suggestions":
+                return send(res, 200, { enabled: suggestionsOn });
+            case "POST /suggestions": {
+                const body = await readJson(req);
+                if (typeof body.enabled !== "boolean")
+                    return send(res, 400, { error: "enabled must be a boolean" });
+                await writePrefs({ suggestions: body.enabled });
+                suggestionsOn = body.enabled;
+                // Off means gone, not only no new ones: a guess already in a box would
+                // keep offering itself after the switch said not to.
+                if (!body.enabled)
+                    for (const controller of suggesting.values())
+                        controller.abort();
+                broadcast({ type: "suggestions", enabled: body.enabled });
+                return send(res, 200, { enabled: body.enabled });
             }
             case "GET /keep-awake":
                 return send(res, 200, {
@@ -1677,7 +2288,7 @@ export async function startWebServer(opts) {
                 if (typeof body.enabled !== "boolean")
                     return send(res, 400, { error: "enabled must be a boolean" });
                 await writePrefs({ keepAwake: body.enabled });
-                opts.onKeepAwake(body.enabled);
+                await applyKeepAwake();
                 return send(res, 200, { available: true, enabled: body.enabled });
             }
             case "POST /routine/remove": {
@@ -1730,6 +2341,8 @@ export async function startWebServer(opts) {
                     // whether the switch it draws is the user's to flip.
                     audit: await current.harness.auditStatus(),
                     browserMode: current.harness.browserMode(),
+                    // Off unless the user turned it on: it spends their Claude plan.
+                    claudeAgent: await current.harness.claudeAgentStatus(),
                     // 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(),
@@ -1762,6 +2375,22 @@ export async function startWebServer(opts) {
              * switch that changed only the project on screen would look ignored the
              * moment someone opened another one.
              */
+            /**
+             * Claude Agent on or off. Every open project's harness at once, the way
+             * the browser mode is set: it is one person's choice about their own
+             * Claude account, not a property of a folder.
+             */
+            case "POST /settings/claude-agent": {
+                const body = await readJson(req);
+                if (typeof body.enabled !== "boolean")
+                    return send(res, 400, { error: "enabled must be a boolean" });
+                for (const harness of new Set([current.harness, ...harnesses.values()])) {
+                    await harness.setClaudeAgent(body.enabled);
+                }
+                // The @ menu lists the agents a message can go to; it is now out of date.
+                broadcast({ type: "connectors_changed", ...contextOffer() });
+                return send(res, 200, await current.harness.claudeAgentStatus());
+            }
             case "POST /settings/browser-mode": {
                 const body = await readJson(req);
                 if (body.mode !== "auto" && body.mode !== "builtin" && body.mode !== "extension") {
@@ -1953,6 +2582,85 @@ export async function startWebServer(opts) {
                     signedIn: Boolean(await current.harness.accountToken()),
                 });
             }
+            /**
+             * Dictation, step one: what the microphone recorded, as text. Through
+             * the account's gateway (OttoPort's speech-to-text, billed per second
+             * from the account's credits) when signed in; otherwise straight to
+             * OpenAI with the user's own key when there is one. Neither: the page
+             * says to sign in or add a key.
+             */
+            case "POST /voice/transcribe": {
+                const body = await readJson(req, VOICE_MAX_BODY_BYTES);
+                const audio = typeof body.audio === "string" ? body.audio : "";
+                const format = typeof body.format === "string" && VOICE_FORMATS.has(body.format) ? body.format : "";
+                const duration = typeof body.duration === "number" && Number.isFinite(body.duration) ? body.duration : 0;
+                const language = typeof body.language === "string" ? body.language.slice(0, 2).toLowerCase() : undefined;
+                if (!audio || !format || duration <= 0)
+                    return send(res, 400, { error: "audio, format and duration are required" });
+                if (duration > VOICE_MAX_SECONDS)
+                    return send(res, 413, { error: `a recording can be up to ${VOICE_MAX_SECONDS / 60} minutes` });
+                const token = await current.harness.accountToken();
+                if (token) {
+                    const team = officialTeam();
+                    // A team pays when one is chosen, by the gateway's path prefix.
+                    const path = `${team ? `/teams/${encodeURIComponent(team)}` : ""}/api/v1/audio/transcriptions`;
+                    const ask = (model) => gatewayJson(path, {
+                        token,
+                        body: { model, audio, format, duration, ...(language ? { language } : {}) },
+                    });
+                    // Chinese is Qwen's strength; everything else gpt-4o-mini-transcribe.
+                    // Should the Qwen model be missing upstream, the default answers instead.
+                    const preferred = language === "zh" ? VOICE_TRANSCRIBE_MODEL_ZH : VOICE_TRANSCRIBE_MODEL;
+                    let result = await ask(preferred);
+                    if (!result.ok && preferred !== VOICE_TRANSCRIBE_MODEL && (result.status === 400 || result.status === 404)) {
+                        result = await ask(VOICE_TRANSCRIBE_MODEL);
+                    }
+                    if (!result.ok)
+                        return send(res, result.status === 402 ? 402 : 502, { error: result.error });
+                    return send(res, 200, { text: typeof result.value.text === "string" ? result.value.text : "", via: "oharness" });
+                }
+                const openai = await current.harness.auth.secret("openai").catch(() => undefined);
+                if (openai) {
+                    const text = await transcribeWithOpenAI(openai, audio, format, language);
+                    return text.ok ? send(res, 200, { text: text.value, via: "openai" }) : send(res, 502, { error: text.error });
+                }
+                return send(res, 401, { error: "Sign in to your OHarness account, or add an OpenAI key, to dictate.", code: "sign_in_required" });
+            }
+            /**
+             * Dictation, step two: the transcript tidied into the message meant.
+             * A perk of a paid OHarness plan, through the gateway's fast model; or,
+             * for someone who brought their own key, the small model they set up,
+             * run here. Anyone else gets the words back as they were heard.
+             */
+            case "POST /voice/tidy": {
+                const body = await readJson(req);
+                const text = typeof body.text === "string" ? body.text.trim() : "";
+                const language = typeof body.language === "string" ? body.language.slice(0, 16) : undefined;
+                if (!text)
+                    return send(res, 400, { error: "text is required" });
+                const asHeard = { text, tidied: false };
+                const token = await current.harness.accountToken();
+                if (token) {
+                    const result = await gatewayJson("/api/v1/voice/tidy", { token, body: { text, ...(language ? { language } : {}) } });
+                    if (result.ok && result.value.tidied === true && typeof result.value.text === "string") {
+                        return send(res, 200, { text: result.value.text, tidied: true, via: "oharness" });
+                    }
+                }
+                const own = await ownSmallModel(current.harness);
+                if (!own)
+                    return send(res, 200, asHeard);
+                try {
+                    const tidied = (await current.harness.generateText(VOICE_TIDY_PROMPT + (language ? `\nThe speaker's language setting is ${language}.` : ""), text, AbortSignal.timeout(10_000), Math.min(2048, text.length * 2 + 64), own)).trim();
+                    // A tidy is about as long as what was said; much longer is the model
+                    // answering the dictation instead of cleaning it.
+                    if (!tidied || tidied.length > text.length * 1.6 + 40)
+                        return send(res, 200, asHeard);
+                    return send(res, 200, { text: tidied, tidied: true, via: "own-key" });
+                }
+                catch {
+                    return send(res, 200, asHeard);
+                }
+            }
             case "POST /sync": {
                 const body = await readJson(req);
                 if (typeof body.enabled !== "boolean") {
@@ -2101,8 +2809,17 @@ export async function startWebServer(opts) {
                     return send(res, 400, { error: "enabled must be a boolean" });
                 }
                 await writePrefs({ analytics: body.enabled });
+                setConsent(body.enabled);
                 return send(res, 200, await analyticsState());
             }
+            // The page's usage events, checked and forwarded — or dropped, when the
+            // user has not opted in. The page never learns which.
+            case "POST /track": {
+                const cleaned = cleanEvent(await readJson(req, 10_000));
+                if (cleaned)
+                    void track(cleaned.event, cleaned.props);
+                return send(res, 200, { ok: true });
+            }
             case "GET /changes": {
                 const runner = runnerFor(url.searchParams.get("session"));
                 return send(res, 200, { changes: runner ? runner.ledger.list() : [] });
@@ -2350,7 +3067,7 @@ export async function startWebServer(opts) {
                         // and a false one say the same thing to the one reader there is.
                         ...(isFree(model) ? { free: true } : {}),
                     })),
-                    providers: current.harness.listCatalogProviders().map((entry) => ({
+                    providers: (await withSpend(current.harness.listCatalogProviders())).map(({ entry, spend30d }) => ({
                         id: entry.id,
                         label: entry.label,
                         envVars: entry.envVars,
@@ -2381,6 +3098,17 @@ export async function startWebServer(opts) {
                         // key into. The panel has no other way to tell, and offering a key
                         // field for an account-backed plan is a dead end.
                         signIn: signInMethod(entry.id),
+                        // A vendor's own browser sign-in — Sign in with ChatGPT, OpenRouter
+                        // — which is one button and a loopback redirect, not the account
+                        // dialog. Separate from signIn so the panel never offers an email
+                        // field for a vendor that has no use for one.
+                        ...(vendorSignInMethod(entry.id) ? { vendorSignIn: vendorSignInMethod(entry.id).label } : {}),
+                        // What this machine spent with the vendor lately, from its own
+                        // session records. Absent when nothing was, which is also the
+                        // answer for a plan (no per-token price). Never for the account:
+                        // it is billed in credits and has a usage page of its own, and an
+                        // estimate beside the ledger would be a second, different number.
+                        ...(spend30d > 0 && entry.id !== "official" ? { spend30d } : {}),
                     })),
                 });
             }
@@ -2457,6 +3185,49 @@ export async function startWebServer(opts) {
                     return send(res, 400, { error: errorMessage(err) });
                 }
             }
+            case "POST /signin/vendor": {
+                const body = await readJson(req);
+                const providerId = typeof body.provider === "string" ? body.provider : "";
+                const method = providerId ? vendorSignInMethod(providerId) : undefined;
+                if (!method)
+                    return send(res, 400, { error: "that provider has no browser sign-in" });
+                // The vendor redirects to a listener on this machine's loopback, so
+                // the browser that signs in has to be on this machine too. A window
+                // reached over a LAN address or a tunnel would send its browser to
+                // its own 127.0.0.1, where nothing is listening.
+                const host = req.headers.host ?? "127.0.0.1";
+                if (!isLoopbackHost(host)) {
+                    return send(res, 400, {
+                        error: `this window is open at ${host}, and the sign-in can only come back to the machine OHarness runs on — paste a key instead`,
+                    });
+                }
+                let flow;
+                try {
+                    flow = await current.harness.auth.authorize(providerId, method.index, {});
+                }
+                catch (err) {
+                    return send(res, 400, { error: errorMessage(err) });
+                }
+                if (flow.method !== "auto" || !flow.url) {
+                    return send(res, 400, { error: `${providerId} signs in a way this page cannot drive` });
+                }
+                send(res, 200, { url: flow.url, instructions: flow.instructions });
+                // The browser comes back to the vendor's redirect, not to this
+                // request, so the rest happens here in the background and is told to
+                // the page the way a website sign-in is: models_changed on success.
+                const harness = current.harness;
+                void flow
+                    .callback()
+                    .then(async (result) => {
+                    await harness.auth.complete(providerId, result);
+                    const found = await harness.refreshModels(providerId).catch(() => []);
+                    broadcast({ type: "models_changed", provider: providerId, discovered: found.length });
+                })
+                    .catch((err) => {
+                    broadcast({ type: "notice", message: `signing in to ${providerId} failed: ${errorMessage(err)}` });
+                });
+                return;
+            }
             case "POST /signin/browser": {
                 const body = await readJson(req);
                 const providerId = typeof body.provider === "string" ? body.provider : "";
@@ -2556,6 +3327,113 @@ export async function startWebServer(opts) {
                 });
                 return;
             }
+            /**
+             * Feedback, sent to the site as the signed-in account.
+             *
+             * Through this server rather than from the page, because the account's
+             * token lives here and never in the page. The site writes it as that
+             * account, so there is nothing to send for someone who is not signed in.
+             */
+            case "POST /feedback": {
+                const body = await readJson(req);
+                const message = typeof body.message === "string" ? body.message.trim() : "";
+                if (!message)
+                    return send(res, 400, { error: "message is required" });
+                const token = await current.harness.accountToken();
+                if (!token)
+                    return send(res, 401, { error: "sign in to send feedback" });
+                try {
+                    const reply = await fetch(`${siteUrl()}/api/feedback`, {
+                        method: "POST",
+                        headers: { authorization: `Bearer ${token}`, "content-type": "application/json", accept: "application/json" },
+                        body: JSON.stringify({
+                            kind: body.kind,
+                            message,
+                            source: typeof body.source === "string" ? body.source : "app",
+                            appVersion: typeof body.appVersion === "string" ? body.appVersion : undefined,
+                            // Paths from `/feedback/upload`; the site keeps only this account's.
+                            attachments: Array.isArray(body.attachments) ? body.attachments.slice(0, 5) : undefined,
+                            // The machine this server runs on, which the page cannot see.
+                            platform: `${process.platform} ${process.arch}`,
+                        }),
+                        signal: AbortSignal.timeout(15_000),
+                    });
+                    const answer = (await reply.json().catch(() => ({})));
+                    if (!reply.ok) {
+                        // A 404 is a site that has not shipped feedback yet, not one that is down.
+                        const error = reply.status === 404
+                            ? "feedback is not available on this site yet"
+                            : typeof answer.error === "string" ? answer.error : `the site refused it (HTTP ${reply.status})`;
+                        return send(res, reply.status === 404 ? 502 : reply.status, { error });
+                    }
+                    return send(res, 200, { ok: true });
+                }
+                catch (error) {
+                    return send(res, 502, { error: error instanceof Error ? error.message : String(error) });
+                }
+            }
+            /**
+             * One screenshot or recording for a feedback message.
+             *
+             * The page sends the bytes here, as `/upload` does, and this server asks
+             * the site for a one-time upload URL under the account's token and puts
+             * the file straight into storage there. The site only names the file;
+             * the bytes never pass through it. Answers what `/feedback` then sends
+             * as an attachment.
+             */
+            case "POST /feedback/upload": {
+                const token = await current.harness.accountToken();
+                if (!token)
+                    return send(res, 401, { error: "sign in to send feedback" });
+                const type = String(req.headers["content-type"] ?? "").split(";")[0].trim().toLowerCase();
+                const rawName = String(req.headers["x-filename"] ?? "file");
+                let name = rawName;
+                try {
+                    name = decodeURIComponent(rawName);
+                }
+                catch { /* sent unencoded */ }
+                let bytes;
+                try {
+                    bytes = await readBody(req, FEEDBACK_MAX_BYTES);
+                }
+                catch {
+                    return send(res, 413, { error: "each file can be up to 50 MB" });
+                }
+                if (!bytes.length)
+                    return send(res, 400, { error: "that file is empty" });
+                try {
+                    const ticket = await fetch(`${siteUrl()}/api/feedback/upload`, {
+                        method: "POST",
+                        headers: { authorization: `Bearer ${token}`, "content-type": "application/json", accept: "application/json" },
+                        body: JSON.stringify({ name, type, size: bytes.length }),
+                        signal: AbortSignal.timeout(15_000),
+                    });
+                    const granted = (await ticket.json().catch(() => ({})));
+                    if (!ticket.ok || typeof granted.path !== "string" || typeof granted.signedUrl !== "string") {
+                        const error = ticket.status === 404
+                            ? "attachments are not available on this site yet"
+                            : typeof granted.error === "string" ? granted.error : `the site refused it (HTTP ${ticket.status})`;
+                        return send(res, ticket.status === 404 ? 502 : ticket.status || 502, { error });
+                    }
+                    // A minute a megabyte, at least two: a recording on a slow uplink
+                    // takes a while, and a timeout that cuts it off helps nobody.
+                    const put = await fetch(granted.signedUrl, {
+                        method: "PUT",
+                        headers: { "content-type": type, "x-upsert": "false" },
+                        body: new Uint8Array(bytes),
+                        signal: AbortSignal.timeout(Math.max(120_000, Math.ceil((bytes.length / 1_048_576) * 60_000))),
+                    });
+                    if (!put.ok) {
+                        const detail = (await put.json().catch(() => ({})));
+                        const message = typeof detail.message === "string" ? detail.message : typeof detail.error === "string" ? detail.error : `HTTP ${put.status}`;
+                        return send(res, 502, { error: `upload failed: ${message}` });
+                    }
+                    return send(res, 200, { path: granted.path, name, type, size: bytes.length });
+                }
+                catch (error) {
+                    return send(res, 502, { error: error instanceof Error ? error.message : String(error) });
+                }
+            }
             case "POST /logout": {
                 const body = await readJson(req);
                 const providerId = typeof body.provider === "string" ? body.provider : "";
@@ -2593,6 +3471,12 @@ export async function startWebServer(opts) {
                     // next run: picking a model is a decision, not a per-session detail.
                     preferredModel = change.to.id;
                     void writePrefs({ model: preferredModel });
+                    // Kept with the conversation now, not at its next turn: picked and
+                    // closed before sending, it would otherwise reopen on the old one.
+                    // A conversation with nothing in it yet is not written, or every
+                    // pick in a new tab would leave an empty session in the list.
+                    if (runner.session.messages.length)
+                        void runner.session.persist().catch(() => { });
                     broadcast({
                         type: "model_changed",
                         session: runner.session.id,
@@ -2605,6 +3489,129 @@ export async function startWebServer(opts) {
                     return send(res, 400, { error: errorMessage(err) });
                 }
             }
+            case "POST /goal": {
+                const body = await readJson(req);
+                const runner = runnerFor(body.session);
+                if (!runner)
+                    return send(res, 404, { error: "no such session" });
+                // Setting one goes through /prompt, since it is also the first
+                // message; this is the way out of one.
+                runner.session.goal = undefined;
+                void runner.session.persist().catch(() => { });
+                broadcast({ type: "state", session: runner.session.id, state: state(runner) });
+                return send(res, 200, state(runner));
+            }
+            // /compact: summarize the conversation now rather than when it fills.
+            case "POST /compact": {
+                const body = await readJson(req);
+                const runner = runnerFor(body.session);
+                if (!runner)
+                    return send(res, 404, { error: "no such session" });
+                // The running turn owns the transcript; cutting it underneath would
+                // drop the messages the next request is being built from.
+                if (runner.running)
+                    return send(res, 409, { error: "wait for the running turn to finish before compacting" });
+                const event = await runner.agent.compactNow();
+                if (!event)
+                    return send(res, 200, { ...state(runner), compacted: false });
+                // The same notice the automatic kind leaves in the transcript.
+                broadcast({ ...event, session: runner.session.id });
+                broadcast({ type: "state", session: runner.session.id, state: state(runner) });
+                return send(res, 200, { ...state(runner), compacted: event.type === "compacted" });
+            }
+            // Computer Use: switched per conversation from the + menu.
+            case "POST /computer-use": {
+                const body = await readJson(req);
+                const runner = runnerFor(body.session);
+                if (!runner)
+                    return send(res, 404, { error: "no such session" });
+                if (!runner.harness.computerUse)
+                    return send(res, 404, { error: "Computer use is only available in the desktop app" });
+                const on = body.on === true;
+                runner.session.computerUse = on;
+                if (!on)
+                    runner.harness.computerFor(runner.session.id)?.endTurn();
+                void runner.session.persist().catch(() => { });
+                if (on)
+                    await refreshComputer(runner.harness.computerUse);
+                broadcast({ type: "state", session: runner.session.id, state: state(runner) });
+                return send(res, 200, state(runner));
+            }
+            // The grants the OS holds, read again: the card polls this while the
+            // person is in System Settings, and `request` shows the OS prompt first.
+            case "POST /computer-use/permissions": {
+                const body = await readJson(req);
+                const plugin = opts.computerUsePlugin ?? runners.get(focused)?.harness.computerUse;
+                if (!plugin)
+                    return send(res, 404, { error: "not available here" });
+                if (body.request) {
+                    const grant = body.grant === "screen" || body.grant === "accessibility" ? body.grant : undefined;
+                    await plugin.runtime.requestPermissions(grant).catch((err) => {
+                        computerStatus.error = errorMessage(err);
+                    });
+                }
+                await refreshComputer(plugin);
+                for (const runner of runners.values()) {
+                    if (runner.session.computerUse)
+                        broadcast({ type: "state", session: runner.session.id, state: state(runner) });
+                }
+                return send(res, 200, {
+                    ...computerStatus,
+                    relaunch: Boolean(opts.onRelaunch),
+                    ...(opts.computerGrantee ? { grantee: opts.computerGrantee } : {}),
+                });
+            }
+            // The two settings the person owns, read by the desktop's plugin.
+            case "GET /computer-use/settings": {
+                const prefs = await readPrefs();
+                return send(res, 200, {
+                    available: Boolean(opts.computerUsePlugin),
+                    takeover: prefs.computerTakeover === "never" ? "never" : "ask",
+                    enable: prefs.computerEnable ?? "ask",
+                    blockedApps: prefs.computerBlockedApps ?? [],
+                });
+            }
+            case "POST /computer-use/settings": {
+                if (!opts.computerUsePlugin)
+                    return send(res, 404, { error: "not available here" });
+                const body = await readJson(req);
+                const patch = {};
+                if (body.takeover === "ask" || body.takeover === "never")
+                    patch.computerTakeover = body.takeover;
+                if (body.enable === "ask" || body.enable === "auto" || body.enable === "off")
+                    patch.computerEnable = body.enable;
+                if (Array.isArray(body.blockedApps)) {
+                    patch.computerBlockedApps = [...new Set(body.blockedApps.map((a) => String(a).trim()).filter(Boolean))];
+                }
+                await writePrefs(patch);
+                return send(res, 200, { ok: true });
+            }
+            /** What the live view shows when it opens: the conversation's last action. */
+            case "GET /computer-use/view": {
+                const id = url.searchParams.get("session") ?? "";
+                return send(res, 200, { event: computerLast.get(id) ?? null });
+            }
+            /**
+             * The live view's stop button: end the turn, and let go of every window
+             * and of the mouse and keyboard at once, rather than when the turn
+             * notices it was stopped.
+             */
+            case "POST /computer-use/stop": {
+                const body = await readJson(req);
+                const runner = runnerFor(body.session);
+                if (!runner)
+                    return send(res, 404, { error: "no such session" });
+                runner.running?.abort();
+                runner.harness.computerFor(runner.session.id)?.endTurn();
+                return send(res, 200, { ok: true });
+            }
+            case "POST /computer-use/relaunch": {
+                if (!opts.onRelaunch)
+                    return send(res, 404, { error: "not available here" });
+                send(res, 200, { ok: true });
+                opts.onRelaunch();
+                return;
+            }
             case "POST /effort": {
                 const body = await readJson(req);
                 const runner = runnerFor(body.session);
@@ -2632,6 +3639,12 @@ export async function startWebServer(opts) {
                     return send(res, 400, { error: `unknown mode: ${mode}` });
                 }
                 runner.session.permissions.setMode(mode);
+                // Kept with the conversation, so it reopens in this mode. Only one
+                // that is already on disk: a new one writes its record on its first
+                // message, and that record carries the mode.
+                if (runner.session.messages.length)
+                    await runner.session.persist().catch(() => { });
+                await rememberMode(mode);
                 broadcast({ type: "state", session: runner.session.id, state: state(runner) });
                 return send(res, 200, state(runner));
             }
@@ -2643,6 +3656,9 @@ export async function startWebServer(opts) {
                     const id = String(body.id ?? "");
                     const runner = runners.get(id);
                     runner?.running?.abort();
+                    // Its background tasks stop with it, written down as they stood, so
+                    // reopening it brings them back the way a restart would.
+                    await runner?.agent.closeBackgroundTasks();
                     runners.delete(id);
                     await runner?.harness.closeBrowserFor(id);
                     // Its artifacts move from memory to the log half of the catalogue,
@@ -2665,8 +3681,12 @@ export async function startWebServer(opts) {
                     // Reported rather than blocked: a fork records its parent, so the
                     // page can say what the lineage loses instead of the branches
                     // quietly pointing at nothing.
+                    // Before the store goes: a task stopped afterwards would write its
+                    // record back for a session that no longer exists.
+                    await runners.get(id)?.agent.discardBackgroundTasks();
                     const forks = (await current.harness.store.children(id)).length;
                     const deleted = await current.harness.deleteSession(id);
+                    await removeTurnShots(id);
                     // A session nobody has spoken to has nothing on disk yet — the store
                     // writes on the first message — but it is still a session someone
                     // opened, and it is exactly the kind that gets thrown away when the
@@ -2705,6 +3725,38 @@ export async function startWebServer(opts) {
                 }
                 return send(res, 200, await switchSession(body));
             }
+            /**
+             * Remote control, as this Mac's settings show it: whether it is on, the
+             * phones that may connect, and any waiting to be allowed.
+             */
+            case "GET /remote":
+                return send(res, 200, await remoteView());
+            /** The switch: saved, then started or stopped in this process, no restart. */
+            case "POST /remote": {
+                if (!opts.remote)
+                    return send(res, 404, { error: "not available here" });
+                const body = await readJson(req);
+                if (typeof body.enabled !== "boolean")
+                    return send(res, 400, { error: "enabled must be a boolean" });
+                await writePrefs({ remote: body.enabled });
+                await setRemote(body.enabled);
+                return send(res, 200, await remoteView());
+            }
+            case "POST /remote/pair": {
+                const body = await readJson(req);
+                if (typeof body.id !== "string" || !answerPairing(body.id, body.allow === true)) {
+                    return send(res, 404, { error: "no phone is waiting for that" });
+                }
+                return send(res, 200, { ok: true });
+            }
+            case "POST /remote/revoke": {
+                const body = await readJson(req);
+                if (typeof body.id !== "string" || !(await revokeDevice(body.id)))
+                    return send(res, 404, { error: "no such phone" });
+                // Forgotten means gone now, not at its next reconnect.
+                forgetPhone(body.id);
+                return send(res, 200, { ok: true });
+            }
             case "GET /open":
                 // What the page should draw tabs for after a reload.
                 return send(res, 200, {
@@ -2798,6 +3850,12 @@ export async function startWebServer(opts) {
                 if (!prompt && !ids.length && !references.length) {
                     return send(res, 400, { error: "prompt is required" });
                 }
+                void markUsed();
+                // Goal mode: the text is the goal, and the turn keeps going until the
+                // model reports it achieved or blocked. A goal needs words to be one.
+                const goal = body.goal === true;
+                if (goal && !prompt)
+                    return send(res, 400, { error: "a goal needs a description" });
                 const staged = ids
                     .map((id) => (typeof id === "string" ? attachments.get(id) : undefined))
                     .filter((entry) => Boolean(entry));
@@ -2817,11 +3875,11 @@ export async function startWebServer(opts) {
                 // This used to 409, and the page discarded the reply, so an impatient
                 // Enter cleared the composer and lost what had been typed.
                 if (runner.running) {
-                    runner.queue.push({ id: randomUUID(), prompt, staged, references });
+                    runner.queue.push({ id: randomUUID(), prompt, staged, references, ...(goal ? { goal } : {}) });
                     broadcastQueue(runner);
                     return send(res, 202, { ok: true, queued: true });
                 }
-                void runTurn(runner, prompt, staged, references);
+                void runTurn(runner, prompt, staged, references, goal);
                 return send(res, 202, { ok: true, attached: staged.length, referenced: references.length });
             }
             case "POST /permission": {
@@ -2850,6 +3908,54 @@ export async function startWebServer(opts) {
                 entry.settle(checked.result);
                 return send(res, 200, { ok: true });
             }
+            /*
+             * Themes: what is in use, the proposals waiting on a card, and the four
+             * things a person can do about them. Every change is pushed to open
+             * pages as a `theme` event, so a second window follows the first.
+             */
+            case "GET /theme": {
+                return send(res, 200, { state: themes.state(), previews: [...themePreviews.values()].map(themePreviewView) });
+            }
+            case "POST /theme/apply": {
+                const body = await readJson(req);
+                if (typeof body.preview === "string") {
+                    const preview = themePreviews.get(body.preview);
+                    if (!preview)
+                        return send(res, 404, { error: "that preview is gone; ask for the theme again" });
+                    const state = await themes.apply(preview.theme.input);
+                    themePreviews.delete(preview.id);
+                    broadcast({ type: "theme_preview_closed", id: preview.id, session: preview.session, outcome: "applied" });
+                    themeChanged(state);
+                    return send(res, 200, { state });
+                }
+                if (typeof body.history === "string") {
+                    const state = await themes.applyHistory(body.history);
+                    if (!state)
+                        return send(res, 404, { error: "no such theme in history" });
+                    themeChanged(state);
+                    return send(res, 200, { state });
+                }
+                return send(res, 400, { error: "preview or history is required" });
+            }
+            case "POST /theme/discard": {
+                const body = await readJson(req);
+                const preview = typeof body.preview === "string" ? themePreviews.get(body.preview) : undefined;
+                if (preview) {
+                    themePreviews.delete(preview.id);
+                    broadcast({ type: "theme_preview_closed", id: preview.id, session: preview.session, outcome: "discarded" });
+                }
+                return send(res, 200, { ok: true });
+            }
+            case "POST /theme/undo": {
+                const state = await themes.undo();
+                themeChanged(state);
+                return send(res, 200, { state });
+            }
+            case "POST /theme/reset": {
+                const state = await themes.reset();
+                themeChanged(state);
+                return send(res, 200, { state });
+            }
             case "POST /interrupt":
                 {
                     const body = await readJson(req);
@@ -2899,10 +4005,12 @@ export async function startWebServer(opts) {
                 if (!runner.running) {
                     runner.queue.splice(at, 1);
                     broadcastQueue(runner);
-                    void runTurn(runner, entry.prompt, entry.staged, entry.references);
+                    void runTurn(runner, entry.prompt, entry.staged, entry.references, entry.goal);
                     return send(res, 202, { ok: true, sent: true });
                 }
-                const plain = entry.prompt && !entry.staged.length && !entry.references.length;
+                // A goal starts a run of its own; slipped into another turn it would
+                // be read as a remark and never set.
+                const plain = entry.prompt && !entry.staged.length && !entry.references.length && !entry.goal;
                 if (plain && runner.agent.interject(entry.prompt)) {
                     runner.queue.splice(at, 1);
                     broadcastQueue(runner);
@@ -3006,7 +4114,20 @@ export async function startWebServer(opts) {
         const provider = current.harness.auth.get(providerId);
         if (!provider)
             return undefined;
-        const index = provider.methods.findIndex((method) => method.type === "oauth");
+        // The account sign-ins only. A vendor's browser login is an OAuth method
+        // too, but it has no email step and no website to go through, and
+        // treating it as an account would put both in front of it.
+        const index = provider.methods.findIndex((method) => method.type === "oauth" && !method.browser);
+        if (index === -1)
+            return undefined;
+        return { index, label: provider.methods[index].label };
+    }
+    /** A vendor's own browser sign-in, when it has one. */
+    function vendorSignInMethod(providerId) {
+        const provider = current.harness.auth.get(providerId);
+        if (!provider)
+            return undefined;
+        const index = provider.methods.findIndex((method) => method.type === "oauth" && method.browser === true);
         if (index === -1)
             return undefined;
         return { index, label: provider.methods[index].label };
@@ -3075,7 +4196,15 @@ export async function startWebServer(opts) {
             ...list.filter((one) => one.source === "builtin"),
             ...list.filter((one) => one.source !== "builtin"),
         ];
-        return { connectors, plugins: builtinFirst([...plugins, ...runtime]), skills: builtinFirst(skills) };
+        /**
+         * The external agents a message can be addressed to — `@claude …` sends
+         * it to the user's own Claude Code instead of the model. Only those with
+         * an ACP runtime answer to an @ at the start of a message.
+         */
+        const agents = (harness.subagents?.list?.() ?? [])
+            .filter((definition) => definition.runtime?.kind === "acp")
+            .map((definition) => ({ name: definition.name, description: definition.description }));
+        return { connectors, plugins: builtinFirst([...plugins, ...runtime]), skills: builtinFirst(skills), agents };
     }
     /**
      * What the composer attached to one message, as a block above the prompt.
@@ -3125,9 +4254,13 @@ export async function startWebServer(opts) {
     function state(runner = runners.get(focused)) {
         const { session: sess } = runner;
         const model = sess.model;
-        const used = sess.usage.inputTokens + sess.usage.outputTokens;
+        const context = runner.agent.contextBreakdown();
+        const used = context.total;
         return {
             sessionId: sess.id,
+            // Its background tasks, so a reloaded page or a newly opened tab
+            // shows them without waiting for the next change.
+            tasks: runner.agent.backgroundTasks?.list() ?? [],
             // The page labels its tabs from this. Without it every tab read
             // "Untitled", including sessions the store had a title for all along.
             title: sess.title,
@@ -3135,6 +4268,20 @@ export async function startWebServer(opts) {
             model: model.id,
             provider: model.provider,
             mode: sess.permissions.getMode(),
+            // Only while it is being worked toward. Achieved or blocked, the
+            // transcript already says so, and the composer goes back to normal.
+            goal: sess.goal?.status === "active" ? sess.goal.objective : undefined,
+            // Absent outside the desktop app, which is the page's cue to hide the row.
+            computerUse: runner.harness.computerUse
+                ? {
+                    on: sess.computerUse,
+                    ...(computerStatus.platform ? { platform: computerStatus.platform } : {}),
+                    ...(computerStatus.permissions ? { permissions: computerStatus.permissions } : {}),
+                    ...(computerStatus.error ? { error: computerStatus.error } : {}),
+                    relaunch: Boolean(opts.onRelaunch),
+                    ...(opts.computerGrantee ? { grantee: opts.computerGrantee } : {}),
+                }
+                : undefined,
             // What the next request will carry, not what was picked: a pick the
             // model lacks shows as the tier it is clamped to, and a model that
             // cannot stop thinking never shows "off". Absent when the model has no
@@ -3151,6 +4298,9 @@ export async function startWebServer(opts) {
             turns: sess.turns,
             contextWindow: model.contextWindow,
             contextUsed: model.contextWindow ? Math.min(1, used / model.contextWindow) : undefined,
+            contextTokens: used,
+            // What the context panel splits the ring into.
+            context,
             busy: Boolean(runner.running),
             // So a reload, or a second tab, sees what is still waiting. The queue
             // lives on the runner rather than in the page for exactly this reason.
@@ -3164,14 +4314,101 @@ export async function startWebServer(opts) {
      * than left as the user messages they are on the wire, because the page
      * shows a call and its result as one card.
      */
+    /**
+     * Tell the page whenever a conversation's background tasks change.
+     *
+     * A running task changes on every turn and every tool it starts, which is
+     * more often than anybody can read; changes inside a quarter second go out
+     * as one list.
+     */
+    function watchTasks(runner) {
+        if (watchedTasks.has(runner.agent))
+            return;
+        watchedTasks.add(runner.agent);
+        let timer;
+        runner.agent.onBackgroundChange(() => {
+            if (timer)
+                return;
+            timer = setTimeout(() => {
+                timer = undefined;
+                broadcast({ type: "tasks", session: runner.session.id, tasks: runner.agent.backgroundTasks?.list() ?? [] });
+            }, 250);
+        });
+    }
+    /**
+     * A conversation just opened: watch its background tasks, and bring back
+     * the ones it had before a restart.
+     */
+    function adoptTasks(runner) {
+        watchTasks(runner);
+        void runner.agent.restoreBackgroundTasks().then((restored) => {
+            if (restored)
+                broadcast({ type: "tasks", session: runner.session.id, tasks: runner.agent.backgroundTasks?.list() ?? [] });
+        }, () => { });
+    }
+    /**
+     * A background task's conversation, as the task view draws it: what it was
+     * told, what it said, and each tool it ran with the start of its result.
+     * Plainer than the main transcript's entries — nothing here can be forked
+     * from or replayed, so it carries no positions.
+     */
+    function taskTranscript(messages) {
+        const entries = [];
+        const results = new Map();
+        for (const message of messages) {
+            for (const block of message.content) {
+                if (block.type !== "tool_result")
+                    continue;
+                const text = block.content.map((part) => (part.type === "text" ? part.text : "")).join("");
+                results.set(block.toolCallId, { text: text.slice(0, 1200), ...(block.isError ? { isError: true } : {}) });
+            }
+        }
+        for (const message of messages) {
+            const text = visibleText(message).trim();
+            const tools = message.content.filter((block) => block.type === "tool_call");
+            if (message.role === "user") {
+                if (text)
+                    entries.push({ role: "user", text });
+                continue;
+            }
+            if (text)
+                entries.push({ role: "assistant", text });
+            for (const call of tools) {
+                const result = results.get(call.id);
+                entries.push({
+                    role: "tool",
+                    name: call.name,
+                    text: previewJson(call.input, 160),
+                    ...(result ? { result: result.text, ...(result.isError ? { isError: true } : {}) } : {}),
+                });
+            }
+        }
+        return entries;
+    }
     function history(runner = runners.get(focused)) {
         const entries = [];
         let index = 0;
         for (const message of runner.session.messages) {
             index++;
+            // The loop's "keep going" is the harness talking to the model, not
+            // something the person said.
+            if (message.meta?.["goalNudge"])
+                continue;
+            // Background results read in: a card naming the tasks, never the raw
+            // notification text as if the person had written it.
+            const notified = message.meta?.["taskNotification"];
+            if (Array.isArray(notified)) {
+                const tasks = notified.filter((task) => typeof task?.id === "string" && typeof task?.description === "string");
+                if (tasks.length)
+                    entries.push({ role: "user", keepMessages: index, tasks });
+                continue;
+            }
             const tools = message.content.filter((block) => block.type === "tool_call");
             const results = message.content.filter((block) => block.type === "tool_result");
-            const text = visibleText(message).trim();
+            // The notes buildMessage writes for the model about what was attached —
+            // "[image: shot.png]", "[file attached: … saved at …]" — are not what the
+            // person typed, and the bubble now shows the attachments themselves.
+            const text = (message.role === "user" ? withoutAttachmentNotes(visibleText(message)) : visibleText(message)).trim();
             // The bytes stay where they are; what travels is where to find them.
             // Without this a reloaded conversation showed "[image: shot.png]" where
             // the screenshot had been — the model still saw it, the person did not.
@@ -3182,6 +4419,23 @@ export async function startWebServer(opts) {
                 src: `/attachment?session=${encodeURIComponent(runner.session.id)}` +
                     `&message=${index}&block=${entry.position}`,
             }));
+            // Clips the message carried, played from the copy saved in the project
+            // (see buildMessage). A copy since deleted just shows as a name.
+            const sent = message.meta?.["attachments"];
+            if (message.role === "user" && Array.isArray(sent)) {
+                for (const clip of sent) {
+                    if (clip.kind !== "video" || typeof clip.path !== "string")
+                        continue;
+                    const rel = path.relative(runner.session.cwd, clip.path);
+                    if (rel.startsWith("..") || path.isAbsolute(rel))
+                        continue;
+                    images.push({
+                        src: `/files/raw?cwd=${encodeURIComponent(runner.session.cwd)}&path=${encodeURIComponent(rel)}`,
+                        ...(typeof clip.name === "string" ? { name: clip.name } : {}),
+                        kind: "video",
+                    });
+                }
+            }
             // messageText drops thinking blocks by design, so they are read directly.
             const thinking = message.content
                 .filter((block) => block.type === "thinking")
@@ -3195,23 +4449,45 @@ export async function startWebServer(opts) {
                     // reply" has to include it or the branch reopens with tool calls
                     // that have no answers — a request every provider rejects.
                     target.keepMessages = index;
-                    target.results = results.map((block) => ({
-                        id: block.toolCallId,
-                        text: block.content
-                            .map((part) => (part.type === "text" ? part.text : ""))
-                            .join("")
-                            .slice(0, 4000),
-                        ...(block.isError ? { isError: true } : {}),
-                    }));
+                    target.results = results.map((block) => {
+                        const position = message.content.indexOf(block);
+                        const shots = block.content
+                            .map((part, place) => ({ part, place }))
+                            .filter((entry) => entry.part.type === "image")
+                            .map((entry) => ({
+                            src: `/attachment?session=${encodeURIComponent(runner.session.id)}` +
+                                `&message=${index}&block=${position}&part=${entry.place}`,
+                        }));
+                        return {
+                            id: block.toolCallId,
+                            text: block.content
+                                .map((part) => (part.type === "text" ? part.text : ""))
+                                .join("")
+                                .slice(0, 4000),
+                            ...(block.isError ? { isError: true } : {}),
+                            ...(shots.length ? { images: shots } : {}),
+                        };
+                    });
                 }
                 if (!text && !thinking && !images.length)
                     continue;
             }
             if (!text && !tools.length && !thinking && !images.length)
                 continue;
+            const agentName = message.role === "assistant" ? message.meta?.["agent"] : undefined;
+            const agentSession = message.meta?.["acpSession"];
             entries.push({
                 role: message.role === "assistant" ? "assistant" : "user",
                 keepMessages: index,
+                ...(typeof agentName === "string"
+                    ? {
+                        agent: {
+                            name: agentName,
+                            ...(typeof agentSession?.id === "string" ? { session: agentSession.id } : {}),
+                            ...(typeof agentSession?.cwd === "string" ? { cwd: agentSession.cwd } : {}),
+                        },
+                    }
+                    : {}),
                 ...(images.length ? { images } : {}),
                 ...(thinking ? { thinking } : {}),
                 ...(text ? { text } : {}),
@@ -3220,6 +4496,14 @@ export async function startWebServer(opts) {
                     : {}),
             });
         }
+        // Each picture goes under the last reply of the turn it ended: the last
+        // assistant entry at or before the point the turn ended at.
+        for (const shot of listTurnShots(runner.session.id)) {
+            const target = entries.findLast((entry) => entry.role === "assistant" && (entry.keepMessages ?? 0) <= shot.at);
+            if (!target)
+                continue;
+            (target.shots ??= []).push(turnShotView(runner.session.id, shot));
+        }
         return entries;
     }
     /**
@@ -3234,9 +4518,10 @@ export async function startWebServer(opts) {
      * Choosing a directory here is also a statement about what the user is
      * working on, so it is what the next launch opens.
      */
-    async function harnessFor(dir) {
+    async function harnessFor(dir, remember = true) {
         const project = await addProject(dir);
-        void writePrefs({ project: project.path });
+        if (remember)
+            void writePrefs({ project: project.path });
         const existing = harnesses.get(project.path);
         if (existing)
             return existing;
@@ -3248,29 +4533,113 @@ export async function startWebServer(opts) {
                 questionPrompt: (request, signal) => questionPrompt(request, signal),
                 ...(opts.browserTarget ? { browserTarget: opts.browserTarget } : {}),
                 ...(opts.browserUsePlugin ? { browserUsePlugin: opts.browserUsePlugin } : {}),
+                ...(opts.computerUsePlugin ? { computerUsePlugin: opts.computerUsePlugin } : {}),
             }));
-        harnesses.set(project.path, harness);
+        harnesses.set(project.path, adoptRoutineModel(harness));
+        equipThemes(harness.tools);
+        harness.worktreeLauncher = launchWorktree;
+        harness.taskWaker = wakeForTasks;
         watchConnections(harness);
         return harness;
     }
+    /**
+     * `worktree_start`, from a conversation: the worktree, a session in it, and
+     * that session's first turn — in the background, leaving the asking tab on
+     * screen. Not remembered as the startup project: the person did not go there.
+     */
+    const launchWorktree = async (request) => {
+        const worktree = await createWorktree(request.from.cwd, {
+            task: request.task,
+            ...(request.slug ? { slug: request.slug } : {}),
+            ...(request.type ? { type: request.type } : {}),
+        });
+        const harness = await harnessFor(worktree.cwd, false);
+        const session = freshSession(harness);
+        await session.init();
+        session.title = request.task;
+        const runner = makeRunner(session, harness);
+        runners.set(session.id, runner);
+        adoptTasks(runner);
+        void runTurn(runner, request.prompt);
+        broadcast({ type: "projects" });
+        broadcast({ type: "sessions" });
+        broadcast({ type: "notice", message: `started "${request.task}" in ${path.basename(worktree.path)}` });
+        return {
+            sessionId: session.id,
+            path: worktree.path,
+            kind: worktree.kind,
+            ...(worktree.branch ? { branch: worktree.branch } : {}),
+        };
+    };
+    for (const harness of harnesses.values())
+        harness.worktreeLauncher = launchWorktree;
+    /**
+     * Background tasks ended while their conversation sat idle: give it a turn
+     * to read their results in and act on them.
+     *
+     * A conversation mid-turn reads them in by itself at its next gap. One with
+     * prompts still queued is left alone: that queue stands after an interrupt
+     * or a failure for the person to send or drop, and a turn starting on its
+     * own would decide for them. The results ride along with whatever runs next.
+     */
+    function wakeForTasks(sessionId) {
+        const runner = runners.get(sessionId);
+        if (!runner || runner.running || runner.queue.length)
+            return;
+        void runTurn(runner, "", [], [], false, true);
+    }
+    for (const harness of harnesses.values())
+        harness.taskWaker = wakeForTasks;
+    /** A worktree as the page sees it: keyed by the directory its sessions run in. */
+    function worktreeView(worktree) {
+        return {
+            path: worktree.cwd,
+            root: worktree.path,
+            parent: worktree.source,
+            kind: worktree.kind,
+            ...(worktree.branch ? { branch: worktree.branch } : {}),
+            task: worktree.task,
+        };
+    }
+    /** The ways out of a worktree that make sense in its present state, best first. */
+    function finishActions(worktree, status) {
+        if (!status.exists)
+            return ["discard"];
+        if (status.clean)
+            return ["remove"];
+        if (worktree.kind === "clone")
+            return worktree.shadow ? ["apply", "discard"] : ["discard"];
+        if (status.changes.length)
+            return ["commit", "discard"];
+        return ["push", "merge", "discard"];
+    }
     /*
      * Routines: which exist, where each runs, and — when this server was asked
      * to — the clock that fires them. A run lands in the page as a notice and,
      * through onRoutineRun, wherever the desktop can reach someone who is not
      * looking at the page.
      */
+    // A routine starting or ending repaints the Routines page wherever it is open.
+    const stopRunUpdates = onRunsChanged(() => broadcast({ type: "routines" }));
+    // What a run is doing now, patched into its row in place: a repaint per
+    // tool call would refetch every history on the page.
+    const stopRunActivity = onRunActivity((run) => broadcast({ type: "routine_activity", name: run.schedule, activity: run.activity ?? "", turns: run.turns }));
     const routines = new RoutineRunner({
         defaultCwd: opts.session.cwd,
         openHarnesses: () => harnesses.values(),
-        createHarness: (cwd) => opts.openProject
-            ? opts.openProject(cwd)
-            : Harness.create({
-                cwd,
-                permissionPrompt: async () => false,
-                questionPrompt: async () => ({ outcome: "unavailable" }),
-                ...(opts.browserTarget ? { browserTarget: opts.browserTarget } : {}),
-                ...(opts.browserUsePlugin ? { browserUsePlugin: opts.browserUsePlugin } : {}),
-            }),
+        createHarness: async (cwd) => {
+            const harness = adoptRoutineModel(await (opts.openProject
+                ? opts.openProject(cwd)
+                : Harness.create({
+                    cwd,
+                    permissionPrompt: async () => false,
+                    questionPrompt: async () => ({ outcome: "unavailable" }),
+                    ...(opts.browserTarget ? { browserTarget: opts.browserTarget } : {}),
+                    ...(opts.browserUsePlugin ? { browserUsePlugin: opts.browserUsePlugin } : {}),
+                })));
+            pictureBrowserTurns(harness);
+            return harness;
+        },
         onStart: (routine, meta) => {
             if (meta.catchUp)
                 broadcast({ type: "notice", message: `routine ${routine.def.name} is catching up on a run it missed` });
@@ -3311,6 +4680,7 @@ export async function startWebServer(opts) {
             await session.init();
         const runner = makeRunner(session, harness);
         runners.set(session.id, runner);
+        adoptTasks(runner);
         focused = session.id;
         current = { session, agent: runner.agent, harness };
         const snapshot = state(runner);
@@ -3361,6 +4731,7 @@ export async function startWebServer(opts) {
         if (!runner) {
             runner = makeRunner(next, harness);
             runners.set(next.id, runner);
+            adoptTasks(runner);
         }
         focused = next.id;
         // A reopened tab keeps the harness it was built on, which is the one its
@@ -3412,31 +4783,59 @@ export async function startWebServer(opts) {
         if (!next)
             return false;
         broadcastQueue(runner);
-        void runTurn(runner, next.prompt, next.staged, next.references);
+        void runTurn(runner, next.prompt, next.staged, next.references, next.goal);
         return true;
     }
-    async function runTurn(runner, prompt, staged = [], references = []) {
+    async function runTurn(runner, prompt, staged = [], references = [], goal = false, 
+    /**
+     * Started by background tasks ending while the conversation was idle:
+     * nobody typed anything, and the run's only input is their results,
+     * which the agent reads in itself.
+     */
+    wake = false) {
         const controller = new AbortController();
         runner.running = controller;
         const id = runner.session.id;
+        suggesting.get(id)?.abort();
+        suggesting.delete(id);
+        // Background tasks only ever start inside a turn, so this is the first
+        // moment worth watching them.
+        watchTasks(runner);
+        // A subagent asked for isolation makes a worktree inside the turn, where
+        // nothing tells the page; comparing before and after is what does. Read
+        // alongside the turn, never in its way.
+        const worktreesBefore = listWorktrees().then((list) => list.length, () => -1);
+        if (goal) {
+            runner.session.setGoal(prompt);
+            void runner.session.persist().catch(() => { });
+        }
         // Every event carries its session so the page can route it to the tab it
         // belongs to; without it a reply from a background tab would stream into
         // whichever one happens to be on screen.
-        broadcast({
-            type: "prompt",
-            session: id,
-            text: prompt,
-            ...(staged.length ? { attachments: staged.map((file) => file.name) } : {}),
-            // The transcript shows what was referenced, not just what was typed:
-            // otherwise a turn that reads three files looks like it went and found
-            // them on its own.
-            ...(references.length ? { references } : {}),
-        });
+        if (!wake)
+            broadcast({
+                type: "prompt",
+                session: id,
+                text: prompt,
+                ...(staged.length ? { attachments: staged.map((file) => file.name) } : {}),
+                // The transcript shows what was referenced, not just what was typed:
+                // otherwise a turn that reads three files looks like it went and found
+                // them on its own.
+                ...(references.length ? { references } : {}),
+                ...(goal ? { goal: true } : {}),
+            });
+        if (goal)
+            broadcast({ type: "state", session: id, state: state(runner) });
         // The note goes above the prompt rather than after it, so the model has
         // the context before it reads the request that depends on it.
         const note = referenceNote(references);
         const text = note ? `${note}\n\n${prompt}` : prompt;
-        const input = staged.length ? buildMessage(text, staged) : text;
+        const input = wake ? [] : staged.length
+            ? await buildMessage(text, staged, {
+                documents: runner.session.model.supportsDocuments === true,
+                saveDir: projectPath(runner.session.cwd, "attachments", id),
+            })
+            : 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
@@ -3454,6 +4853,12 @@ export async function startWebServer(opts) {
                 // the copy without that id could only ever 404.
                 if (event.type === "question_request")
                     continue;
+                // The same for permissions: the card comes from permissionPrompt's
+                // announce, which carries the id it is answered by. The agent's own
+                // event has none, and with two calls asking at once a card drawn
+                // from it outlived its answer.
+                if (event.type === "permission_request")
+                    continue;
                 // The agent reports a provider failure as an event and breaks its own
                 // loop rather than throwing, so the catch below never sees it — and a
                 // queue that drained into a dead provider would replay the failure
@@ -3469,6 +4874,9 @@ export async function startWebServer(opts) {
                     continue;
                 }
                 broadcast({ ...event, session: id });
+                // The line over the composer reads the goal off the state.
+                if (event.type === "goal")
+                    broadcast({ type: "state", session: id, state: state(runner) });
             }
         }
         catch (err) {
@@ -3515,11 +4923,15 @@ export async function startWebServer(opts) {
                 state: state(runner),
                 changes: runner.ledger.list(),
             });
+            void Promise.all([worktreesBefore, listWorktrees()]).then(([before, after]) => {
+                if (before !== after.length)
+                    broadcast({ type: "projects" });
+            }, () => { });
             // Only after a turn that ended on its own. An interrupt means stop, and
             // an error would usually meet the next prompt with the same error, so
             // both leave the queue standing for the person to send or drop.
-            if (!controller.signal.aborted && !failed)
-                drainQueue(runner);
+            if (!controller.signal.aborted && !failed && !drainQueue(runner))
+                suggest(runner);
         }
     }
     function stream(res) {
@@ -3533,6 +4945,8 @@ export async function startWebServer(opts) {
         });
         res.write(": connected\n\n");
         clients.add(res);
+        for (const card of pairingCards())
+            res.write(`data: ${JSON.stringify(card)}\n\n`);
         for (const harness of harnesses.values()) {
             for (const card of harness.cloudConnectors.snapshots()) {
                 res.write(`data: ${JSON.stringify({ type: "connection_card", session: card.session, card })}\n\n`);
@@ -3598,6 +5012,40 @@ export async function startWebServer(opts) {
      * not know about until the turn lands, and the page asking is the page that
      * spent it.
      */
+    /**
+     * Each provider beside what this machine spent with it in the last thirty
+     * days, for the provider cards.
+     *
+     * An estimate, and labelled as one: a session's cost is put down to the
+     * model it used last, so a session that switched vendors part way through
+     * is counted against the second. Read from the same records the usage page
+     * reads — the few hundred most recent sessions — and kept for a minute,
+     * because the models panel asks every time it is painted.
+     */
+    let spendCache;
+    async function withSpend(entries) {
+        if (!spendCache || Date.now() - spendCache.at > 60_000) {
+            const byProvider = new Map();
+            try {
+                const providerOf = new Map(current.harness.listModels().map((model) => [model.id, model.provider]));
+                const since = Date.now() - 30 * 86_400_000;
+                const { rows } = await usageRows(USAGE_SESSION_SCAN);
+                for (const row of rows.values()) {
+                    if (row.updatedAt < since || !(row.costUsd > 0))
+                        continue;
+                    const provider = providerOf.get(row.model) ?? row.model.split("/")[0];
+                    if (provider)
+                        byProvider.set(provider, (byProvider.get(provider) ?? 0) + row.costUsd);
+                }
+            }
+            catch {
+                // A figure that cannot be worked out is left off, not shown as zero.
+            }
+            spendCache = { at: Date.now(), byProvider };
+        }
+        const spent = spendCache.byProvider;
+        return entries.map((entry) => ({ entry, spend30d: spent.get(entry.id) ?? 0 }));
+    }
     async function usageRows(scan) {
         const stored = await current.harness.listSessions(scan);
         const rows = new Map();
@@ -3772,25 +5220,120 @@ export async function startWebServer(opts) {
     refreshStale();
     const staleTimer = setInterval(refreshStale, 6 * 60 * 60 * 1000);
     staleTimer.unref?.();
+    const stopHeartbeat = startHeartbeat();
     if (opts.routines)
         routines.start();
-    if (opts.onKeepAwake) {
-        const keepAwake = opts.onKeepAwake;
-        void readPrefs().then((prefs) => keepAwake(prefs.keepAwake === true)).catch(() => { });
-    }
+    void applyKeepAwake().catch(() => { });
     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" });
+    // Phones waiting at the door: the card on this page is the only way in.
+    const pairings = new Map();
+    const announcePairing = (request) => ({ type: "remote_pair_request", ...request });
+    const closePairing = (id) => {
+        if (pairings.delete(id))
+            broadcast({ type: "remote_pair_closed", id });
+    };
+    pairingCards = () => [...pairings.values()].map((entry) => announcePairing(entry.request));
+    answerPairing = (id, allowed) => {
+        const entry = pairings.get(id);
+        if (!entry)
+            return false;
+        entry.settle(allowed);
+        return true;
+    };
+    let closed = false;
+    const remoteToken = opts.remote?.token ?? (async () => process.env["OHARNESS_REMOTE_TOKEN"] || (await current.harness.accountToken()));
+    let remote;
+    // One change at a time: a quick off-on-off must not leave two connections,
+    // or one still running behind a switch that says off.
+    let remoteChange = Promise.resolve();
+    setRemote = (on) => {
+        remoteChange = remoteChange.then(async () => {
+            if (!opts.remote || closed)
+                return;
+            if (on && !remote) {
+                const identity = await remoteMachine();
+                if (closed)
+                    return;
+                const relay = opts.remote.relay;
+                remote = startRemote({
+                    relay,
+                    token: remoteToken,
+                    ...identity,
+                    local: `http://${host}:${port}/?token=${token}`,
+                    approve: (request, signal) => new Promise((resolve) => {
+                        const settle = (allowed) => {
+                            closePairing(request.id);
+                            resolve(allowed);
+                        };
+                        pairings.set(request.id, { request, settle });
+                        signal.addEventListener("abort", () => settle(false), { once: true });
+                        broadcast(announcePairing(request));
+                    }),
+                    withdrawn: closePairing,
+                    log: (line) => console.error(line),
+                });
+                console.error(`remote control on through ${relay} — new phones need your Allow on this page`);
+            }
+            else if (!on && remote) {
+                remote.close();
+                remote = undefined;
+                // A phone still waiting at the door is turned away with the rest.
+                for (const entry of [...pairings.values()])
+                    entry.settle(false);
+                console.error("remote control off");
+            }
+            await applyKeepAwake();
+        });
+        return remoteChange;
+    };
+    remoteRunning = () => Boolean(remote);
+    forgetPhone = (id) => remote?.forget(id);
+    remoteView = async () => {
+        const signedIn = opts.remote ? Boolean(await remoteToken().catch(() => undefined)) : false;
+        return {
+            available: Boolean(opts.remote),
+            on: Boolean(remote),
+            connected: remote?.connected ?? false,
+            // What the switch row says: off, on but nobody to be (no account), on
+            // and reaching for the relay, or there and reachable.
+            state: !remote ? "off" : remote.connected ? "online" : signedIn ? "connecting" : "signed-out",
+            signedIn,
+            // The desktop holds the computer awake while remote is on; a browser tab cannot.
+            keepsAwake: Boolean(opts.onKeepAwake),
+            devices: (await pairedDevices()).map(({ id, name, pairedAt }) => ({ id, name, pairedAt })),
+            pending: pairingCards(),
+        };
+    };
+    if (opts.remote) {
+        const saved = (await readPrefs().catch(() => ({}))).remote === true;
+        if (opts.remote.always || saved)
+            await setRemote(true);
+    }
     return {
         url: `http://${host}:${port}/?token=${token}`,
         token,
         permissionPrompt,
         questionPrompt,
+        interrupt(sessionId) {
+            runners.get(sessionId)?.running?.abort();
+        },
         async close() {
             clearInterval(staleTimer);
+            stopHeartbeat();
+            await flushAnalytics();
             presence?.close();
+            closed = true;
+            await remoteChange.catch(() => { });
+            remote?.close();
+            remote = undefined;
+            for (const entry of [...pairings.values()])
+                entry.settle(false);
+            stopRunUpdates();
+            stopRunActivity();
             await routines.close();
             for (const unsubscribe of connectionSubscriptions)
                 unsubscribe();
@@ -4093,6 +5636,13 @@ function closeTab(res, status, message, hint) {
     res.end(page);
 }
 /** The extensions a picked file is carried as an image under. */
+/** Clips the tray can play as a preview of a picked file. */
+const PICKED_VIDEO_TYPES = {
+    ".mp4": "video/mp4",
+    ".m4v": "video/mp4",
+    ".mov": "video/quicktime",
+    ".webm": "video/webm",
+};
 const PICKED_IMAGE_TYPES = {
     ".png": "image/png",
     ".jpg": "image/jpeg",
@@ -4118,6 +5668,8 @@ const MAX_UPLOAD_BYTES = 12 * 1024 * 1024;
 const STAGED_TTL_MS = 30 * 60 * 1000;
 /** The ceiling on everything staged at once, across every tab. */
 const MAX_STAGED_BYTES = 64 * 1024 * 1024;
+/** One feedback screenshot or recording; the site's bucket takes no more. */
+const FEEDBACK_MAX_BYTES = 50 * 1024 * 1024;
 /** How much of a text attachment is inlined into the prompt. */
 const MAX_INLINE_CHARS = 200_000;
 async function readBody(req, limit) {
@@ -4195,9 +5747,47 @@ function readReferences(value) {
     }
     return out;
 }
-function buildMessage(prompt, staged) {
+/**
+ * The user's message, with what they attached.
+ *
+ * An image goes to the model as an image. A PDF goes whole, as a document the
+ * model reads page by page, when the model reads them (`documents`). A text
+ * file is pasted in. Anything else — and every PDF too — is saved in the
+ * project, under .oharness/attachments/<session>/, and its path given, so the
+ * agent can open it with its own tools: a spreadsheet with Python, a model
+ * that takes no PDFs with a PDF tool. Binary files used to be skipped, and
+ * the person was left believing the agent had read what it never received.
+ */
+/** A user message's text without the attachment lines buildMessage adds to it. */
+export function withoutAttachmentNotes(text) {
+    return text
+        .split("\n")
+        .filter((line) => !/^\[(image|file attached|PDF attached|skipped [^\]]*): /.test(line))
+        .join("\n")
+        .replace(/\n{3,}/g, "\n\n");
+}
+export async function buildMessage(prompt, staged, opts) {
     const content = [];
     const notes = [];
+    /**
+     * Clips saved for the agent, kept on the message's meta (which never
+     * reaches the model) so a reloaded transcript can play them in the bubble
+     * they were sent in, from the copy in the project.
+     */
+    const clips = [];
+    const save = async (file) => {
+        await mkdir(opts.saveDir, { recursive: true });
+        // The name as uploaded, made safe as a file name; a second file of the
+        // same name in the session gets a number rather than replacing the first.
+        const base = path.basename(file.name).replace(/[\u0000-\u001f/\\:]/g, "_") || "attachment";
+        const ext = path.extname(base);
+        let target = path.join(opts.saveDir, base);
+        for (let n = 2; await stat(target).then(() => true, () => false); n++) {
+            target = path.join(opts.saveDir, `${base.slice(0, base.length - ext.length)} (${n})${ext}`);
+        }
+        await writeFile(target, file.data);
+        return target;
+    };
     for (const file of staged) {
         if (file.mediaType.startsWith("image/")) {
             content.push({
@@ -4208,11 +5798,27 @@ function buildMessage(prompt, staged) {
             notes.push(`[image: ${file.name}]`);
             continue;
         }
+        const pdf = file.mediaType === "application/pdf" || /\.pdf$/i.test(file.name);
+        if (pdf) {
+            const saved = await save(file);
+            if (opts.documents) {
+                content.push({ type: "document", mimeType: "application/pdf", data: file.data.toString("base64"), name: file.name });
+                notes.push(`[PDF attached: ${file.name} — also saved at ${saved}]`);
+            }
+            else {
+                notes.push(`[PDF attached: ${file.name} — this model cannot read PDFs directly; it is saved at ${saved}, open it with your tools]`);
+            }
+            continue;
+        }
         const text = file.data.toString("utf8");
         // A NUL early on means binary, and pasting its bytes into the prompt
         // wastes context without conveying anything.
         if (file.data.subarray(0, 8000).includes(0)) {
-            notes.push(`[skipped ${file.name}: binary, ${file.data.byteLength} bytes]`);
+            const saved = await save(file);
+            notes.push(`[file attached: ${file.name} (${file.mediaType}, ${file.data.byteLength} bytes) — saved at ${saved}, open it with your tools]`);
+            if (file.mediaType.startsWith("video/") || /\.(mp4|m4v|mov|webm)$/i.test(file.name)) {
+                clips.push({ kind: "video", name: file.name, path: saved });
+            }
             continue;
         }
         const clipped = text.length > MAX_INLINE_CHARS
@@ -4222,16 +5828,75 @@ function buildMessage(prompt, staged) {
     }
     const body = [prompt, ...notes].filter(Boolean).join("\n\n");
     content.unshift({ type: "text", text: body });
-    return [{ role: "user", content }];
+    return [{ role: "user", content, ...(clips.length ? { meta: { attachments: clips } } : {}) }];
+}
+/** Dictation: the formats a browser's MediaRecorder writes, the cap, the models. */
+const VOICE_FORMATS = new Set(["webm", "ogg", "m4a", "mp4", "mp3", "wav"]);
+const VOICE_MAX_SECONDS = 300;
+const VOICE_MAX_BODY_BYTES = 20_000_000;
+const VOICE_TRANSCRIBE_MODEL = "gpt-4o-mini-transcribe";
+/** For a Chinese-speaking user: Qwen's recogniser, strongest on Chinese and its dialects. */
+const VOICE_TRANSCRIBE_MODEL_ZH = "qwen3-asr-flash";
+const VOICE_TIDY_PROMPT = [
+    "You tidy dictated text into the message the speaker meant to type to an AI assistant.",
+    "Remove filler words, false starts, stutters and repeated words; fix punctuation, casing and obvious mis-hearings; turn spoken list markers into a list only when the speaker clearly dictated one.",
+    "Keep the speaker's language (do not translate), their wording, meaning, names, numbers, code and technical terms. Do not add, answer, explain, summarise or comment.",
+    "If the text is already clean, return it unchanged. Reply with the tidied text only.",
+].join("\n");
+/**
+ * The small model to tidy dictation with when the user brought their own
+ * key: the configured small model (or default), if its provider is not the
+ * OHarness plan and has credentials here. Undefined otherwise — tidying on the
+ * plan is the gateway's to decide, by subscription.
+ */
+async function ownSmallModel(harness) {
+    const ref = harness.config.smallModel ?? harness.config.model;
+    if (!ref)
+        return undefined;
+    try {
+        const model = harness.providers.resolve(ref);
+        if (model.provider === "official")
+            return undefined;
+        return (await harness.configuredProviders()).has(model.provider) ? model.id : undefined;
+    }
+    catch {
+        return undefined;
+    }
 }
-async function readJson(req) {
+/** Straight to OpenAI's transcription API with the user's own key. */
+async function transcribeWithOpenAI(key, audio, format, language) {
+    const bytes = Buffer.from(audio.replace(/^data:[^,]*,/, ""), "base64");
+    const form = new FormData();
+    form.set("file", new Blob([bytes]), `dictation.${format}`);
+    form.set("model", VOICE_TRANSCRIBE_MODEL);
+    form.set("response_format", "json");
+    if (language)
+        form.set("language", language);
+    try {
+        const response = await fetch("https://api.openai.com/v1/audio/transcriptions", {
+            method: "POST",
+            headers: { authorization: `Bearer ${key}` },
+            body: form,
+            signal: AbortSignal.timeout(60_000),
+        });
+        const parsed = (await response.json().catch(() => ({})));
+        if (!response.ok)
+            return { ok: false, error: typeof parsed.error?.message === "string" ? parsed.error.message : `OpenAI answered ${response.status}` };
+        return { ok: true, value: typeof parsed.text === "string" ? parsed.text : "" };
+    }
+    catch (err) {
+        return { ok: false, error: `could not reach OpenAI: ${errorMessage(err)}` };
+    }
+}
+async function readJson(req, limit = 1_000_000) {
     const chunks = [];
     let size = 0;
     for await (const chunk of req) {
         size += chunk.length;
         // A prompt is text; anything this large is a mistake or an attempt to
         // exhaust memory, and reading it all first would be the vulnerability.
-        if (size > 1_000_000)
+        // Dictation is the one caller that sends more: a recording, as base64.
+        if (size > limit)
             throw new Error("request body too large");
         chunks.push(chunk);
     }