@oharness/server 0.10.0 → 0.11.0

package/dist/server.js

@@ -29,15 +29,15 @@ import { activeRun, onRunActivity, onRunsChanged } from "@oharness/engine/schedu
 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, turnShotSrc } from "./turn-shots.js";
+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";
@@ -46,6 +46,11 @@ import { ArtifactStore, getArtifactStore, isCanvas, isValidArtifactId, restoreAr
 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.
@@ -197,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) {
@@ -240,6 +249,58 @@ export async function startWebServer(opts) {
         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();
@@ -247,6 +308,31 @@ export async function startWebServer(opts) {
     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
@@ -254,6 +340,13 @@ export async function startWebServer(opts) {
      * 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
@@ -278,17 +371,21 @@ export async function startWebServer(opts) {
     });
     opts.computerUsePlugin?.runtime.onSnapshot((event) => {
         const at = computerTurnEnd.get(event.sessionId);
-        if (at === undefined)
+        if (at === undefined || !turnShotsOn)
             return;
-        void saveTurnShots(event.sessionId, at, event.shots)
-            .then((saved) => {
-            broadcast({
-                type: "turn_shots",
-                session: event.sessionId,
-                shots: saved.map((shot) => ({ app: shot.app, title: shot.title, src: turnShotSrc(event.sessionId, shot.file) })),
-            });
-        })
-            .catch(() => { });
+        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
@@ -511,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.
      *
@@ -601,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
@@ -621,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}`) {
@@ -1275,6 +1424,8 @@ 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),
@@ -1356,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": {
@@ -1884,7 +2039,13 @@ export async function startWebServer(opts) {
                 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);
@@ -1933,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;
@@ -2064,6 +2250,32 @@ export async function startWebServer(opts) {
                 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, {
                     available: !!opts.onKeepAwake,
@@ -2129,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(),
@@ -2161,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") {
@@ -2579,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() : [] });
@@ -2828,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,
@@ -2859,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 } : {}),
                     })),
                 });
             }
@@ -2935,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 : "";
@@ -3178,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,
@@ -3268,6 +3567,7 @@ export async function startWebServer(opts) {
                 return send(res, 200, {
                     available: Boolean(opts.computerUsePlugin),
                     takeover: prefs.computerTakeover === "never" ? "never" : "ask",
+                    enable: prefs.computerEnable ?? "ask",
                     blockedApps: prefs.computerBlockedApps ?? [],
                 });
             }
@@ -3278,6 +3578,8 @@ export async function startWebServer(opts) {
                 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))];
                 }
@@ -3548,6 +3850,7 @@ 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;
@@ -3605,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);
@@ -3763,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 };
@@ -3832,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.
@@ -4102,9 +4474,20 @@ export async function startWebServer(opts) {
             }
             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 } : {}),
@@ -4119,11 +4502,7 @@ export async function startWebServer(opts) {
             const target = entries.findLast((entry) => entry.role === "assistant" && (entry.keepMessages ?? 0) <= shot.at);
             if (!target)
                 continue;
-            (target.shots ??= []).push({
-                app: shot.app,
-                ...(shot.title ? { title: shot.title } : {}),
-                src: turnShotSrc(runner.session.id, shot.file),
-            });
+            (target.shots ??= []).push(turnShotView(runner.session.id, shot));
         }
         return entries;
     }
@@ -4157,6 +4536,7 @@ export async function startWebServer(opts) {
                 ...(opts.computerUsePlugin ? { computerUsePlugin: opts.computerUsePlugin } : {}),
             }));
         harnesses.set(project.path, adoptRoutineModel(harness));
+        equipThemes(harness.tools);
         harness.worktreeLauncher = launchWorktree;
         harness.taskWaker = wakeForTasks;
         watchConnections(harness);
@@ -4247,15 +4627,19 @@ export async function startWebServer(opts) {
     const routines = new RoutineRunner({
         defaultCwd: opts.session.cwd,
         openHarnesses: () => harnesses.values(),
-        createHarness: async (cwd) => 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 } : {}),
-            }))),
+        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` });
@@ -4412,6 +4796,8 @@ export async function startWebServer(opts) {
         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);
@@ -4544,8 +4930,8 @@ export async function startWebServer(opts) {
             // 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) {
@@ -4626,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();
@@ -4800,6 +5220,7 @@ export async function startWebServer(opts) {
     refreshStale();
     const staleTimer = setInterval(refreshStale, 6 * 60 * 60 * 1000);
     staleTimer.unref?.();
+    const stopHeartbeat = startHeartbeat();
     if (opts.routines)
         routines.start();
     void applyKeepAwake().catch(() => { });
@@ -4902,6 +5323,8 @@ export async function startWebServer(opts) {
         },
         async close() {
             clearInterval(staleTimer);
+            stopHeartbeat();
+            await flushAnalytics();
             presence?.close();
             closed = true;
             await remoteChange.catch(() => { });