@desplega.ai/agent-swarm 2.7.5 → 2.7.7

package/src/http/pages-public.ts

@@ -25,15 +25,26 @@ import type { IncomingMessage, ServerResponse } from "node:http";
 import { z } from "zod";
 import { getPage, incrementPageViewCount } from "../be/db";
 import { BROWSER_SDK_JS, SWARM_UI_JS } from "../pages/browser-sdk";
+import { COLOR_LITERAL_THRESHOLD, countColorLiterals } from "../pages/color-literals";
 import {
   feedbackKeyGuardScript,
   feedbackOverlayScripts,
   isPageFeedbackRequested,
 } from "../pages/feedback-overlay";
+import {
+  buildPageHeadV2,
+  PAGE_HEAD_V1,
+  PAGE_MODE_PARAM,
+  PAGE_THEME_PARAM,
+} from "../pages/page-head";
+import { resolvePageTheme } from "../themes/page-theme";
 import { type Page, PageSchema } from "../types";
-import { getAppUrl, getConfiguredAppUrls } from "../utils/constants";
-import { getNodeEnv } from "../utils/node-env";
-import { extractAndVerifyCookie, pageSessionSetCookies } from "../utils/page-session";
+import { getAppUrl, getConfiguredAppUrls, getLocalDevAppOrigins } from "../utils/constants";
+import {
+  extractAndVerifyCookie,
+  isLocalDevPageRequest,
+  pageSessionSetCookies,
+} from "../utils/page-session";
 import { scrubSecrets } from "../utils/secret-scrubber";
 import { route } from "./route-def";
 
@@ -95,96 +106,76 @@ const publicPageJsonRoute = route({
 // ─── Helpers ────────────────────────────────────────────────────────────────
 
 /**
- * Inject the BROWSER_SDK script tag into an HTML body. Insert immediately
- * after `<head>` if present; otherwise prepend so partial fragments still get
- * the SDK. The script is wrapped in `<script>...</script>` with no token
- * injection (the SDK relies on server-side header injection at the
- * `/@swarm/api/*` proxy boundary).
- *
- * Also injects `<base target="_blank">` so links inside the iframed page
- * open in the parent window — avoids the user being trapped inside an
- * iframe by a misbehaving page.
+ * The `<head>` defaults for a page's design version (`src/pages/page-head.ts`).
+ * Version 1 is the frozen original head and ignores the viewer params. Version
+ * 2 resolves the theme: the page `theme`, else the viewer's `__swarm-theme`
+ * preset, else Hive, plus the page `themeTokens` on top. It is dark only for
+ * `__swarm-mode=dark`, and a `?print=1` export is always light. A body with
+ * `COLOR_LITERAL_THRESHOLD` or more hardcoded colors also stays light: its
+ * hardcoded light surfaces would get the dark-mode text color.
  */
+function pageHead(page: Page, queryParams: URLSearchParams, wantsPrint: boolean): string {
+  if (page.designVersion === 1) return PAGE_HEAD_V1;
+  const theme = resolvePageTheme({
+    pageTheme: page.theme,
+    viewerTheme: queryParams.get(PAGE_THEME_PARAM),
+    overrides: page.themeTokens,
+  });
+  const dark =
+    !wantsPrint &&
+    queryParams.get(PAGE_MODE_PARAM) === "dark" &&
+    countColorLiterals(page.body) < COLOR_LITERAL_THRESHOLD;
+  return buildPageHeadV2({ theme, mode: dark ? "dark" : "light" });
+}
+
+/** A doctype at the start of a body (`\s` also matches a BOM). */
+const LEADING_DOCTYPE_RE = /^\s*<!doctype\b[^>]*>/i;
+/** The `<html ...>` start tag right after a leading doctype. */
+const LEADING_HTML_TAG_RE = /^\s*<!doctype\b[^>]*>\s*<html\b[^>]*>/i;
+
 /**
- * Default `<head>` injection: `<base>` so links escape the iframe, Tailwind
- * Play CDN so agent pages can use utility classes out of the box, Space
- * Grotesk / Space Mono fonts to match the swarm SPA, a small reset that
- * makes pages theme-aware (light by default) so an agent who writes zero CSS
- * still gets a presentable page, and finally the Browser SDK so
- * `window.swarmSdk` works.
+ * Inject the head defaults and the BROWSER_SDK script tag into an HTML body,
+ * right after the first `<head ...>` tag. The script is wrapped in
+ * `<script>...</script>` with no token injection (the SDK relies on
+ * server-side header injection at the `/@swarm/api/*` proxy boundary).
+ *
+ * A body without `<head>` (a raw fragment) still gets the SDK:
+ * - Design version 1 prepends it, as it always did.
+ * - Design version 2 (`standardsMode`) keeps the browser in standards mode,
+ *   because its defaults are written for it. It prepends `<!doctype html>`
+ *   when the body has no doctype, then injects after `<html ...>`, else after
+ *   the doctype. Content before the doctype puts the page in quirks mode.
  *
- * Agent-provided styles can override these defaults. Tailwind utilities stay
- * available, but its Preflight reset is disabled to preserve browser heading,
- * margin, and list styles.
+ * Both head versions start with `<base target="_blank">`, so links inside the
+ * iframed page open in a new tab: a misbehaving page cannot trap the user
+ * inside the iframe.
  */
-const PAGE_HEAD_DEFAULTS = `<base target="_blank">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
-<script src="https://cdn.tailwindcss.com"></script>
-<script>
-  if (window.tailwind) {
-    window.tailwind.config = { corePlugins: { preflight: false } };
-  }
-</script>
-<style>
-  *, ::before, ::after { box-sizing: border-box; border: 0 solid #e5e7eb; }
-  hr { border-top-width: 1px; }
-  img, video { display: block; max-width: 100%; height: auto; }
-  button, input, optgroup, select, textarea, ::file-selector-button { font: inherit; }
-  :root {
-    color-scheme: light;
-    --swarm-bg: #fbfbfa;
-    --swarm-card: #ffffff;
-    --swarm-border: #e5e7eb;
-    --swarm-text: #111827;
-    --swarm-muted: #6b7280;
-    --swarm-primary: #3b82f6;
-  }
-  html, body { background: var(--swarm-bg); color: var(--swarm-text); }
-  body {
-    font-family: "Space Grotesk", system-ui, sans-serif;
-    margin: 0;
-    padding: 24px;
-    line-height: 1.5;
-  }
-  code, pre, kbd, samp { font-family: "Space Mono", ui-monospace, monospace; }
-  a { color: var(--swarm-primary); }
-  ::selection { background: var(--swarm-primary); color: #fff; }
-  @media print {
-    /* Override theme variables so built-in primitives (swarm-diff, swarm-card)
-       that read var(--swarm-card) / var(--swarm-border) etc. inline-styled
-       backgrounds also flip to light. Without this, diff cards stay dark navy
-       on print. */
-    :root {
-      --swarm-bg: #ffffff;
-      --swarm-card: #ffffff;
-      --swarm-border: #cccccc;
-      --swarm-text: #000000;
-      --swarm-muted: #555555;
-    }
-    html, body { background: white !important; color: black !important; }
-    a { color: black !important; text-decoration: underline; }
-    /* Hide any swarm chrome the agent (or built-in primitives) tagged with
-       .no-print. Use this class on annotation badges, jump-list nav, anything
-       that shouldn't appear in the PDF export. */
-    .no-print { display: none !important; }
-    /* Avoid page-break inside cards / diff blocks. */
-    .swarm-card, swarm-diff { break-inside: avoid; }
-  }
-</style>`;
-
-function injectBrowserSdk(html: string, headFirst = ""): string {
-  const injection = `${headFirst}${PAGE_HEAD_DEFAULTS}<script>${BROWSER_SDK_JS}</script><script>${SWARM_UI_JS}</script>`;
-  // Use the first occurrence of `<head>` (case-insensitive). A page that
-  // doesn't have a `<head>` element (raw fragment) still gets the SDK at the
-  // front of the document.
-  const headOpenMatch = html.match(/<head\b[^>]*>/i);
-  if (headOpenMatch) {
-    const idx = headOpenMatch.index! + headOpenMatch[0].length;
-    return html.slice(0, idx) + injection + html.slice(idx);
-  }
-  return injection + html;
+function injectBrowserSdk(
+  html: string,
+  { head, headFirst, standardsMode }: { head: string; headFirst: string; standardsMode: boolean },
+): string {
+  const injection = `${headFirst}${head}<script>${BROWSER_SDK_JS}</script><script>${SWARM_UI_JS}</script>`;
+  const doc = standardsMode && !LEADING_DOCTYPE_RE.test(html) ? `<!doctype html>${html}` : html;
+  // The first `<head>` (case-insensitive) wins.
+  const leading = standardsMode
+    ? (LEADING_HTML_TAG_RE.exec(doc) ?? LEADING_DOCTYPE_RE.exec(doc))
+    : null;
+  const idx = headTagEnd(doc) ?? (leading ? leading.index + leading[0].length : null);
+  if (idx === null) return injection + doc;
+  return doc.slice(0, idx) + injection + doc.slice(idx);
+}
+
+/**
+ * End offset of the first `<head ...>` start tag, or null. It finds the same
+ * tag as `/<head\b[^>]*>/i` in linear time. That regex rescans the rest of the
+ * body for every `<head` that has no `>` after it, so a planted body could
+ * block the API on each view.
+ */
+function headTagEnd(doc: string): number | null {
+  const start = doc.search(/<head\b/i);
+  if (start === -1) return null;
+  const close = doc.indexOf(">", start);
+  return close === -1 ? null : close + 1;
 }
 
 /**
@@ -350,24 +341,16 @@ function buildCsp(page: Page): string {
   // `frame-ancestors` lists every origin allowed to iframe `/p/:id`. We must
   // include the SPA origin(s). Configured app URLs may be comma-separated so
   // portless dev (`https://ui.swarm.localhost`), a Vite port (`http://localhost:5274`),
-  // and a tunnel/staging origin can all coexist. Additionally, in non-production
-  // we always allow `http://localhost:*` and `https://*.localhost` so swapping
-  // between Vite ports / portless dev doesn't require restarting the API.
+  // and a tunnel/staging origin can all coexist. Under an explicit
+  // development/test NODE_ENV we also allow the local Vite ports and
+  // `*.localhost` so swapping between them doesn't require restarting the API.
+  // Unset NODE_ENV (every deployed image) gets no localhost ancestors.
   const configured = getConfiguredAppUrls();
-  const devFallbacks =
-    getNodeEnv() === "production"
-      ? []
-      : [
-          "http://localhost:5274",
-          "http://localhost:5175",
-          "http://127.0.0.1:5274",
-          "http://127.0.0.1:5175",
-          "https://*.localhost",
-          "http://*.localhost",
-        ];
+  const devFallbacks = getLocalDevAppOrigins();
   const embedders = page.authMode === "public" ? getPageFrameAncestors() : [];
   const ancestors = Array.from(new Set([...configured, ...devFallbacks, ...embedders]));
-  // Allow Tailwind Play CDN (`cdn.tailwindcss.com`) for scripts, Google
+  // Allow Tailwind Play CDN (`cdn.tailwindcss.com`, design version 1; the
+  // pinned v4 build of design version 2 comes from jsdelivr) for scripts, Google
   // Fonts (`fonts.googleapis.com` stylesheets + `fonts.gstatic.com` font
   // files) for the swarm default typography, and same-origin /@swarm/api/*
   // for the Browser SDK. Inline scripts/styles remain allowed so
@@ -471,29 +454,6 @@ function extractPasswordCandidate(
   return decoded.slice(colonIdx + 1);
 }
 
-/**
- * Detect whether the originating request is from a "dev" / localhost context,
- * mirroring the same logic used by the bearer-launch endpoint in
- * `src/http/pages.ts`. Used to decide whether to issue cookies with
- * `SameSite=Lax` (dev) vs `SameSite=None; Secure` (prod).
- */
-function isLocalhostRequest(req: IncomingMessage): boolean {
-  if (getNodeEnv() === "production") return false;
-  // Only emit `SameSite=Lax` (no Secure) when the request comes from the
-  // SAME http://localhost origin as the API — Lax cookies don't travel on
-  // cross-site fetches, so portless `*.localhost` setups (SPA on https
-  // talking to the API on http) must use `SameSite=None; Secure`. Chrome
-  // treats localhost as a secure origin so Secure is honored on HTTP.
-  const origin = (req.headers.origin as string | undefined) ?? "";
-  if (origin === "") {
-    const rawHost = req.headers.host;
-    const host = Array.isArray(rawHost) ? rawHost[0] : rawHost;
-    if (!host) return true; // best-effort dev default
-    return host.startsWith("localhost") || host.startsWith("127.0.0.1");
-  }
-  return origin.startsWith("http://localhost") || origin.startsWith("http://127.0.0.1");
-}
-
 // ─── Handler ────────────────────────────────────────────────────────────────
 
 export async function handlePagesPublic(
@@ -562,7 +522,7 @@ export async function handlePagesPublic(
         }
         if (matched) {
           inlineSetCookie = await pageSessionSetCookies(req, page.id, {
-            dev: isLocalhostRequest(req),
+            dev: isLocalDevPageRequest(req),
           });
           // fall through to the regular 200 path below.
         } else {
@@ -669,7 +629,11 @@ export async function handlePagesPublic(
   // The feedback key guard goes first in <head> so it runs before page scripts.
   const feedback = isPageFeedbackRequested(queryParams);
   const html =
-    injectBrowserSdk(page.body, feedback ? feedbackKeyGuardScript() : "") +
+    injectBrowserSdk(page.body, {
+      head: pageHead(page, queryParams, wantsPrint),
+      headFirst: feedback ? feedbackKeyGuardScript() : "",
+      standardsMode: page.designVersion !== 1,
+    }) +
     (wantsPrint ? PRINT_AUTOTRIGGER_SCRIPT : "") +
     (feedback ? feedbackOverlayScripts(page.id) : "");
   const headers: Record<string, string | string[]> = {

package/src/http/pages.ts

@@ -25,6 +25,8 @@ import { resolveTemplate } from "../prompts/resolver";
 // Side-effect import: registers `task.page.feedback`.
 import "../prompts/session-templates";
 import { createTaskWithSiblingAwareness } from "../tasks/sibling-awareness";
+import { readThemeFields } from "../themes/page-fields";
+import { THEME_PRESET_IDS } from "../themes/presets";
 import {
   AssetKeySchema,
   type Page,
@@ -32,11 +34,11 @@ import {
   PageContentTypeSchema,
   PageSchema,
   type PageSummary,
+  PageThemeTokensInputSchema,
   PageVersionSchema,
 } from "../types";
 import { getAppUrl, getPublicMcpBaseUrl } from "../utils/constants";
-import { getNodeEnv } from "../utils/node-env";
-import { pageSessionSetCookies } from "../utils/page-session";
+import { isLocalDevPageRequest, pageSessionSetCookies } from "../utils/page-session";
 import { authUser, getRequestAuth, isOperatorAuth } from "../utils/request-auth-context";
 import { resolveHttpFavoriteOwner } from "./favorite-owner";
 import { route } from "./route-def";
@@ -94,12 +96,43 @@ const PageWithShareUrlsSchema = PageSchema.extend({
  * used, which omits them entirely) — modeled as optional rather than a union
  * since both shapes share every other field verbatim.
  */
-const PageListItemSchema = PageSchema.partial({ body: true, passwordHash: true }).extend({
+const PageListItemSchema = PageSchema.partial({
+  body: true,
+  passwordHash: true,
+  theme: true,
+  themeTokens: true,
+  designVersion: true,
+}).extend({
   favorite: z.boolean(),
   api_url: z.string(),
   app_url: z.string(),
 });
 
+/** Design fields shared by the create and update bodies. */
+const pageDesignBodyFields = {
+  theme: z
+    .string()
+    .nullable()
+    .optional()
+    .describe(
+      `Theme preset id that restyles the whole page. One of: ${THEME_PRESET_IDS.join(", ")}. Omit to follow the viewer's theme. Pass null on update to clear it.`,
+    ),
+  themeTokens: PageThemeTokensInputSchema.nullable()
+    .optional()
+    .describe(
+      'Per-page token overrides, applied on top of the preset. Send { light, dark } maps of token name to CSS value, or { format: "css", css } with a CSS variable block (:root, .dark, @theme). Stored normalized. Names outside the token contract, and values that reference a variable outside it, are ignored and listed in ignoredTokens. Replaces the stored overrides. Pass null on update to clear them.',
+    ),
+  designVersion: z
+    .number()
+    .int()
+    .min(1)
+    .max(2)
+    .optional()
+    .describe(
+      "Design system version. 2 is the swarm design system and the default for new pages. 1 is the original look that older pages keep. Omit on update to keep the stored value.",
+    ),
+};
+
 // ─── Route Definitions ──────────────────────────────────────────────────────
 
 const createPageRoute = route({
@@ -118,6 +151,7 @@ const createPageRoute = route({
     password: z.string().min(1).optional(),
     body: z.string(),
     needsCredentials: z.array(z.string()).optional(),
+    ...pageDesignBodyFields,
   }),
   responses: {
     201: {
@@ -128,9 +162,20 @@ const createPageRoute = route({
         version: z.literal(1),
         api_url: z.string(),
         app_url: z.string(),
+        ignoredTokens: z
+          .array(z.string())
+          .optional()
+          .describe(
+            "Theme tokens the importer ignored. A bare name is outside the token contract. Other entries give the reason, for example --font-sans (references --font-geist-sans) or --ring (in .card). Absent when none were ignored.",
+          ),
+        designVersion: z
+          .number()
+          .int()
+          .min(1)
+          .describe("The design version of the new page: 2 unless the body set designVersion: 1."),
       }),
     },
-    400: { description: "Invalid body" },
+    400: { description: "Invalid body, unknown theme, or invalid themeTokens" },
     409: { description: "Slug already exists for this agent" },
   },
 });
@@ -214,12 +259,31 @@ const updatePageRoute = route({
     password: z.string().min(1).nullable().optional(),
     body: z.string().optional(),
     needsCredentials: z.array(z.string()).nullable().optional(),
+    ...pageDesignBodyFields,
   }),
   responses: {
     200: {
       description: "Page updated",
-      schema: z.object({ id: z.string(), key: AssetKeySchema, version: z.number().int().min(1) }),
+      schema: z.object({
+        id: z.string(),
+        key: AssetKeySchema,
+        version: z.number().int().min(1),
+        ignoredTokens: z
+          .array(z.string())
+          .optional()
+          .describe(
+            "Theme tokens the importer ignored. A bare name is outside the token contract. Other entries give the reason, for example --font-sans (references --font-geist-sans) or --ring (in .card). Absent when none were ignored.",
+          ),
+        designVersion: z
+          .number()
+          .int()
+          .min(1)
+          .describe(
+            "The design version the page has after the update. An omitted designVersion keeps the stored one, so an older page stays on 1.",
+          ),
+      }),
     },
+    400: { description: "Unknown theme or invalid themeTokens" },
     404: { description: "Page not found" },
     413: { description: "Payload too large" },
   },
@@ -429,7 +493,7 @@ const getPageVersionRoute = route({
  * Cookie issuance moved to `src/utils/page-session.ts::issuePageSessionCookie`
  * so the password-flow on `/p/:id` (step-5) can mint cookies via the same
  * helper. `dev=true` softens the cookie for `http://localhost` (no Secure
- * required; SameSite=Lax). Detected by `isDevRequest()` below.
+ * required; SameSite=Lax). Detected by `isLocalDevPageRequest()` in `src/utils/page-session.ts`.
  */
 
 /**
@@ -528,20 +592,6 @@ function formatFeedbackComments(comments: z.infer<typeof PageFeedbackCommentSche
     .join("\n\n");
 }
 
-function isDevRequest(req: IncomingMessage): boolean {
-  if (getNodeEnv() === "production") return false;
-  // We want `SameSite=Lax` only when the request itself comes from the same
-  // local-`http://localhost` origin as the API — same-site loads tolerate
-  // Lax without Secure. Anything else (including portless `*.localhost`
-  // setups talking from HTTPS to the HTTP API) must use `SameSite=None;
-  // Secure` so the cookie travels on cross-site fetches; Chrome treats
-  // localhost as a secure origin so the Secure flag is fine on HTTP.
-  const origin = (req.headers.origin as string | undefined) ?? "";
-  return (
-    origin === "" || origin.startsWith("http://localhost") || origin.startsWith("http://127.0.0.1")
-  );
-}
-
 // ─── Handler ────────────────────────────────────────────────────────────────
 
 export async function handlePages(
@@ -562,6 +612,12 @@ export async function handlePages(
       return true;
     }
 
+    const themeFields = readThemeFields(parsed.body);
+    if ("error" in themeFields) {
+      jsonError(res, themeFields.error, 400);
+      return true;
+    }
+
     const slug = parsed.body.slug ?? slugify(parsed.body.title);
 
     // Hash password if provided. Bun.password.hash is async (Argon2 by default;
@@ -589,6 +645,9 @@ export async function handlePages(
         passwordHash,
         body: parsed.body.body,
         needsCredentials: parsed.body.needsCredentials,
+        theme: themeFields.theme,
+        themeTokens: themeFields.themeTokens,
+        designVersion: parsed.body.designVersion,
       });
       // First write has no prior snapshot — version 1 is implicit (the parent
       // IS v1). Subsequent edits land via PUT and bump the counter.
@@ -598,6 +657,8 @@ export async function handlePages(
         version: 1,
         api_url: `${getApiBaseUrl()}/p/${page.id}`,
         app_url: `${getAppBaseUrl()}/pages/${page.slug}`,
+        ...(themeFields.ignored.length > 0 ? { ignoredTokens: themeFields.ignored } : {}),
+        designVersion: page.designVersion,
       });
     } catch (err) {
       if (err instanceof AssetKeyAuthorizationError) {
@@ -790,6 +851,13 @@ export async function handlePages(
       return true;
     }
 
+    // Before the snapshot: a rejected theme must not leave a version row behind.
+    const themeFields = readThemeFields(parsed.body);
+    if ("error" in themeFields) {
+      jsonError(res, themeFields.error, 400);
+      return true;
+    }
+
     // Hash password if a new one was provided. `null` → clear the hash.
     let passwordHashUpdate: string | null | undefined;
     if (parsed.body.password === null) {
@@ -830,6 +898,9 @@ export async function handlePages(
       passwordHash: passwordHashUpdate,
       body: parsed.body.body,
       needsCredentials: parsed.body.needsCredentials ?? undefined,
+      theme: themeFields.theme,
+      themeTokens: themeFields.themeTokens,
+      designVersion: parsed.body.designVersion,
     });
     if (!updated) {
       res.writeHead(404);
@@ -840,6 +911,8 @@ export async function handlePages(
       id: updated.id,
       key: updated.key,
       version: await getPageEditCounter(updated.id),
+      ...(themeFields.ignored.length > 0 ? { ignoredTokens: themeFields.ignored } : {}),
+      designVersion: updated.designVersion,
     });
     return true;
   }
@@ -988,7 +1061,7 @@ export async function handlePages(
         ? { name: `guest-${randomUUID().slice(0, 8)}`, op: true as const }
         : undefined;
     const cookies = await pageSessionSetCookies(req, page.id, {
-      dev: isDevRequest(req),
+      dev: isLocalDevPageRequest(req),
       ...identity,
     });