@unifedev/thread-pages 0.3.2 → 1.0.3

package/src/runtime/kernel/install.ts

@@ -0,0 +1,156 @@
+import { HANDSHAKE_VERSION, isRecord, type KernelConfig, type KernelMessage, type ShellMessage } from "../shared/protocol.ts";
+import { installAnchorInterception } from "./anchors.ts";
+import { installApi } from "./api.ts";
+import { createBridgeClient } from "./bridge-client.ts";
+import { createDirtyTracker } from "./dirty.ts";
+import { buildIntent, capturedForms, isManualForm, lockForm, prepareForm, statusLine, unlockForm, type PendingForm } from "./forms.ts";
+import { createReadOnlyController } from "./readonly.ts";
+
+/**
+ * Wires the kernel into a document. Exported separately from `main.ts` so
+ * tests can install it into a jsdom window with a fake port.
+ */
+export interface KernelHandle {
+  /** For tests: deliver a shell message as if it arrived on the port. */
+  deliver(message: ShellMessage): void;
+  /** For tests: connect a port-like object the way the handshake would. */
+  connect(port: Pick<MessagePort, "postMessage"> & Partial<Pick<MessagePort, "start" | "onmessage">>): void;
+}
+
+export function installKernel(win: Window & typeof globalThis, config: KernelConfig): KernelHandle {
+  const doc = win.document;
+  let port: MessagePort | null = null;
+  const pendingForms = new Map<string, PendingForm>();
+  const pendingByForm = new WeakSet<HTMLFormElement>();
+
+  function post(message: KernelMessage): boolean {
+    if (!port) return false;
+    try {
+      port.postMessage(message);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  const dirty = createDirtyTracker((isDirty) => {
+    post({ kind: isDirty ? "thread-page:dirty" : "thread-page:clean" });
+  });
+  const bridge = createBridgeClient(config.pageRevision, doc);
+  const readOnly = createReadOnlyController(doc, config.stale);
+
+  installApi(win, {
+    version: 1,
+    invoke: (method, params) => bridge.invoke(method, params),
+    watch: (method, params, listener, options) => bridge.watch(method, params, listener, options),
+    setDirty: (value) => dirty.setCustom(value !== false),
+  });
+
+  function prepare(root: ParentNode): void {
+    for (const form of capturedForms(root)) prepareForm(form);
+    readOnly.prepare(root);
+  }
+
+  prepare(doc);
+  if (doc.readyState === "loading") doc.addEventListener("DOMContentLoaded", () => prepare(doc), { once: true });
+  if (typeof win.MutationObserver === "function" && doc.documentElement) {
+    const observer = new win.MutationObserver((records) => {
+      for (const record of records) {
+        for (const node of Array.from(record.addedNodes)) {
+          if (node.nodeType === 1) prepare(node as Element);
+        }
+      }
+    });
+    observer.observe(doc.documentElement, { childList: true, subtree: true });
+  }
+
+  function markDirty(event: Event): void {
+    const target = event.target as Element | null;
+    const form = target?.closest?.("form");
+    if (!form || isManualForm(form)) return;
+    dirty.markForm(form);
+  }
+  doc.addEventListener("input", markDirty, true);
+  doc.addEventListener("change", markDirty, true);
+
+  doc.addEventListener(
+    "submit",
+    (event) => {
+      const form = event.target as Element | null;
+      if (!form || form.tagName?.toLowerCase() !== "form" || isManualForm(form)) return;
+      event.preventDefault();
+      if (readOnly.isReadOnly() || pendingByForm.has(form as HTMLFormElement)) return;
+      const submissionId = `sub-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
+      const target = form as HTMLFormElement;
+      const intent = buildIntent(target, (event as SubmitEvent).submitter ?? null, submissionId);
+      const pending: PendingForm = { form: target, disabled: [], dirtyVersion: dirty.versionOf(target) };
+      pendingForms.set(submissionId, pending);
+      pendingByForm.add(target);
+      statusLine(target).textContent = intent.files.length > 0 ? "Uploading…" : "Sending…";
+      pending.disabled = lockForm(target);
+      const sent = post({ kind: "thread-page:submit", submissionId, title: intent.title, answers: intent.answers, files: intent.files });
+      if (!sent) {
+        pendingForms.delete(submissionId);
+        pendingByForm.delete(target);
+        unlockForm(pending.disabled);
+        statusLine(target).textContent = "Page connection is not ready; try again in a moment.";
+      }
+    },
+    true,
+  );
+
+  installAnchorInterception(doc, (url, label) => {
+    void bridge.invoke("navigation.openExternal", label ? { url, label } : { url }).catch(() => undefined);
+  });
+
+  function onShellMessage(data: unknown): void {
+    if (!isRecord(data)) return;
+    if (data.kind === "thread-page:source-state") {
+      readOnly.apply(data.stale === true);
+      return;
+    }
+    if (data.kind === "thread-page:submit-progress") {
+      const pending = typeof data.submissionId === "string" ? pendingForms.get(data.submissionId) : undefined;
+      if (pending) statusLine(pending.form).textContent = String(data.message ?? "Working…").slice(0, 160);
+      return;
+    }
+    if (data.kind === "thread-page:submit-result") {
+      const pending = typeof data.submissionId === "string" ? pendingForms.get(data.submissionId) : undefined;
+      if (!pending) return;
+      pendingForms.delete(data.submissionId as string);
+      pendingByForm.delete(pending.form);
+      const ok = data.ok === true;
+      statusLine(pending.form).textContent = ok ? String(data.message ?? "Sent").slice(0, 160) : String(data.error ?? "Could not send").slice(0, 160);
+      unlockForm(pending.disabled);
+      if (readOnly.isReadOnly()) readOnly.apply(true);
+      if (ok) dirty.clearForm(pending.form, pending.dirtyVersion);
+      return;
+    }
+    bridge.receive(data);
+  }
+
+  function connect(next: MessagePort): void {
+    port = next;
+    next.onmessage = (message) => onShellMessage(message.data);
+    next.start?.();
+    bridge.attach((request) => {
+      next.postMessage(request);
+    });
+    if (dirty.isDirty()) post({ kind: "thread-page:dirty" });
+  }
+
+  function acceptPort(event: MessageEvent): void {
+    if (port || event.source !== win.parent) return;
+    const data = event.data as unknown;
+    if (!isRecord(data) || data.kind !== "thread-page:connect" || data.version !== HANDSHAKE_VERSION || !event.ports || event.ports.length !== 1) return;
+    event.stopImmediatePropagation();
+    const next = event.ports[0];
+    if (next) connect(next);
+  }
+  win.addEventListener("message", acceptPort, true);
+
+  if (config.stale) readOnly.apply(true);
+  win.parent.postMessage({ kind: "thread-page:ready", version: HANDSHAKE_VERSION }, "*");
+
+  return { deliver: (message) => onShellMessage(message), connect: (fake) => connect(fake as MessagePort) };
+}

package/src/runtime/kernel/labels.ts

@@ -0,0 +1,98 @@
+import type { SubmitAnswer } from "../shared/protocol.ts";
+
+/**
+ * Answer naming and group collapsing. spec R4.10–R4.12
+ *
+ * The reader sees labels, not field names, so a delivered answer carries the
+ * label. Order: explicit `data-label`; the nearest fieldset's legend; the
+ * control's `aria-label`; the text of a wrapping `<label>`; the text of a
+ * `<label for>`; the raw name. Derived text excludes nested controls, option
+ * text, hints and host-injected nodes.
+ */
+const EXCLUDED_FROM_TEXT = "input,textarea,select,button,option,small,output,[data-thread-page-range],[data-thread-page-status]";
+
+export type FormControl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement;
+
+export function labelText(node: Element | null): string {
+  if (!node) return "";
+  const clone = node.cloneNode(true) as Element;
+  for (const child of Array.from(clone.querySelectorAll(EXCLUDED_FROM_TEXT))) child.remove();
+  return (clone.textContent || "").replace(/\s+/g, " ").trim();
+}
+
+export function labelFor(form: HTMLFormElement, control: FormControl): string {
+  const explicit = control.getAttribute("data-label");
+  if (explicit && explicit.trim()) return explicit.trim();
+  const fieldset = control.closest("fieldset");
+  if (fieldset) {
+    const legend = labelText(fieldset.querySelector("legend"));
+    if (legend) return legend;
+  }
+  const aria = control.getAttribute("aria-label");
+  if (aria && aria.trim()) return aria.trim();
+  const wrapping = control.closest("label");
+  if (wrapping) {
+    const text = labelText(wrapping);
+    if (text) return text;
+  }
+  if (control.id) {
+    const doc = form.ownerDocument;
+    const referenced = Array.from(doc.querySelectorAll("label[for]")).find((label) => (label as HTMLLabelElement).htmlFor === control.id);
+    const text = labelText(referenced ?? null);
+    if (text) return text;
+  }
+  return control.name;
+}
+
+const SKIPPED_TYPES = new Set(["button", "submit", "reset", "image", "file"]);
+
+export function namedControls(form: HTMLFormElement): FormControl[] {
+  return Array.from(form.elements).filter((element): element is FormControl => {
+    const control = element as FormControl;
+    return typeof control.name === "string" && control.name.length > 0 && !control.disabled && "type" in control;
+  });
+}
+
+/** Collects answers in document order; the submitter leads as the chosen action. spec R2.36 */
+export function collectAnswers(form: HTMLFormElement, submitter: HTMLElement | null): SubmitAnswer[] {
+  const controls = namedControls(form);
+  const answers: SubmitAnswer[] = [];
+  const seen = new Set<string>();
+  if (submitter && (tagOf(submitter) === "button" || tagOf(submitter) === "input")) {
+    const control = submitter as HTMLButtonElement | HTMLInputElement;
+    const value = control.value || (control.textContent || "").trim();
+    answers.push({ name: control.name || "action", label: "Action", value });
+    if (control.name) seen.add(control.name);
+  }
+  for (const control of controls) {
+    const name = control.name;
+    const type = String(control.type || "").toLowerCase();
+    if (seen.has(name) || SKIPPED_TYPES.has(type)) continue;
+    seen.add(name);
+    const group = controls.filter((item) => item.name === name);
+    answers.push({ name, label: labelFor(form, control), value: collapse(control, group, type) });
+  }
+  return answers;
+}
+
+/** Tag checks rather than `instanceof`, so the kernel works across realms and with custom elements. */
+export function tagOf(element: Element): string {
+  return element.tagName.toLowerCase();
+}
+
+function collapse(control: FormControl, group: FormControl[], type: string): string | string[] | boolean {
+  if (type === "checkbox") {
+    const boxes = group.filter((item): item is HTMLInputElement => tagOf(item) === "input");
+    if (boxes.length === 1) return boxes[0]?.checked === true;
+    return boxes.filter((item) => item.checked).map((item) => item.value);
+  }
+  if (type === "radio") {
+    const checked = group.find((item) => tagOf(item) === "input" && (item as HTMLInputElement).checked) as HTMLInputElement | undefined;
+    return checked ? checked.value : "";
+  }
+  if (tagOf(control) === "select" && (control as HTMLSelectElement).multiple) {
+    return Array.from((control as HTMLSelectElement).selectedOptions).map((option) => option.value);
+  }
+  if (group.length > 1) return group.map((item) => String((item as HTMLInputElement).value ?? ""));
+  return String((control as HTMLInputElement).value ?? "");
+}

package/src/runtime/kernel/main.ts

@@ -0,0 +1,6 @@
+import { readConfig, type KernelConfig } from "../shared/protocol.ts";
+import { installKernel } from "./install.ts";
+
+// Entry for the bundled kernel: runs before any authored script (spec R4.1)
+// and reads its configuration from its own script element.
+installKernel(window, readConfig<KernelConfig>(document.currentScript));

package/src/runtime/kernel/readonly.ts

@@ -0,0 +1,75 @@
+import { capturedForms, controlsOf, statusLine, type FormControl } from "./forms.ts";
+
+/**
+ * Read-only mode for an offline copy: disable the captured-form controls the
+ * host finds enabled, show a status line per form and a banner the page
+ * cannot suppress; on reconnection restore only what was disabled here.
+ * spec R2.28, R4.34, R4.35
+ */
+export const OFFLINE_ATTRIBUTE = "data-thread-page-offline";
+export const OFFLINE_STATUS = "Offline copy — responses are disabled until the source host reconnects.";
+
+export interface ReadOnlyController {
+  isReadOnly(): boolean;
+  apply(readOnly: boolean): void;
+  /** Applies the current state to newly added content. */
+  prepare(root: ParentNode): void;
+}
+
+export function createReadOnlyController(doc: Document, initial: boolean): ReadOnlyController {
+  const disabledByHost = new Set<FormControl>();
+  let readOnly = initial;
+
+  function banner(): void {
+    if (!doc.body) return;
+    let node = doc.querySelector<HTMLElement>(`[${OFFLINE_ATTRIBUTE}="host"]`);
+    if (readOnly && !node) {
+      node = doc.createElement("aside");
+      node.setAttribute(OFFLINE_ATTRIBUTE, "host");
+      node.setAttribute("role", "status");
+      node.setAttribute(
+        "style",
+        "position:relative;z-index:2147483647;margin:0;padding:.75rem 1rem;border-bottom:1px solid currentColor;font:600 14px/1.4 system-ui,sans-serif;background:Canvas;color:CanvasText",
+      );
+      node.textContent = OFFLINE_STATUS;
+      doc.body.insertBefore(node, doc.body.firstChild);
+    } else if (!readOnly && node) {
+      node.remove();
+    }
+  }
+
+  function lock(root: ParentNode): void {
+    for (const form of capturedForms(root)) {
+      for (const control of controlsOf(form)) {
+        if (!control.disabled) {
+          control.disabled = true;
+          disabledByHost.add(control);
+        }
+      }
+      statusLine(form).textContent = OFFLINE_STATUS;
+    }
+  }
+
+  function unlock(): void {
+    for (const control of disabledByHost) control.disabled = false;
+    disabledByHost.clear();
+    for (const form of capturedForms(doc)) {
+      const status = statusLine(form);
+      if (status.textContent === OFFLINE_STATUS) status.textContent = "";
+    }
+  }
+
+  return {
+    isReadOnly: () => readOnly,
+    apply(next) {
+      readOnly = next;
+      if (next) lock(doc);
+      else unlock();
+      banner();
+    },
+    prepare(root) {
+      if (readOnly) lock(root);
+      banner();
+    },
+  };
+}

package/src/runtime/shared/protocol.ts

@@ -0,0 +1,125 @@
+/**
+ * What crosses the one MessagePort between the kernel (inside the sandboxed
+ * document) and the shell (trusted chrome), and the configuration each side
+ * receives from the server. Shared so neither side can drift. spec R2.3, R3.8
+ */
+import { BRIDGE_ERROR_CODES, type BridgeErrorCode } from "../../domain/errors.ts";
+
+export const HANDSHAKE_VERSION = 1 as const;
+export const BRIDGE_VERSION = 1 as const;
+
+export interface BridgeRequestMessage {
+  v: 1;
+  id: string;
+  method: string;
+  params: unknown;
+  pageRevision: string;
+}
+
+export type BridgeResponseMessage =
+  | { v: 1; id: string; ok: true; result: unknown }
+  | { v: 1; id: string; ok: false; error: { code: BridgeErrorCode; message: string } };
+
+export interface SubmitFile {
+  field: string;
+  file: File;
+}
+
+export interface SubmitAnswer {
+  name: string;
+  label: string;
+  value: string | string[] | boolean;
+}
+
+export type KernelMessage =
+  | { kind: "thread-page:dirty" }
+  | { kind: "thread-page:clean" }
+  | { kind: "thread-page:submit"; submissionId: string; title: string; answers: SubmitAnswer[]; files: SubmitFile[] }
+  | BridgeRequestMessage;
+
+export type ShellMessage =
+  | { kind: "thread-page:source-state"; stale: boolean }
+  | { kind: "thread-page:submit-progress"; submissionId: string; message: string }
+  | { kind: "thread-page:submit-result"; submissionId: string; ok: boolean; message?: string; error?: string }
+  | BridgeResponseMessage;
+
+/** Carried in the kernel script's `data-config` attribute. */
+export interface KernelConfig {
+  pageRevision: string;
+  stale: boolean;
+}
+
+/** Carried in the shell script's `data-config` attribute. */
+export interface ShellConfig {
+  actionToken: string;
+  pageRevision: string;
+  expiresAt: number;
+  documentUrl: string;
+  submitUrl: string;
+  uploadUrl: string;
+  bridgeUrl: string;
+  workingLabel: string;
+  stale: boolean;
+  pollMs: number;
+  maxUploadBytes: number;
+  maxUploads: number;
+}
+
+const ERROR_CODES: ReadonlySet<string> = new Set(BRIDGE_ERROR_CODES);
+const ID_PATTERN = /^[A-Za-z0-9][A-Za-z0-9._:-]{0,95}$/;
+const METHOD_PATTERN = /^[a-z][a-zA-Z0-9]*(?:\.[a-z][a-zA-Z0-9]*)+$/;
+
+export function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function hasExactKeys(value: Record<string, unknown>, keys: readonly string[]): boolean {
+  const own = Object.keys(value);
+  return own.length === keys.length && keys.every((key) => Object.prototype.hasOwnProperty.call(value, key));
+}
+
+export function isValidRequestId(value: unknown): value is string {
+  return typeof value === "string" && ID_PATTERN.test(value);
+}
+
+/** The shell checks every request before it leaves the reader's browser. */
+export function isBridgeRequest(value: unknown, pageRevision: string): value is BridgeRequestMessage {
+  return (
+    isRecord(value) &&
+    hasExactKeys(value, ["v", "id", "method", "params", "pageRevision"]) &&
+    value.v === BRIDGE_VERSION &&
+    isValidRequestId(value.id) &&
+    typeof value.method === "string" &&
+    value.method.length >= 3 &&
+    value.method.length <= 96 &&
+    METHOD_PATTERN.test(value.method) &&
+    value.pageRevision === pageRevision
+  );
+}
+
+/** Both sides check every response; an unexpected shape is `invalid_response`. spec R4.32 */
+export function isBridgeResponse(value: unknown, expectedId?: string): value is BridgeResponseMessage {
+  if (!isRecord(value) || value.v !== BRIDGE_VERSION || typeof value.id !== "string" || typeof value.ok !== "boolean") return false;
+  if (expectedId !== undefined && value.id !== expectedId) return false;
+  if (value.ok === true) return hasExactKeys(value, ["v", "id", "ok", "result"]);
+  if (!hasExactKeys(value, ["v", "id", "ok", "error"]) || !isRecord(value.error)) return false;
+  const error = value.error;
+  return (
+    hasExactKeys(error, ["code", "message"]) &&
+    typeof error.code === "string" &&
+    ERROR_CODES.has(error.code) &&
+    typeof error.message === "string" &&
+    error.message.length > 0 &&
+    error.message.length <= 512
+  );
+}
+
+export function makeFailure(id: unknown, code: BridgeErrorCode, message: string): BridgeResponseMessage {
+  return { v: 1, id: isValidRequestId(id) ? id : "invalid", ok: false, error: { code, message: message.slice(0, 512) || "Request failed" } };
+}
+
+export function readConfig<T>(script: Element | null): T {
+  const raw = script?.getAttribute("data-config");
+  if (!raw) throw new Error("Thread Page runtime: configuration is missing");
+  return JSON.parse(raw) as T;
+}

package/src/runtime/shell/confirm.ts

@@ -0,0 +1,70 @@
+/**
+ * The confirmation dialog: rendered in trusted chrome the sandboxed page
+ * cannot draw over, click or reword. The summary comes from the host, never
+ * from the page. spec R2.19, R3.22
+ *
+ * Resolution is driven by button clicks rather than the dialog's `close`
+ * event, which never fires in headless browsers (spec 09 §Testing note).
+ */
+export interface Confirmer {
+  confirm(summary: string, onConfirmGesture?: () => void): Promise<boolean>;
+}
+
+export function createConfirmer(dialog: HTMLDialogElement): Confirmer {
+  const text = dialog.querySelector("p");
+  const cancel = dialog.querySelector<HTMLButtonElement>('button[value="cancel"]');
+  const confirm = dialog.querySelector<HTMLButtonElement>('button[value="confirm"]');
+  let active: ((approved: boolean) => void) | null = null;
+  let gesture: (() => void) | undefined;
+
+  function settle(approved: boolean): void {
+    const current = active;
+    active = null;
+    if (approved && gesture) {
+      try {
+        gesture();
+      } catch {
+        // A refused popup is handled by the caller's fallback.
+      }
+    }
+    gesture = undefined;
+    if (dialog.open) dialog.close();
+    current?.(approved);
+  }
+
+  cancel?.addEventListener("click", (event) => {
+    event.preventDefault();
+    settle(false);
+  });
+  confirm?.addEventListener("click", (event) => {
+    event.preventDefault();
+    settle(true);
+  });
+  dialog.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    settle(false);
+  });
+  dialog.addEventListener("close", () => {
+    if (active) settle(false);
+  });
+
+  return {
+    confirm(summary, onConfirmGesture) {
+      return new Promise((resolve) => {
+        if (active) settle(false);
+        if (text) text.textContent = summary;
+        active = resolve;
+        gesture = onConfirmGesture;
+        if (typeof dialog.showModal === "function") {
+          try {
+            dialog.showModal();
+          } catch {
+            settle(false);
+          }
+        } else {
+          settle(false);
+        }
+      });
+    },
+  };
+}

package/src/runtime/shell/install.ts

@@ -0,0 +1,79 @@
+import { HANDSHAKE_VERSION, isRecord, type ShellConfig } from "../shared/protocol.ts";
+import { createConfirmer } from "./confirm.ts";
+import { createNavigator } from "./navigate.ts";
+import { createPoller, type Poller } from "./poll.ts";
+import { createRelay } from "./relay.ts";
+
+/**
+ * Wires the shell: loads the document into the sandboxed frame, hands it one
+ * MessagePort once it reports ready, relays its messages, polls for a new
+ * revision, and owns the chrome. spec 02 §The shell
+ */
+export interface ShellElements {
+  frame: HTMLIFrameElement;
+  status: HTMLElement;
+  work: HTMLElement;
+  reload: HTMLButtonElement;
+  dialog: HTMLDialogElement;
+}
+
+export interface ShellHandle {
+  poller: Poller;
+}
+
+export function installShell(win: Window & typeof globalThis, config: ShellConfig, elements: ShellElements, fetchImpl?: typeof fetch): ShellHandle {
+  const { frame, status, work, reload, dialog } = elements;
+  let framePort: MessagePort | null = null;
+  let awaitingReady = true;
+  let lastStale = config.stale;
+
+  const view = {
+    setStatus(text: string, warn: boolean) {
+      status.textContent = text;
+      status.dataset.tone = warn ? "warn" : "";
+    },
+    setWorking(working: boolean) {
+      work.dataset.visible = working && config.workingLabel ? "true" : "false";
+    },
+    showReload(visible: boolean) {
+      reload.dataset.visible = visible ? "true" : "false";
+    },
+    onStaleChanged(stale: boolean) {
+      lastStale = stale;
+      framePort?.postMessage({ kind: "thread-page:source-state", stale });
+    },
+    reloadView() {
+      win.location.reload();
+    },
+  };
+
+  const poller = createPoller(win, config, view, fetchImpl);
+  const navigator = createNavigator(win);
+  const confirmer = createConfirmer(dialog);
+  const relay = createRelay({ config, confirmer, navigator, onDirty: (dirty) => poller.setDirty(dirty), ...(fetchImpl ? { fetchImpl } : {}) });
+
+  function connectFrame(): void {
+    const channel = new win.MessageChannel();
+    const port = channel.port1;
+    framePort = port;
+    port.onmessage = (event) => relay.handle(port, event.data);
+    port.start?.();
+    frame.contentWindow?.postMessage({ kind: "thread-page:connect", version: HANDSHAKE_VERSION }, "*", [channel.port2]);
+    port.postMessage({ kind: "thread-page:source-state", stale: lastStale });
+  }
+
+  win.addEventListener("message", (event) => {
+    // Only the frame's opaque origin, only once, only the handshake.
+    if (!awaitingReady || event.origin !== "null" || event.source !== frame.contentWindow) return;
+    const data = event.data as unknown;
+    if (!isRecord(data) || data.kind !== "thread-page:ready" || data.version !== HANDSHAKE_VERSION) return;
+    awaitingReady = false;
+    connectFrame();
+  });
+
+  reload.addEventListener("click", () => win.location.reload());
+
+  frame.src = config.documentUrl;
+  poller.start();
+  return { poller };
+}

package/src/runtime/shell/main.ts

@@ -0,0 +1,12 @@
+import { readConfig, type ShellConfig } from "../shared/protocol.ts";
+import { installShell } from "./install.ts";
+
+// Entry for the bundled shell runtime.
+const config = readConfig<ShellConfig>(document.currentScript);
+const frame = document.querySelector("iframe");
+const status = document.querySelector<HTMLElement>("[data-shell-status]");
+const work = document.querySelector<HTMLElement>("[data-shell-working]");
+const reload = document.querySelector<HTMLButtonElement>("[data-shell-reload]");
+const dialog = document.querySelector("dialog");
+if (!frame || !status || !work || !reload || !dialog) throw new Error("Thread Page shell: chrome is incomplete");
+installShell(window, config, { frame, status, work, reload, dialog });