gloomberb 0.18.2 → 0.18.4

package/src/renderers/dom/boot-frame-page.ts

@@ -0,0 +1,187 @@
+/**
+ * The launch frame's format and the inline script that draws it, for the
+ * page builds and the desktop Bun process; the DOM side that records it is
+ * boot-frame.ts.
+ */
+
+export interface BootFrame {
+  /** The build that drew it; markup only matches the stylesheet it was drawn with. */
+  build: string;
+  width: number;
+  height: number;
+  /** The root element's inline style: the theme's colours. */
+  rootStyle: string;
+  /** The body's inline style: cell metrics and text size. */
+  bodyStyle: string;
+  html: string;
+}
+
+/** The element the page draws the frame in, over the app's root. */
+export const BOOT_FRAME_ELEMENT_ID = "gloom-boot-frame";
+/** Marks a copied box that was scrolled, as `top,left`, for the page to scroll it the same. */
+export const BOOT_FRAME_SCROLL_ATTRIBUTE = "data-gloom-boot-scroll";
+/** The page's build, which the inline script sets for the recorder to stamp frames with. */
+export const BOOT_FRAME_BUILD_GLOBAL = "__gloomBootFrameBuild";
+/** A frame's markup larger than this is not kept or drawn; a layout's chrome is a few dozen kilobytes. */
+export const MAX_BOOT_FRAME_CHARS = 600_000;
+/** The root and body styles: the theme's colours and the text metrics, a few kilobytes. */
+const MAX_BOOT_FRAME_STYLE_CHARS = 20_000;
+const MAX_BOOT_FRAME_BUILD_CHARS = 200;
+
+function isPositiveSize(value: unknown): boolean {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+
+/** A stored frame of the right shape and within the size limits. Anything else is not saved or drawn. */
+export function isBootFrame(value: unknown): value is BootFrame {
+  if (!value || typeof value !== "object") return false;
+  const frame = value as Record<string, unknown>;
+  return typeof frame.build === "string" && frame.build.length <= MAX_BOOT_FRAME_BUILD_CHARS
+    && isPositiveSize(frame.width)
+    && isPositiveSize(frame.height)
+    && typeof frame.rootStyle === "string" && frame.rootStyle.length <= MAX_BOOT_FRAME_STYLE_CHARS
+    && typeof frame.bodyStyle === "string" && frame.bodyStyle.length <= MAX_BOOT_FRAME_STYLE_CHARS
+    && typeof frame.html === "string" && frame.html.length <= MAX_BOOT_FRAME_CHARS;
+}
+
+/**
+ * Strips a frame's markup, in `container` and the container itself, of
+ * everything that could load, run, navigate, take focus or be found as the
+ * app's own: elements that load or run, event handlers, links and sources,
+ * form targets, styles that fetch, ids and names. The recorder runs it on the
+ * copy it stores, and the page again on the copy it reads back, which is only
+ * as trustworthy as the file or storage it was kept in.
+ *
+ * The page's inline script carries this function's source, so it is plain
+ * JavaScript that reads nothing outside itself.
+ */
+export function scrubBootFrame(container: ParentNode): void {
+  const droppedElements = [
+    "script", "noscript", "style", "link", "meta", "base", "title", "template", "slot",
+    "iframe", "frame", "frameset", "object", "embed", "applet", "param", "portal", "fencedframe",
+    "img", "image", "picture", "source", "track", "video", "audio", "canvas", "math",
+    "foreignobject", "use", "feimage", "animate", "animatemotion", "animatetransform", "animatecolor",
+    "set", "discard", "mpath", "handler", "listener",
+  ];
+  const droppedAttributes = [
+    "src", "srcset", "srcdoc", "action", "formaction", "poster", "background", "ping", "lowsrc",
+    "dynsrc", "data", "codebase", "classid", "archive", "longdesc", "usemap", "manifest", "is",
+    "id", "name", "tabindex", "autofocus", "contenteditable", "value",
+    "data-gloom-pane-id", "data-gloom-remote-node-id",
+  ];
+  // A style that could fetch: url(), image() and image-set() take addresses,
+  // and an escape could spell either past this check.
+  const fetchingStyle = /url\s*\(|image(-set)?\s*\(|\\|@import|expression\s*\(/i;
+  const scriptAddress = /^\s*(javascript|vbscript|data)\s*:/i;
+  const scrubElement = (element: Element) => {
+    for (const attribute of Array.from(element.attributes)) {
+      const name = attribute.name.toLowerCase();
+      const value = attribute.value;
+      if (
+        name.startsWith("on")
+        || name.endsWith("href")
+        || droppedAttributes.includes(name)
+        || /url\s*\(/i.test(value)
+        || scriptAddress.test(value)
+        || (name === "style" && fetchingStyle.test(value))
+      ) {
+        element.removeAttribute(attribute.name);
+      }
+    }
+  };
+  const self = container as unknown as Element;
+  if (self.nodeType === 1) scrubElement(self);
+  for (const element of Array.from(container.querySelectorAll("*"))) {
+    if (droppedElements.includes(element.localName.toLowerCase())) element.remove();
+    else scrubElement(element);
+  }
+}
+
+/**
+ * Names the build a page comes from, from its script and stylesheet: a frame
+ * drawn by another build may not match the stylesheet it would be drawn with.
+ */
+export function bootFrameBuildId(script: string | Uint8Array, stylesheet: string): string {
+  return `${Bun.hash(script).toString(36)}-${Bun.hash(stylesheet).toString(36)}`;
+}
+
+/** A JSON value safe inside an inline script. */
+function scriptJson(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, "\\u003c")
+    .replace(/\u2028/g, "\\u2028")
+    .replace(/\u2029/g, "\\u2029");
+}
+
+interface BootFrameScriptOptions {
+  build: string;
+  /** A JavaScript expression for the stored frame, evaluated inside a try. */
+  source: string;
+  /** A JavaScript expression that is true on a page that draws no frame, such as a window holding one popped-out pane. */
+  skip?: string;
+  /** The default theme's root style, for the bare shell drawn when there is no frame to redraw. */
+  shellStyle?: string;
+}
+
+/**
+ * The inline script that draws the frame, placed right after the app's root.
+ * A stored frame from this build for this window size is drawn as it was,
+ * after the page scrubs it again. Otherwise the page draws the bare shell:
+ * the header and status bar, empty, in the stored frame's theme and text
+ * size when there is one, else the default theme's.
+ */
+export function bootFrameScript({ build, source, skip = "false", shellStyle = "" }: BootFrameScriptOptions): string {
+  return `(function () {
+  window.${BOOT_FRAME_BUILD_GLOBAL} = ${scriptJson(build)};
+  var root = document.getElementById("root");
+  var skip = false;
+  try { skip = !!(${skip}); } catch (error) { skip = false; }
+  if (!root || skip) return;
+  var frame = null;
+  try { frame = ${source}; } catch (error) { frame = null; }
+  var maxStyle = ${MAX_BOOT_FRAME_STYLE_CHARS};
+  if (!frame || typeof frame !== "object" || typeof frame.html !== "string" || frame.html.length > ${MAX_BOOT_FRAME_CHARS}
+    || typeof frame.rootStyle !== "string" || frame.rootStyle.length > maxStyle
+    || typeof frame.bodyStyle !== "string" || frame.bodyStyle.length > maxStyle) frame = null;
+  var scrub = ${scrubBootFrame.toString()};
+  // Parsed in a template, whose content is inert: nothing in it loads or runs before the scrub.
+  var template = document.createElement("template");
+  var safeStyle = function (style) {
+    var holder = template.content.ownerDocument.createElement("div");
+    holder.setAttribute("style", style);
+    scrub(holder);
+    return holder.getAttribute("style") || "";
+  };
+  var overlay = document.createElement("div");
+  overlay.id = ${scriptJson(BOOT_FRAME_ELEMENT_ID)};
+  // A picture of the app: nothing in it takes focus, a click or a screen reader.
+  overlay.setAttribute("inert", "");
+  overlay.setAttribute("aria-hidden", "true");
+  var rootStyle = frame ? safeStyle(frame.rootStyle) : "";
+  var bodyStyle = frame ? safeStyle(frame.bodyStyle) : "";
+  if (frame && frame.build === ${scriptJson(build)}
+    && Math.abs(frame.width - window.innerWidth) <= 1 && Math.abs(frame.height - window.innerHeight) <= 1) {
+    if (rootStyle) document.documentElement.setAttribute("style", rootStyle);
+    if (bodyStyle) document.body.setAttribute("style", bodyStyle);
+    overlay.setAttribute("data-gloom-boot-frame", "layout");
+    template.innerHTML = frame.html;
+    scrub(template.content);
+    overlay.appendChild(template.content);
+  } else {
+    // The default theme first, so a stored theme that names fewer colours still leaves every one set.
+    var shellStyle = ${scriptJson(shellStyle)};
+    var themeStyle = [shellStyle, rootStyle].join(" ").trim();
+    if (themeStyle && !document.documentElement.getAttribute("style")) document.documentElement.setAttribute("style", themeStyle);
+    if (bodyStyle) document.body.setAttribute("style", bodyStyle);
+    overlay.setAttribute("data-gloom-boot-frame", "shell");
+    overlay.innerHTML = '<div class="gloom-boot-header"></div><div class="gloom-boot-status"></div>';
+  }
+  root.parentNode.insertBefore(overlay, root.nextSibling);
+  var scrolled = overlay.querySelectorAll("[${BOOT_FRAME_SCROLL_ATTRIBUTE}]");
+  for (var index = 0; index < scrolled.length; index += 1) {
+    var offset = scrolled[index].getAttribute("${BOOT_FRAME_SCROLL_ATTRIBUTE}").split(",");
+    scrolled[index].scrollTop = Number(offset[0]) || 0;
+    scrolled[index].scrollLeft = Number(offset[1]) || 0;
+  }
+})();`;
+}

package/src/renderers/dom/boot-frame.ts

@@ -0,0 +1,237 @@
+/**
+ * The layout a launch draws before the app is up.
+ *
+ * Loading the app's script and starting it takes a second or more, and the
+ * page used to say "Loading Gloomberb..." for that time. Instead the app keeps
+ * a copy of its own frame: the header, every pane's chrome with its title and
+ * tabs, the dividers and the status bar, with each pane's body and footer
+ * left empty. The page draws that copy before its script loads, over the
+ * root the app renders into, and the app takes it down the first frame it
+ * has drawn its own layout. The copy is redrawn only from the same build, in
+ * a window of the same size: anything else could put panes where the app
+ * will not. The page's side, the stored format and the script that draws
+ * it, is boot-frame-page.ts.
+ *
+ * Each host keeps the copy where its page can read it before any script has
+ * loaded: the web app in localStorage, the desktop app beside the remembered
+ * window frame, handed to the window as it opens.
+ */
+
+import {
+  BOOT_FRAME_BUILD_GLOBAL,
+  BOOT_FRAME_ELEMENT_ID,
+  BOOT_FRAME_SCROLL_ATTRIBUTE,
+  MAX_BOOT_FRAME_CHARS,
+  scrubBootFrame,
+  type BootFrame,
+} from "./boot-frame-page";
+
+/** What a frame keeps: these elements, and the elements on the way to them. */
+const FRAME_ROLES = ["app-header", "pane-window", "dock-divider", "status-bar"];
+const FRAME_SELECTOR = FRAME_ROLES.map((role) => `[data-gloom-role="${role}"]`).join(", ");
+/**
+ * Kept empty: pane bodies and footers are most of the page and are the data
+ * the app fills from its cache as it starts. The market state and SPY quote in
+ * the header, an update status said last session ("Restart to update") and
+ * the status bar's widgets (an unread count, the account) are not true at the
+ * next launch.
+ */
+const EMPTIED_SELECTOR = [
+  "pane-body",
+  "pane-footer",
+  "header-market",
+  "header-update-status",
+  "status-widgets",
+].map((role) => `[data-gloom-role="${role}"]`).join(", ");
+
+/** The build this page says it is, or null where no frame script ran (tests, other pages). */
+function currentBootFrameBuild(win: Window = window): string | null {
+  const build = (win as unknown as Record<string, unknown>)[BOOT_FRAME_BUILD_GLOBAL];
+  return typeof build === "string" && build ? build : null;
+}
+
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 3;
+
+/**
+ * Copies what the frame keeps of `node`: frame elements whole but for their
+ * data, and the elements on the way to them bare. Walks the live tree rather
+ * than cloning it all, so pane bodies (most of the page) are never copied.
+ */
+function copyFrame(node: Node, insideFrame: boolean): Node | null {
+  if (node.nodeType === TEXT_NODE) return insideFrame ? node.cloneNode(false) : null;
+  if (node.nodeType !== ELEMENT_NODE) return null;
+  const element = node as Element;
+  const isFrame = insideFrame || element.matches(FRAME_SELECTOR);
+  if (!isFrame && element.querySelector(FRAME_SELECTOR) === null) return null;
+  const copy = element.cloneNode(false) as Element;
+  if (isFrame && element.matches(EMPTIED_SELECTOR)) return copy;
+  // A box scrolled by a pixel of overflow (the shell is) is drawn scrolled too.
+  if (element.scrollTop || element.scrollLeft) {
+    copy.setAttribute(BOOT_FRAME_SCROLL_ATTRIBUTE, `${Math.round(element.scrollTop)},${Math.round(element.scrollLeft)}`);
+  }
+  for (const child of element.childNodes) {
+    const childCopy = copyFrame(child, isFrame);
+    if (childCopy) copy.appendChild(childCopy);
+  }
+  return copy;
+}
+
+/**
+ * The app's frame as it is drawn now, or null when there is none to keep: no
+ * layout drawn yet, or a frame too large to store. A layout with every pane
+ * closed is kept as it is, so the next launch does not draw panes the user
+ * closed.
+ */
+export function captureBootFrame(doc: Document, root: Element, build: string): BootFrame | null {
+  const view = doc.defaultView;
+  if (!view || !root.querySelector('[data-gloom-role="pane-window"], [data-gloom-role="status-bar"]')) return null;
+  const copy = copyFrame(root, false) as Element | null;
+  if (copy) scrubBootFrame(copy);
+  const html = copy?.innerHTML ?? "";
+  if (!html || html.length > MAX_BOOT_FRAME_CHARS) return null;
+  return {
+    build,
+    width: view.innerWidth,
+    height: view.innerHeight,
+    rootStyle: doc.documentElement.getAttribute("style") ?? "",
+    bodyStyle: doc.body.getAttribute("style") ?? "",
+    html,
+  };
+}
+
+/** The status bar's text but its widgets', which the frame leaves empty: a new unread count is not a new layout. */
+function statusBarLabels(statusBar: Element): string {
+  return Array.from(statusBar.children)
+    .filter((child) => child.getAttribute("data-gloom-role") !== "status-widgets")
+    .map((child) => child.textContent ?? "")
+    .join("");
+}
+
+/**
+ * What would make a new frame differ from the last: the window, the theme
+ * and where each pane is and what it is called. Cheap enough to read every
+ * few seconds; the frame itself is only copied when this changes.
+ */
+export function bootFrameSignature(doc: Document, root: Element): string {
+  const view = doc.defaultView;
+  const parts: string[] = [
+    `${view?.innerWidth ?? 0}x${view?.innerHeight ?? 0}`,
+    doc.documentElement.getAttribute("style") ?? "",
+    doc.body.getAttribute("style") ?? "",
+  ];
+  for (const element of root.querySelectorAll(
+    '[data-gloom-role="pane-window"], [data-gloom-role="dock-divider"], [data-gloom-role="status-bar"]',
+  )) {
+    const rect = element.getBoundingClientRect();
+    const role = element.getAttribute("data-gloom-role");
+    parts.push([
+      role,
+      Math.round(rect.x), Math.round(rect.y), Math.round(rect.width), Math.round(rect.height),
+      element.getAttribute("data-focused") ?? "",
+      role === "status-bar" ? statusBarLabels(element) : element.querySelector('[data-gloom-role="pane-header"]')?.textContent ?? "",
+    ].join(":"));
+  }
+  return parts.join("|");
+}
+
+const runningRecorders = new Set<() => void>();
+
+/**
+ * Stops every recorder on the page for good, before the data is reset: a
+ * frame saved after the reset, as the page closes, would draw the old layout
+ * at the next launch.
+ */
+export function stopBootFrameRecorders(): void {
+  for (const stop of [...runningRecorders]) stop();
+}
+
+interface BootFrameRecorderOptions {
+  doc: Document;
+  root: Element;
+  save(frame: BootFrame): void;
+  /** How often the layout is checked for a change. */
+  intervalMs?: number;
+}
+
+/**
+ * Keeps the stored frame current: shortly after the app is up, whenever the
+ * layout settles into something new, and as the page is hidden or closed.
+ * Does nothing on a page that drew no frame script, which is how a desktop
+ * pop-out window, a test or a share page stays out of it.
+ */
+export function startBootFrameRecorder({
+  doc,
+  root,
+  save,
+  intervalMs = 10_000,
+}: BootFrameRecorderOptions): () => void {
+  const view = doc.defaultView;
+  const build = view ? currentBootFrameBuild(view) : null;
+  if (!view || !build) return () => {};
+  let lastSignature = "";
+  let stopped = false;
+  const record = () => {
+    if (stopped) return;
+    const signature = bootFrameSignature(doc, root);
+    if (signature === lastSignature) return;
+    const frame = captureBootFrame(doc, root, build);
+    if (!frame) return;
+    lastSignature = signature;
+    save(frame);
+  };
+  const recordWhenIdle = () => {
+    if (doc.visibilityState === "hidden") return;
+    const idle = (view as Window & { requestIdleCallback?: (callback: () => void, options?: { timeout: number }) => number }).requestIdleCallback;
+    if (idle) idle.call(view, record, { timeout: 2_000 });
+    else record();
+  };
+  const onHidden = () => {
+    if (doc.visibilityState === "hidden") record();
+  };
+  const first = view.setTimeout(recordWhenIdle, 3_000);
+  const interval = view.setInterval(recordWhenIdle, intervalMs);
+  doc.addEventListener("visibilitychange", onHidden);
+  view.addEventListener("pagehide", record);
+  const stop = () => {
+    stopped = true;
+    runningRecorders.delete(stop);
+    view.clearTimeout(first);
+    view.clearInterval(interval);
+    doc.removeEventListener("visibilitychange", onHidden);
+    view.removeEventListener("pagehide", record);
+  };
+  runningRecorders.add(stop);
+  return stop;
+}
+
+/**
+ * Takes the launch frame down as the app draws its own layout, or a failure
+ * screen, in `root`. Until then the frame covers the app, so the user never
+ * sees it half built. Mutation observers run before the page paints, so the
+ * frame goes in the paint that shows the layout, not a frame after it.
+ * Returns a function that takes the frame down now, for a page that gives
+ * up on starting.
+ */
+export function releaseBootFrameWhenDrawn(doc: Document, root: Element): () => void {
+  const view = doc.defaultView;
+  const frame = doc.getElementById(BOOT_FRAME_ELEMENT_ID);
+  if (!view || !frame) return () => {};
+  let released = false;
+  const release = () => {
+    if (released) return;
+    released = true;
+    observer.disconnect();
+    frame.remove();
+  };
+  const drawn = () => root.querySelector(
+    '[data-gloom-role="pane-window"], [data-gloom-role="status-bar"], .gloom-fatal',
+  ) !== null;
+  const observer = new view.MutationObserver(() => {
+    if (drawn()) release();
+  });
+  observer.observe(root, { childList: true, subtree: true });
+  if (drawn()) release();
+  return release;
+}
+

package/src/renderers/dom/build-assets.ts

@@ -2,6 +2,10 @@ import { readFile, writeFile } from "fs/promises";
 import { dirname, join, relative, resolve } from "path";
 import type { BunPlugin } from "bun";
 import { TITLEBAR_OVERLAY_HEIGHT_PX } from "../../components/layout/titlebar-overlay";
+import { getThemeColors } from "../../theme/colors";
+import { themeCssVariables } from "../../theme/ui-tokens";
+import { DEFAULT_THEME } from "../../theme/themes";
+import { bootFrameBuildId, bootFrameScript } from "./boot-frame-page";
 
 /** Imports whose path ends with the first entry resolve to the second, relative to the view directory. */
 type AliasRule = readonly [string, string];
@@ -12,10 +16,19 @@ type PageOptions = {
   failureMessage: string;
   missingEntryMessage: string;
   title: string;
-  loadingText: string;
+  /** Text the page shows until its script draws, for a page with no launch frame. */
+  loadingText?: string;
   bootstrapScript: string;
+  /** Draw the launch frame (boot-frame.ts) from where this host keeps it. */
+  bootFrame?: PageBootFrame;
 };
 
+/** Where a page reads its launch frame from: JavaScript expressions run before its script loads. */
+export interface PageBootFrame {
+  source: string;
+  skip?: string;
+}
+
 interface ViewBundleOptions {
   entrypoint: string;
   outdir: string;
@@ -40,7 +53,7 @@ function minifyOption(keepNames: boolean | undefined) {
 }
 
 // From this file rather than the working directory, so a build started from
-// any folder (`gloomberb shot` run from a checkout or a package install) finds
+// any folder (`gloom shot` run from a checkout or a package install) finds
 // the sources.
 const ELECTROBUN_VIEW_DIR = join(import.meta.dir, "..", "electrobun", "view");
 
@@ -109,7 +122,7 @@ export async function buildViewBundle({
 }
 
 export async function writeElectrobunViewPage(options: PageOptions): Promise<string> {
-  const { script } = await buildViewBundle({
+  const { script, stylesheet: bundledStylesheet } = await buildViewBundle({
     entrypoint: options.entrypoint,
     outdir: options.outdir,
     aliasRules: options.aliasRules,
@@ -125,23 +138,48 @@ export async function writeElectrobunViewPage(options: PageOptions): Promise<str
   const stylesheet = await readViewStylesheet();
   const entrySrc = `./${relative(options.outdir, script).replaceAll("\\", "/")}`;
   const htmlPath = join(options.outdir, "index.html");
-  await writeFile(htmlPath, renderElectrobunViewHtml({ ...options, stylesheet, entrySrc }));
+  const bootFrame = options.bootFrame
+    ? { ...options.bootFrame, build: await pageBuildId(script, bundledStylesheet ?? null, stylesheet) }
+    : undefined;
+  await writeFile(htmlPath, renderElectrobunViewHtml({ ...options, stylesheet, entrySrc, bootFrame }));
   return htmlPath;
 }
 
+/** Names a page's build for its launch frame, from the files that draw it. */
+export async function pageBuildId(script: string, stylesheetPath: string | null, inlineStylesheet = ""): Promise<string> {
+  const css = (stylesheetPath ? await readFile(stylesheetPath, "utf8") : "") + inlineStylesheet;
+  return bootFrameBuildId(await readFile(script), css);
+}
+
+/** The launch frame's inline script, with the default theme's colours for the bare shell. */
+export function pageBootFrameScript(bootFrame: PageBootFrame & { build: string }): string {
+  const shellStyle = themeCssVariables(getThemeColors(DEFAULT_THEME)).map(([name, value]) => `${name}: ${value};`).join(" ");
+  return bootFrameScript({ ...bootFrame, shellStyle });
+}
+
 /** The DOM renderer's stylesheet, sized for the titlebar, which a view page inlines. */
 export async function readViewStylesheet(): Promise<string> {
   return withTitlebarOverlayHeight(await readFile(join(DOM_RENDERER_DIR, "styles.css"), "utf8"));
 }
 
-/** A view page: the stylesheet inline, the bootstrap script, then the bundle at `entrySrc`. */
+/**
+ * A view page: the stylesheet inline, the bootstrap script, the launch frame
+ * when the page has one, then the bundle at `entrySrc`.
+ */
 export function renderElectrobunViewHtml({
   title,
   loadingText,
   stylesheet,
   bootstrapScript,
+  bootFrame,
   entrySrc,
-}: Pick<PageOptions, "title" | "loadingText" | "bootstrapScript"> & { stylesheet: string; entrySrc: string }): string {
+}: Pick<PageOptions, "title" | "loadingText" | "bootstrapScript"> & {
+  stylesheet: string;
+  entrySrc: string;
+  bootFrame?: PageBootFrame & { build: string };
+}): string {
+  const loading = loadingText ? `<div class="gloom-loading">${loadingText}</div>` : "";
+  const frameScript = bootFrame ? `\n    <script>\n${pageBootFrameScript(bootFrame)}\n    </script>` : "";
   return `<!doctype html>
 <html lang="en">
   <head>
@@ -151,10 +189,10 @@ export function renderElectrobunViewHtml({
     <style>${stylesheet}</style>
   </head>
   <body style="margin:0;background:#000;">
-    <div id="root"><div class="gloom-loading">${loadingText}</div></div>
+    <div id="root">${loading}</div>
     <script>
 ${bootstrapScript}
-    </script>
+    </script>${frameScript}
     <script type="module" src="${entrySrc}"></script>
   </body>
 </html>

package/src/renderers/dom/desktop/controls.tsx

@@ -670,7 +670,7 @@ export function WebPageStackView({
   return (
     <Box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0} minHeight={0} overflow="hidden">
       {!headerAttached && (
-        <div className="gloom-stack-bar" data-gloom-role="page-stack-header">
+        <div className="gloom-stack-bar" data-gloom-role="page-stack-header" data-gloom-top-surface="">
           <button
             type="button"
             className="gloom-stack-back"

package/src/renderers/dom/desktop/query-bar.tsx

@@ -290,6 +290,8 @@ export function WebQueryBar({ search, items, view, onClearAll, meta, leading, op
       ref={rootRef}
       className="gloom-qb"
       data-gloom-role="query-bar"
+      // The active title-bar tab above takes this band's colour (top-surface.ts).
+      data-gloom-top-surface=""
       // A search with nothing beside it may take the room the filters would.
       data-search-only={search && items.length === 0 && !view ? "true" : undefined}
     >

package/src/renderers/dom/dom-ui-host.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource react */
-import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import type { CSSProperties } from "react";
 import type { UiHost } from "../../ui/host";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../theme/font-scale";
 import { detectPlatform } from "../../utils/platform";
@@ -26,9 +26,10 @@ import { WebBox } from "./host/box";
 import { WebChartSurface } from "./host/chart-surface";
 import { WebSurface3D } from "./host/surface-3d";
 import { WebInput, WebTextarea } from "./host/input";
+import { WebImageSurface } from "./host/image-surface";
 import { WebMediaSurface } from "./host/media-surface";
 import { WebScrollBox } from "./host/scroll-box";
-import { cleanDomProps, commonStyle } from "./host/style";
+import { cleanDomProps } from "./host/style";
 import { WebAsciiText, WebSpan, WebStrong, WebText, WebUnderline } from "./host/text";
 import { WebTabs } from "./host/tabs";
 
@@ -97,33 +98,7 @@ export function createDomUiHost(
     Tabs: WebTabs,
     ChartSurface: WebChartSurface,
     Surface3D: WebSurface3D,
-    ImageSurface: ({ children, src, alt = "", objectFit = "contain", ...props }) => {
-      const imageSrc = typeof src === "string" ? src.trim() : "";
-      const [failed, setFailed] = useState(false);
-      useEffect(() => setFailed(false), [imageSrc]);
-      const baseStyle = commonStyle(props);
-      return (
-        <div
-          {...cleanDomProps(props)}
-          style={{
-            ...baseStyle,
-            overflow: baseStyle.overflow ?? "hidden",
-            ...(props.style as CSSProperties | undefined),
-          }}
-        >
-          {imageSrc && !failed ? (
-            <img
-              key={imageSrc}
-              src={imageSrc}
-              alt={alt}
-              draggable={false}
-              onError={() => setFailed(true)}
-              style={{ width: "100%", height: "100%", display: "block", objectFit }}
-            />
-          ) : children as ReactNode}
-        </div>
-      );
-    },
+    ImageSurface: WebImageSurface,
     MediaSurface: WebMediaSurface,
     AudioPlayer: WebAudioPlayer,
     SpinnerMark: ({ color, ...props }) => (

package/src/renderers/dom/host/ascii-text.ts

@@ -9,6 +9,20 @@ const WEB_GLOOMBERB_WORDMARK = [
   " \\____|_|\\___/ \\___/|_| |_| |_|_.__/ \\___|_|  |_.__/ ",
 ];
 
+const WEB_GLOOM_WORDMARK = [
+  "  ____ _                       ",
+  " / ___| | ___   ___  _ __ ___  ",
+  "| |  _| |/ _ \\ / _ \\| '_ ` _ \\ ",
+  "| |_| | | (_) | (_) | | | | | |",
+  " \\____|_|\\___/ \\___/|_| |_| |_|",
+];
+
+/** The web wordmarks, by the text they spell. */
+const WEB_WORDMARKS = new Map<string, string[]>([
+  ["gloom", WEB_GLOOM_WORDMARK],
+  ["gloomberb", WEB_GLOOMBERB_WORDMARK],
+]);
+
 type WebWordmarkVariant = "legacy" | "compat" | null;
 
 /**
@@ -22,7 +36,7 @@ export function webAsciiTextWordmarkVariant(
   font: AsciiFontName = "tiny",
   desktopPlatform?: string,
 ): WebWordmarkVariant {
-  if (font !== "wordmark" || text.trim().toLowerCase() !== "gloomberb") return null;
+  if (font !== "wordmark" || !WEB_WORDMARKS.has(text.trim().toLowerCase())) return null;
   return detectPlatform(desktopPlatform) === "darwin" ? "legacy" : "compat";
 }
 
@@ -32,6 +46,6 @@ export function webAsciiTextLines(
   desktopPlatform?: string,
 ): string[] {
   return webAsciiTextWordmarkVariant(text, font, desktopPlatform) === "compat"
-    ? WEB_GLOOMBERB_WORDMARK
+    ? WEB_WORDMARKS.get(text.trim().toLowerCase())!
     : renderAsciiText(text, font);
 }