@arraypress/extension-kit 1.6.0 → 1.8.0

package/src/ai/model.js

@@ -0,0 +1,312 @@
+/**
+ * Chrome's on-device model (Gemini Nano, through the Prompt API), the way
+ * every extension here uses it, following
+ * https://developer.chrome.com/docs/ai/prompt-api:
+ *
+ * - `availability()` is asked with the options `create()` gets, and only an
+ *   'available' model is used: nothing here downloads it, except
+ *   {@link downloadModel}, which a page calls from the person's click (Chrome
+ *   only downloads from a user gesture) and which reports progress;
+ * - one base session, with the instructions and examples, is made once and
+ *   kept; each question goes to a `clone()` of it, so answers don't leak into
+ *   each other;
+ * - each answer has a time limit: an `AbortSignal` stops the answer once
+ *   it's late, and the caller gets a reason instead of a hang;
+ * - the first session after Chrome starts can take ~18 s while the model
+ *   loads (a cold start, M3 Max). A question with a shorter limit gets
+ *   'late', and the session goes on loading for the next one. Nothing loads
+ *   it ahead of time: that would load the model on every start for work that
+ *   may never come.
+ *
+ * Nothing here touches `chrome.*` or the global itself: the Prompt API comes
+ * in as `model` (read when used, since Chrome may add it after start-up), so
+ * tests hand it the kit's fake (`fakeLanguageModel`, `/testing`) at exactly
+ * this edge. TypeScript's DOM library doesn't declare the Prompt API yet, so
+ * the parts used are typed here.
+ *
+ * @module ai/model
+ */
+
+import { within } from '../time/time.js';
+
+/**
+ * The model's answer to `availability()`: 'available', 'downloadable',
+ * 'downloading' or 'unavailable'; and, from {@link modelAvailability},
+ * 'missing' when this Chrome has no Prompt API.
+ *
+ * @typedef {'available' | 'downloadable' | 'downloading' | 'unavailable' | 'missing'} Availability
+ */
+
+/**
+ * @typedef {object} PromptOptions
+ * @property {AbortSignal} [signal] Stops the answer.
+ * @property {object} [responseConstraint] A JSON Schema (or RegExp) the answer must follow.
+ */
+
+/**
+ * @typedef {object} LanguageModelSession
+ * @property {(prompt: string, options?: PromptOptions) => Promise<string>} prompt The whole answer.
+ * @property {(options?: {signal?: AbortSignal}) => Promise<LanguageModelSession>} clone A copy with the same history.
+ * @property {() => void} destroy Let it go.
+ */
+
+/**
+ * @typedef {{role: 'system' | 'user' | 'assistant', content: string}} InitialPrompt
+ */
+
+/**
+ * @typedef {object} LanguageModelOptions
+ * @property {{type: string, languages: string[]}[]} [expectedInputs] What it's given.
+ * @property {{type: string, languages: string[]}[]} [expectedOutputs] What it answers in.
+ * @property {InitialPrompt[]} [initialPrompts] Its instructions and examples.
+ * @property {(monitor: EventTarget) => void} [monitor] Hears `downloadprogress` (`loaded`, 0–1) while the model downloads.
+ * @property {AbortSignal} [signal] Stops creating it.
+ */
+
+/**
+ * @typedef {object} LanguageModelStatic
+ * @property {(options?: LanguageModelOptions) => Promise<Availability>} availability Whether it can run here.
+ * @property {(options?: LanguageModelOptions) => Promise<LanguageModelSession>} create A session (downloads the model first, from a click).
+ */
+
+/**
+ * Chrome's `LanguageModel`, or undefined when this Chrome has none.
+ *
+ * @param {object} [scope] - Where to look. Default `globalThis` (a page, or the service worker).
+ * @returns {LanguageModelStatic | undefined} The Prompt API.
+ * @example
+ * const sessions = createModelSession({ model: chromeLanguageModel, options: ENGLISH });
+ */
+export function chromeLanguageModel(scope = globalThis) {
+  return /** @type {{LanguageModel?: LanguageModelStatic}} */ (scope).LanguageModel;
+}
+
+/**
+ * The model's state, never throwing: 'missing' without a Prompt API, and
+ * 'unavailable' when asking fails.
+ *
+ * @param {LanguageModelStatic | undefined} model - The Prompt API.
+ * @param {LanguageModelOptions} options - The options sessions are created with.
+ * @returns {Promise<Availability>} Its state.
+ * @example
+ * await modelAvailability(chromeLanguageModel(), ENGLISH); // 'available'
+ */
+export async function modelAvailability(model, options) {
+  if (!model) return 'missing';
+  try {
+    return await model.availability(options);
+  } catch {
+    return 'unavailable';
+  }
+}
+
+/**
+ * Download the model, from the person's click: `create()` with a monitor,
+ * the session let go once made. Call it first in the click's handler, with
+ * nothing awaited before it, or Chrome refuses (no user activation).
+ *
+ * @param {LanguageModelStatic | undefined} model - The Prompt API.
+ * @param {LanguageModelOptions} options - The options sessions are created with.
+ * @param {{onProgress?: (loaded: number) => void, signal?: AbortSignal}} [handlers] - `onProgress`: how much is
+ *   downloaded, 0–1, as Chrome reports it; `signal`: stops it.
+ * @returns {Promise<Availability>} The state afterwards ('available' once it's here).
+ * @throws {Error} When there's no Prompt API, or Chrome couldn't download it.
+ * @example
+ * button.addEventListener('click', () => {
+ *   downloadModel(chromeLanguageModel(), ENGLISH, { onProgress: (loaded) => { bar.value = loaded; } })
+ *     .then(show, () => show('downloadable', 'The download didn’t finish. Try again.'));
+ * });
+ */
+export async function downloadModel(model, options, { onProgress, signal } = {}) {
+  if (!model) throw new Error('This Chrome has no Prompt API');
+  const session = await model.create({
+    ...options,
+    ...(signal && { signal }),
+    monitor: (monitor) => monitor.addEventListener('downloadprogress', (event) => {
+      onProgress?.(Number(/** @type {ProgressEvent} */ (event).loaded) || 0);
+    }),
+  });
+  session.destroy();
+  return modelAvailability(model, options);
+}
+
+/**
+ * The settings page's words for a state: standard message keys (the
+ * extension's `_locales` names them alike), as `SITE_LIST_MESSAGES` does
+ * for a site list.
+ */
+export const MODEL_MESSAGES = Object.freeze({
+  /** “Chrome’s built-in AI”: the row's name. */
+  name: 'optionsModel',
+  /** “Checking…” before the state is known. */
+  checking: 'optionsModelChecking',
+  /** “Ready”. */
+  ready: 'optionsModelReady',
+  /** “Needs download”. */
+  needsDownload: 'optionsModelNeedsDownload',
+  /** “Chrome downloads its model once and shares it with every site and extension that uses it”. */
+  downloadHelp: 'optionsModelDownloadHelp',
+  /** “Download”: the button. */
+  download: 'optionsModelDownload',
+  /** “Downloading… $PERCENT$%” (content `$1`). */
+  downloading: 'optionsModelDownloading',
+  /** “The download didn’t finish. Try again.” */
+  downloadFailed: 'optionsModelDownloadFailed',
+  /** “Not supported on this computer”. */
+  unsupported: 'optionsModelUnsupported',
+  /** What a computer needs to run it. */
+  requirements: 'optionsModelRequirements',
+  /** “This Chrome doesn’t have it”. */
+  missing: 'optionsModelMissing',
+  /** What to do about that, and that the extension works without it. */
+  missingHelp: 'optionsModelMissingHelp',
+});
+
+/**
+ * The model's state, as a settings page shows it.
+ *
+ * @typedef {object} ModelStatus
+ * @property {'ready' | 'pending' | 'off'} state Ready to use, can be downloaded, or can't run here.
+ * @property {string} status The status's message key ({@link MODEL_MESSAGES}).
+ * @property {string} help The help's message key ('' for none).
+ * @property {boolean} canDownload Whether to offer Download.
+ */
+
+/**
+ * Describe an availability for a settings page. Pure.
+ *
+ * @param {string} availability - 'available', 'downloadable', 'downloading', 'unavailable' or 'missing'.
+ * @returns {ModelStatus} How to show it.
+ * @example
+ * describeModel('downloadable'); // { state: 'pending', status: 'optionsModelNeedsDownload', help: 'optionsModelDownloadHelp', canDownload: true }
+ */
+export function describeModel(availability) {
+  switch (availability) {
+    case 'available':
+      return { state: 'ready', status: MODEL_MESSAGES.ready, help: '', canDownload: false };
+    case 'downloadable':
+    case 'downloading':
+      return { state: 'pending', status: MODEL_MESSAGES.needsDownload, help: MODEL_MESSAGES.downloadHelp, canDownload: true };
+    case 'missing':
+      return { state: 'off', status: MODEL_MESSAGES.missing, help: MODEL_MESSAGES.missingHelp, canDownload: false };
+    default:
+      return { state: 'off', status: MODEL_MESSAGES.unsupported, help: MODEL_MESSAGES.requirements, canDownload: false };
+  }
+}
+
+/**
+ * What a question got: the answer, or why there's none: the model isn't
+ * on this computer ('unavailable'), the time ran out first ('late', a cold
+ * start among them), the caller's signal stopped it ('aborted'), or the model
+ * failed ('failed').
+ *
+ * @typedef {{text: string, reason: 'answered'} | {text: null, reason: 'unavailable' | 'late' | 'aborted' | 'failed'}} ModelAnswer
+ */
+
+/**
+ * @typedef {object} AskOptions
+ * @property {number} timeoutMs The most the answer may take, from the moment it's asked: the base
+ *   session (if it must be made) and the answer.
+ * @property {AbortSignal} [signal] Stops it sooner (the person cancelled).
+ * @property {object} [responseConstraint] A JSON Schema the answer must follow.
+ */
+
+/**
+ * @typedef {object} ModelSession
+ * @property {() => Promise<Availability>} availability The model's state, or 'missing'.
+ * @property {(prompt: string, options: AskOptions) => Promise<ModelAnswer>} ask Ask a copy of the base session.
+ * @property {() => void} release Let the base session go (the next question makes it again).
+ */
+
+/**
+ * A base session over a Prompt API, made when first needed and kept, each
+ * question asked of a `clone()` within its time limit.
+ *
+ * @param {{model: () => LanguageModelStatic | undefined, options: LanguageModelOptions, initialPrompts?: InitialPrompt[]}} setup -
+ *   `model`: the Prompt API, read when used; `options`: what sessions are made (and availability asked)
+ *   with; `initialPrompts`: the instructions and examples every question starts from.
+ * @returns {ModelSession} The session.
+ * @example
+ * const sessions = createModelSession({
+ *   model: chromeLanguageModel,
+ *   options: { expectedInputs: [{ type: 'text', languages: ['en'] }], expectedOutputs: [{ type: 'text', languages: ['en'] }] },
+ *   initialPrompts: [{ role: 'system', content: 'You name downloaded files.' }],
+ * });
+ * const { text } = await sessions.ask('Site: acme.com', { timeoutMs: 2500 }); // null when late
+ */
+export function createModelSession({ model, options, initialPrompts = [] }) {
+  /** @type {Promise<LanguageModelSession> | null} */
+  let base = null;
+
+  /**
+   * The base session, made once; a failed one isn't kept, so the next question tries again.
+   *
+   * @param {LanguageModelStatic} api - The Prompt API, ready.
+   * @returns {Promise<LanguageModelSession>} The session.
+   */
+  function baseSession(api) {
+    if (!base) {
+      const made = api.create({ ...options, ...(initialPrompts.length && { initialPrompts }) });
+      base = made;
+      made.catch(() => {
+        if (base === made) base = null;
+      });
+    }
+    return base;
+  }
+
+  /**
+   * Ask a copy of the base session; the copy is let go after.
+   *
+   * @param {LanguageModelStatic} api - The Prompt API, ready.
+   * @param {string} prompt - The question.
+   * @param {AbortSignal} signal - Stops it once it's late or the caller stops it.
+   * @param {object | undefined} responseConstraint - The answer's shape.
+   * @returns {Promise<string>} The answer.
+   */
+  async function ask(api, prompt, signal, responseConstraint) {
+    const session = await (await baseSession(api)).clone({ signal });
+    try {
+      return await session.prompt(prompt, { signal, ...(responseConstraint && { responseConstraint }) });
+    } finally {
+      session.destroy();
+    }
+  }
+
+  return {
+    availability: () => modelAvailability(model(), options),
+    async ask(prompt, { timeoutMs, signal, responseConstraint }) {
+      const started = Date.now();
+      if (signal?.aborted) return { text: null, reason: 'aborted' };
+      const api = model();
+      const state = await within(modelAvailability(api, options), timeoutMs, /** @type {Availability | 'late'} */ ('late'));
+      if (state === 'late') return { text: null, reason: 'late' };
+      if (state !== 'available' || !api) return { text: null, reason: 'unavailable' };
+      const stop = new AbortController();
+      const onAbort = () => stop.abort();
+      signal?.addEventListener('abort', onAbort, { once: true });
+      try {
+        // A string is the answer; false, it failed; null, it's late.
+        const outcome = await within(
+          ask(api, prompt, stop.signal, responseConstraint).catch(() => /** @type {false} */ (false)),
+          Math.max(0, timeoutMs - (Date.now() - started)),
+          /** @type {string | false | null} */ (null),
+        );
+        if (typeof outcome === 'string') return { text: outcome, reason: 'answered' };
+        if (signal?.aborted) return { text: null, reason: 'aborted' };
+        if (outcome === null) {
+          stop.abort();
+          return { text: null, reason: 'late' };
+        }
+        return { text: null, reason: 'failed' };
+      } finally {
+        signal?.removeEventListener('abort', onAbort);
+      }
+    },
+    release() {
+      const held = base;
+      base = null;
+      held?.then((session) => session.destroy(), () => {});
+    },
+  };
+}

package/src/build/store-frame.d.ts

@@ -10,19 +10,27 @@
  * Playwright at `geometry(zoom).content`, then screenshot `canvas({caption, chrome:
  * windowChrome({tabs, url}), content})` at {@link W}×{@link H}.
  *
+ * The window itself is `frame/window.js`, in the runtime half, so an extension page can draw it
+ * around a capture too; it's re-exported here.
+ *
  * @module build/store-frame
  */
+export { THEMES, letterIcon, windowChrome, windowChromeSvg } from '../frame/window.js';
+export type Theme = import('../frame/window.js').Theme;
+export type Tab = import('../frame/window.js').Tab;
+/** @typedef {import('../frame/window.js').Theme} Theme */
+/** @typedef {import('../frame/window.js').Tab} Tab */
 /** The store screenshot's width. */
 export declare const W = 1280;
 /** The store screenshot's height. */
 export declare const H = 800;
 /** Where the window sits: its left edge, top edge, full width, and tab strip and toolbar heights. */
 export declare const WIN: {
+    strip: 42;
+    toolbar: 46;
     x: number;
     y: number;
     w: number;
-    strip: number;
-    toolbar: number;
 };
 export type Geometry = {
     /**
@@ -57,95 +65,6 @@ export type Geometry = {
  * @returns {Geometry} The window's unscaled width and the size to capture page content at.
  */
 export declare function geometry(zoom?: number): Geometry;
-/**
- * A letter favicon for made-up sites (no real brands).
- *
- * @param {string} letter - The letter.
- * @param {string} bg - Background colour.
- * @param {string} [fg] - Letter colour. Default white.
- * @returns {string} A data: URL of the SVG.
- */
-export declare const letterIcon: (letter: string, bg: string, fg?: string) => string;
-/** Chrome's light and dark window colours, and the canvas behind. */
-export declare const THEMES: {
-    light: {
-        bg: string;
-        caption: string;
-        sub: string;
-        frame: string;
-        tabText: string;
-        tabTextInactive: string;
-        tabSep: string;
-        activeTab: string;
-        toolbar: string;
-        toolbarIcon: string;
-        omnibox: string;
-        url: string;
-        urlDim: string;
-        contentLine: string;
-        shadow: string;
-    };
-    dark: {
-        bg: string;
-        caption: string;
-        sub: string;
-        frame: string;
-        tabText: string;
-        tabTextInactive: string;
-        tabSep: string;
-        activeTab: string;
-        toolbar: string;
-        toolbarIcon: string;
-        omnibox: string;
-        url: string;
-        urlDim: string;
-        contentLine: string;
-        shadow: string;
-    };
-};
-export type Theme = keyof typeof THEMES;
-export type Tab = {
-    /**
-     * Its title.
-     */
-    title: string;
-    /**
-     * Its favicon's URL.
-     */
-    icon: string;
-    /**
-     * The selected tab.
-     */
-    active?: boolean;
-    /**
-     * Playing sound.
-     */
-    audible?: boolean;
-    /**
-     * Muted.
-     */
-    muted?: boolean;
-};
-/**
- * The window's tab strip and toolbar, as HTML. Positions are window-relative.
- *
- * @param {object} options - What to draw.
- * @param {readonly Tab[]} options.tabs - The tabs, left to right.
- * @param {string} options.url - The address bar's text.
- * @param {string} [options.urlHost] - The start of `url` to show in full; the rest is dimmed.
- * @param {Theme} [options.theme] - Default light.
- * @param {number} [options.w] - The window's width. Default the full window.
- * @param {readonly string[]} [options.ext] - Toolbar extension icons' URLs.
- * @returns {string} The HTML, with its own styles.
- */
-export declare function windowChrome({ tabs, url, urlHost, theme, w, ext }: {
-    tabs: readonly Tab[];
-    url: string;
-    urlHost?: string;
-    theme?: Theme;
-    w?: number;
-    ext?: readonly string[];
-}): string;
 /**
  * The macOS arrow pointer.
  *

package/src/build/store-frame.js

@@ -10,16 +10,26 @@
  * Playwright at `geometry(zoom).content`, then screenshot `canvas({caption, chrome:
  * windowChrome({tabs, url}), content})` at {@link W}×{@link H}.
  *
+ * The window itself is `frame/window.js`, in the runtime half, so an extension page can draw it
+ * around a capture too; it's re-exported here.
+ *
  * @module build/store-frame
  */
 
+import { THEMES, WINDOW_BARS, WINDOW_W } from '../frame/window.js';
+
+export { THEMES, letterIcon, windowChrome, windowChromeSvg } from '../frame/window.js';
+
+/** @typedef {import('../frame/window.js').Theme} Theme */
+/** @typedef {import('../frame/window.js').Tab} Tab */
+
 /** The store screenshot's width. */
 export const W = 1280;
 /** The store screenshot's height. */
 export const H = 800;
 const CAPTION_H = 112;
 /** Where the window sits: its left edge, top edge, full width, and tab strip and toolbar heights. */
-export const WIN = { x: 64, y: CAPTION_H, w: 1152, strip: 42, toolbar: 46 };
+export const WIN = { x: 64, y: CAPTION_H, w: WINDOW_W, ...WINDOW_BARS };
 
 /**
  * How a shot's window is laid out.
@@ -42,164 +52,6 @@ export function geometry(zoom = 1) {
   return { zoom, w, content: { width: w, height: Math.round((H - WIN.y) / zoom) - WIN.strip - WIN.toolbar } };
 }
 
-/**
- * @param {unknown} s - Text.
- * @returns {string} It, escaped for HTML text and attributes.
- */
-const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-
-/** Material icon paths (24×24). */
-const P = {
-  back: 'M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z',
-  forward: 'M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z',
-  reload: 'M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z',
-  close: 'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
-  add: 'M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z',
-  more: 'M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z',
-  puzzle: 'M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z',
-  star: 'M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z',
-  tune: 'M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z',
-  sound: 'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z',
-  muted: 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z',
-  person: 'M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z',
-};
-
-/**
- * A Material icon as inline SVG, in the text colour.
- *
- * @param {keyof typeof P} name - Which icon.
- * @param {number} [size] - Width and height in px. Default 20.
- * @returns {string} The SVG markup.
- */
-const icon = (name, size = 20) =>
-  `<svg viewBox="0 0 24 24" width="${size}" height="${size}"><path fill="currentColor" d="${P[name]}"/></svg>`;
-
-/**
- * A letter favicon for made-up sites (no real brands).
- *
- * @param {string} letter - The letter.
- * @param {string} bg - Background colour.
- * @param {string} [fg] - Letter colour. Default white.
- * @returns {string} A data: URL of the SVG.
- */
-export const letterIcon = (letter, bg, fg = '#fff') =>
-  `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" rx="4" fill="${bg}"/><text x="8" y="12" font-family="-apple-system,Helvetica,Arial" font-size="11" font-weight="700" text-anchor="middle" fill="${fg}">${letter}</text></svg>`)}`;
-
-/** Chrome's light and dark window colours, and the canvas behind. */
-export const THEMES = {
-  light: {
-    bg: '#eef2f8', caption: '#1f1f1f', sub: '#444746',
-    frame: '#dde3ea', tabText: '#1f1f1f', tabTextInactive: '#474747', tabSep: '#a8afb8', activeTab: '#ffffff',
-    toolbar: '#ffffff', toolbarIcon: '#474747', omnibox: '#e9eef6', url: '#1f1f1f', urlDim: '#5e5e5e',
-    contentLine: '#d3d7dc', shadow: '0 24px 60px rgba(31,45,70,.20), 0 0 0 .5px rgba(0,0,0,.18)',
-  },
-  dark: {
-    bg: '#1b1c1f', caption: '#e3e3e3', sub: '#c4c7c5',
-    frame: '#1f1f1f', tabText: '#e3e3e3', tabTextInactive: '#c7c7c7', tabSep: '#5f6368', activeTab: '#3c3c3c',
-    toolbar: '#3c3c3c', toolbarIcon: '#c7c7c7', omnibox: '#282828', url: '#e3e3e3', urlDim: '#a8a8a8',
-    contentLine: '#2a2a2a', shadow: '0 24px 60px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.14)',
-  },
-};
-
-/** @typedef {keyof typeof THEMES} Theme */
-
-/**
- * One tab in the drawn window.
- *
- * @typedef {object} Tab
- * @property {string} title Its title.
- * @property {string} icon Its favicon's URL.
- * @property {boolean} [active] The selected tab.
- * @property {boolean} [audible] Playing sound.
- * @property {boolean} [muted] Muted.
- */
-
-const TAB_H = 34;
-
-/**
- * Lay out tabs like Chrome: equal widths up to 240px, shrinking to fit.
- *
- * @param {readonly Tab[]} tabs - The tabs.
- * @param {number} w - The window's width.
- * @returns {{ x: number, width: number }[]} Each tab's window-relative x and width.
- */
-function tabLayout(tabs, w) {
-  const left = 84;
-  const right = 60;
-  const max = 240;
-  const avail = w - left - right - 36;
-  const width = Math.min(max, Math.floor(avail / tabs.length));
-  return tabs.map((_, i) => ({ x: left + i * width, width }));
-}
-
-/**
- * The window's tab strip and toolbar, as HTML. Positions are window-relative.
- *
- * @param {object} options - What to draw.
- * @param {readonly Tab[]} options.tabs - The tabs, left to right.
- * @param {string} options.url - The address bar's text.
- * @param {string} [options.urlHost] - The start of `url` to show in full; the rest is dimmed.
- * @param {Theme} [options.theme] - Default light.
- * @param {number} [options.w] - The window's width. Default the full window.
- * @param {readonly string[]} [options.ext] - Toolbar extension icons' URLs.
- * @returns {string} The HTML, with its own styles.
- */
-export function windowChrome({ tabs, url, urlHost, theme = 'light', w = WIN.w, ext = [] }) {
-  const t = THEMES[theme];
-  const layout = tabLayout(tabs, w);
-  const tabHtml = tabs.map((tab, i) => {
-    const { x, width } = layout[i];
-    const sepAfter = i < tabs.length - 1 && !tab.active && !tabs[i + 1].active;
-    const alert = tab.muted ? icon('muted', 16) : tab.audible ? icon('sound', 16) : '';
-    const showClose = tab.active || width >= 120;
-    return `<div class="tab${tab.active ? ' active' : ''}" style="left:${x}px;width:${width}px">
-      <img class="fav" src="${tab.icon}" width="16" height="16" alt="">
-      <span class="title">${esc(tab.title)}</span>
-      ${alert ? `<span class="alert">${alert}</span>` : ''}
-      ${showClose ? `<span class="x">${icon('close', 14)}</span>` : ''}
-    </div>${sepAfter ? `<span class="sep" style="left:${x + width - 1}px"></span>` : ''}`;
-  }).join('');
-  const last = layout[layout.length - 1];
-  const plusX = last.x + last.width + 4;
-  const extIcons = ext.map((src) => `<img src="${src}" width="16" height="16" alt="" style="margin:0 9px">`).join('');
-  return `
-  <div class="strip">
-    <span class="lights"><i style="background:#ff5f57"></i><i style="background:#febc2e"></i><i style="background:#28c840"></i></span>
-    ${tabHtml}
-    <span class="plus" style="left:${plusX}px">${icon('add', 18)}</span>
-  </div>
-  <div class="toolbar">
-    <span class="tb">${icon('back')}</span><span class="tb dim">${icon('forward')}</span><span class="tb">${icon('reload')}</span>
-    <div class="omni"><span class="site">${icon('tune', 16)}</span><span class="url">${urlHost ? `${esc(urlHost)}<span class="dim">${esc(url.slice(urlHost.length))}</span>` : esc(url)}</span><span class="star">${icon('star', 18)}</span></div>
-    ${extIcons}<span class="tb">${icon('puzzle')}</span>
-    <span class="avatar">${icon('person', 18)}</span><span class="tb">${icon('more')}</span>
-  </div>
-  <style>
-    .strip { position: relative; height: ${WIN.strip}px; background: ${t.frame}; }
-    .lights { position: absolute; left: 16px; top: 15px; display: flex; gap: 8px; }
-    .lights i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
-    .tab { position: absolute; bottom: 0; height: ${TAB_H}px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; box-sizing: border-box; color: ${t.tabTextInactive}; font: 12px/16px system-ui; }
-    .tab.active { background: ${t.activeTab}; color: ${t.tabText}; border-radius: 10px 10px 0 0; z-index: 1; }
-    .tab.active::before, .tab.active::after { content: ''; position: absolute; bottom: 0; width: 10px; height: 10px; }
-    .tab.active::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 10px, ${t.activeTab} 10.5px); }
-    .tab.active::after { right: -10px; background: radial-gradient(circle at 100% 0, transparent 10px, ${t.activeTab} 10.5px); }
-    .tab .fav { flex: none; }
-    .tab .title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent); }
-    .tab .alert, .tab .x { flex: none; display: flex; color: ${t.toolbarIcon}; }
-    .sep { position: absolute; bottom: 9px; width: 1px; height: 18px; background: ${t.tabSep}; }
-    .plus { position: absolute; top: 11px; display: flex; color: ${t.toolbarIcon}; padding: 2px; }
-    .toolbar { height: ${WIN.toolbar}px; background: ${t.toolbar}; display: flex; align-items: center; gap: 4px; padding: 0 8px; box-sizing: border-box; border-bottom: 1px solid ${t.contentLine}; }
-    .tb { width: 34px; height: 34px; display: grid; place-items: center; color: ${t.toolbarIcon}; flex: none; }
-    .tb.dim { opacity: .45; }
-    .omni { flex: 1; min-width: 0; height: 34px; margin: 0 8px; border-radius: 17px; background: ${t.omnibox}; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: ${t.url}; font: 14px system-ui; }
-    .omni .site { display: flex; color: ${t.toolbarIcon}; }
-    .omni .url { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-    .omni .dim { color: ${t.urlDim}; }
-    .omni .star { display: flex; color: ${t.toolbarIcon}; }
-    .avatar { flex: none; width: 26px; height: 26px; margin: 0 4px; border-radius: 50%; background: #7cacf8; color: #fff; display: grid; place-items: end center; overflow: hidden; }
-  </style>`;
-}
-
 /**
  * The macOS arrow pointer.
  *

package/src/build/vendor.js

@@ -28,7 +28,7 @@ const SOURCE = path.dirname(path.dirname(fileURLToPath(import.meta.url)));
 const KIT = '@arraypress/extension-kit';
 
 /** What a vendored copy of the kit holds, relative to `src/`: everything an extension page or worker may load. */
-export const RUNTIME_ENTRIES = Object.freeze(['index.js', 'index.d.ts', 'about', 'commands', 'dom', 'scripting', 'settings', 'sites', 'styles', 'time', 'toolbar', 'ui']);
+export const RUNTIME_ENTRIES = Object.freeze(['index.js', 'index.d.ts', 'about', 'ai', 'commands', 'content', 'dom', 'frame', 'scripting', 'settings', 'sites', 'styles', 'time', 'toolbar', 'ui']);
 
 /** The kit's stylesheet, an absolute path in the installed package. */
 export const STYLESHEET = path.join(SOURCE, 'styles', 'chrome-ui.css');