webhelm 0.0.0-stage → 1.0.1

package/runtime/chatgpt/chatgpt-queue.mjs

@@ -0,0 +1,441 @@
+import { DatabaseSync } from "node:sqlite";
+import { mkdirSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { createHash, randomUUID } from "node:crypto";
+import { classifyProbe, PROBE_JS, targetUrl } from "./chatgpt-probe.mjs";
+import { CLICK_SEND_JS, SEND_ENABLED_JS } from "./lifecycle-common.mjs";
+
+const transitions = new Set([
+  "CHECKING>WAITING",
+  "CHECKING>SENDING",
+  "CHECKING>BLOCKED",
+  "SENDING>SENT",
+  "SENDING>UNCERTAIN",
+  "UNCERTAIN>SENT",
+  "UNCERTAIN>WAITING",
+  "BLOCKED>WAITING",
+]);
+const ACTIVE = [
+  "QUEUED",
+  "CHECKING",
+  "WAITING",
+  "SENDING",
+  "UNCERTAIN",
+  "BLOCKED",
+];
+export class ChatGPTQueue {
+  constructor(
+    {
+      persistenceRoot,
+      startSession,
+      execSession,
+      stopSession,
+      intervalMs = 60000,
+      concurrency = 4,
+      leaseSeconds = 120,
+      now = () => Date.now() / 1000,
+      logger = () => {},
+    } = {},
+  ) {
+    if (!persistenceRoot) throw new TypeError("persistenceRoot is required");
+    for (
+      const [name, fn] of Object.entries({
+        startSession,
+        execSession,
+        stopSession,
+      })
+    ) {
+      if (typeof fn !== "function") {
+        throw new TypeError(`${name} callback is required`);
+      }
+    }
+    this.root = resolve(persistenceRoot);
+    mkdirSync(this.root, { recursive: true });
+    this.dbPath = join(this.root, "chatgpt-new-turn.sqlite3");
+    this.db = new DatabaseSync(this.dbPath);
+    this.db.exec(
+      "PRAGMA journal_mode=WAL; PRAGMA synchronous=FULL; PRAGMA busy_timeout=5000",
+    );
+    this.db.exec(
+      `CREATE TABLE IF NOT EXISTS turns(seq INTEGER PRIMARY KEY AUTOINCREMENT,id TEXT NOT NULL UNIQUE,idem_key TEXT NOT NULL UNIQUE,project_id TEXT,thread_id TEXT NOT NULL,message TEXT NOT NULL,state TEXT NOT NULL,lease_owner TEXT,lease_until REAL,next_check_at REAL NOT NULL,created_at REAL NOT NULL,attempts INTEGER NOT NULL DEFAULT 0,receipt TEXT,mergeable INTEGER NOT NULL DEFAULT 0); CREATE INDEX IF NOT EXISTS turns_thread_order ON turns(thread_id,seq); CREATE TABLE IF NOT EXISTS merged_requests(idem_key TEXT PRIMARY KEY,project_id TEXT,thread_id TEXT NOT NULL,message TEXT NOT NULL,queue_id TEXT NOT NULL);`,
+    );
+    this.startSession = startSession;
+    this.execSession = execSession;
+    this.stopSession = stopSession;
+    this.intervalMs = intervalMs;
+    this.concurrency = concurrency;
+    this.leaseSeconds = leaseSeconds;
+    this.now = now;
+    this.logger = logger;
+    this.active = new Map();
+    this.sessions = new Map();
+    this.started = false;
+    this.closed = false;
+    this.wakeTimer = null;
+  }
+  _transaction(fn) {
+    this.db.exec("BEGIN IMMEDIATE");
+    try {
+      const v = fn();
+      this.db.exec("COMMIT");
+      return v;
+    } catch (e) {
+      this.db.exec("ROLLBACK");
+      throw e;
+    }
+  }
+  _one(sql, ...args) {
+    return this.db.prepare(sql).get(...args) || null;
+  }
+  _rows() {
+    return this.db.prepare("SELECT * FROM turns ORDER BY seq").all();
+  }
+  enqueue(
+    {
+      thread_id,
+      message,
+      idempotency_key,
+      idempotencyKey,
+      project_id = null,
+      mergeable = false,
+    } = {},
+  ) {
+    const key = idempotency_key ?? idempotencyKey;
+    if (!thread_id || !message || !key) {
+      throw new TypeError("thread_id, message, idempotency_key required");
+    }
+    if (typeof mergeable !== "boolean") {
+      throw new TypeError("mergeable must be a boolean");
+    }
+    const now = this.now();
+    const row = this._transaction(() => {
+      const merged = this._one(
+        "SELECT * FROM merged_requests WHERE idem_key=?",
+        key,
+      );
+      if (merged) {
+        if (
+          merged.thread_id !== thread_id || merged.message !== message ||
+          merged.project_id !== project_id
+        ) throw new Error("idempotency key reused with different payload");
+        return this._one("SELECT * FROM turns WHERE id=?", merged.queue_id);
+      }
+      const same = this._one("SELECT * FROM turns WHERE idem_key=?", key);
+      if (same) {
+        if (
+          same.thread_id !== thread_id || same.message !== message ||
+          same.project_id !== project_id
+        ) throw new Error("idempotency key reused with different payload");
+        return same;
+      }
+      const tail = mergeable
+        ? this._one(
+          "SELECT * FROM turns WHERE thread_id=? ORDER BY seq DESC LIMIT 1",
+          thread_id,
+        )
+        : null;
+      if (
+        tail && tail.mergeable && tail.project_id === project_id &&
+        ["QUEUED", "WAITING"].includes(tail.state)
+      ) {
+        this.db.prepare(
+          "INSERT OR IGNORE INTO merged_requests VALUES(?,?,?,?,?)",
+        ).run(tail.idem_key, tail.project_id, thread_id, tail.message, tail.id);
+        this.db.prepare("INSERT INTO merged_requests VALUES(?,?,?,?,?)").run(
+          key,
+          project_id,
+          thread_id,
+          message,
+          tail.id,
+        );
+        this.db.prepare("UPDATE turns SET message=message || ? WHERE id=?").run(
+          "\n" + message,
+          tail.id,
+        );
+        return this._one("SELECT * FROM turns WHERE id=?", tail.id);
+      }
+      const id = randomUUID();
+      this.db.prepare(
+        "INSERT INTO turns(id,idem_key,project_id,thread_id,message,state,next_check_at,created_at,mergeable) VALUES(?,?,?,?,? ,'QUEUED',?,?,?)",
+      ).run(
+        id,
+        key,
+        project_id,
+        thread_id,
+        message,
+        now,
+        now,
+        mergeable ? 1 : 0,
+      );
+      return this._one("SELECT * FROM turns WHERE id=?", id);
+    });
+    if (this.started) this._wake(0);
+    return {
+      ok: true,
+      status: "queued",
+      queue_id: row.id,
+      thread_id: row.thread_id,
+      state: row.state,
+    };
+  }
+  claim(owner, now = this.now()) {
+    return this._transaction(() => {
+      this.db.prepare(
+        "UPDATE turns SET state='UNCERTAIN',lease_owner=NULL,lease_until=NULL WHERE state='SENDING' AND lease_until<=?",
+      ).run(now);
+      this.db.prepare(
+        "UPDATE turns SET state='WAITING',lease_owner=NULL,lease_until=NULL,next_check_at=? WHERE state='CHECKING' AND lease_until<=?",
+      ).run(now, now);
+      const row = this._one(
+        `SELECT t.* FROM turns t WHERE t.state IN ('QUEUED','WAITING') AND t.next_check_at<=? AND NOT EXISTS(SELECT 1 FROM turns older WHERE older.thread_id=t.thread_id AND older.seq<t.seq AND (older.state NOT IN ('SENT','CANCELLED') OR (older.state='SENT' AND older.next_check_at>?))) ORDER BY t.seq LIMIT 1`,
+        now,
+        now,
+      );
+      if (!row) return null;
+      this.db.prepare(
+        "UPDATE turns SET state='CHECKING',lease_owner=?,lease_until=?,attempts=attempts+1 WHERE id=?",
+      ).run(owner, now + this.leaseSeconds, row.id);
+      return this._one("SELECT * FROM turns WHERE id=?", row.id);
+    });
+  }
+  transition(
+    id,
+    owner,
+    source,
+    target,
+    { now = this.now(), delay = 60, receipt = null } = {},
+  ) {
+    if (!transitions.has(`${source}>${target}`)) {
+      throw new Error("invalid transition");
+    }
+    if (source === "UNCERTAIN" && !receipt) {
+      throw new Error("UNCERTAIN requires reconciliation evidence");
+    }
+    if (source === "BLOCKED" && !receipt) {
+      throw new Error("BLOCKED requires unblock evidence");
+    }
+    return this._transaction(() => {
+      const row = this._one("SELECT * FROM turns WHERE id=?", id);
+      if (!row || row.state !== source) throw new Error("stale state");
+      if (
+        ["CHECKING", "SENDING"].includes(source) && row.lease_owner !== owner
+      ) throw new Error("stale owner");
+      if (["CHECKING", "SENDING"].includes(source) && row.lease_until <= now) {
+        throw new Error("expired lease");
+      }
+      const release = ["WAITING", "SENT", "UNCERTAIN", "BLOCKED"].includes(
+        target,
+      );
+      this.db.prepare(
+        "UPDATE turns SET state=?,lease_owner=?,lease_until=?,next_check_at=?,receipt=? WHERE id=?",
+      ).run(
+        target,
+        release ? null : owner,
+        release ? null : now + 120,
+        ["WAITING", "SENT"].includes(target) ? now + delay : now,
+        receipt,
+        id,
+      );
+    });
+  }
+  rows() {
+    return this._rows();
+  }
+  inspect() {
+    return {
+      ok: true,
+      items: this.rows().filter((r) => !["SENT", "CANCELLED"].includes(r.state))
+        .map(({ id, thread_id, state, attempts, created_at, receipt }) => ({
+          id,
+          queue_id: id,
+          thread_id,
+          state,
+          attempts,
+          created_at,
+          receipt,
+        })),
+    };
+  }
+  reconcile({ queue_id, evidence, accepted } = {}) {
+    if (!queue_id || !evidence || typeof accepted !== "boolean") {
+      throw new TypeError("queue_id, evidence and boolean accepted required");
+    }
+    this.transition(
+      queue_id,
+      "reconciler",
+      "UNCERTAIN",
+      accepted ? "SENT" : "WAITING",
+      { receipt: evidence, delay: 0 },
+    );
+    if (this.started) this._wake(0);
+    return { ok: true, queue_id, state: accepted ? "SENT" : "WAITING" };
+  }
+  start() {
+    if (this.started) return this;
+    this.started = true;
+    this.closed = false;
+    this._wake(0);
+    return this;
+  }
+  _wake(ms = this.intervalMs) {
+    if (this.closed) return;
+    clearTimeout(this.wakeTimer);
+    this.wakeTimer = setTimeout(() => this._tick(), ms);
+    this.wakeTimer.unref?.();
+  }
+  async _tick() {
+    if (this.closed) return;
+    while (this.active.size < this.concurrency) {
+      const owner = `dispatcher-${process.pid}-${randomUUID()}`;
+      const item = this.claim(owner);
+      if (!item) break;
+      const promise = this._process(item).catch((e) =>
+        this.logger({ event: "dispatcher_error", error: String(e) })
+      ).finally(() => {
+        this.active.delete(item.id);
+        this._wake(0);
+      });
+      this.active.set(item.id, promise);
+    }
+    if (!this.closed) this._wake(this.intervalMs);
+  }
+  async _exec(sid, code) {
+    const response = await this.execSession(sid, code);
+    if (response?.ok === false) {
+      throw new Error(
+        response.error || response.stderr || "browser action failed",
+      );
+    }
+    return response?.value ?? response;
+  }
+  async _probe(item) {
+    const url = targetUrl(item.project_id, item.thread_id, item.message);
+    const session = await this.startSession({ url });
+    const sid = session.session_id ?? session.sessionId;
+    if (!sid) throw new Error("session start returned no session_id");
+    this.sessions.set(item.id, sid);
+    const deadline = Date.now() + 45000;
+    let state = "NOT_READY";
+    while (Date.now() < deadline) {
+      const source =
+        `await (async()=>{ const page=await page_info(); const state=await js(${
+          JSON.stringify(PROBE_JS)
+        }); if(state?.state==='READY' && !(await js(${
+          JSON.stringify(SEND_ENABLED_JS)
+        }))) state.state='NOT_READY'; return {url:page.url||'',state}; })()`;
+      const result = await this._exec(sid, source);
+      state = classifyProbe(result.url, url, result.state);
+      if (["READY", "RUNNING", "BLOCKED"].includes(state)) return state;
+      await new Promise((resolve) => setTimeout(resolve, 400));
+    }
+    return state;
+  }
+  async _send(item) {
+    const sid = this.sessions.get(item.id);
+    if (!sid) throw new Error("missing prepared browser session");
+    const expected =
+      targetUrl(item.project_id, item.thread_id, item.message).split("?")[0];
+    const source = `await (async()=>{ const gate=await js(${
+      JSON.stringify(PROBE_JS)
+    }); const gateUrl=(await page_info()).url||''; let receipt={diagnostic:'pre_send_gate_not_ready'}; if(gate?.state==='READY' && await js(${
+      JSON.stringify(SEND_ENABLED_JS)
+    }) && Boolean((gate.composer_text||'').trim()) && gateUrl===${
+      JSON.stringify(expected)
+    } && await js(${
+      JSON.stringify(CLICK_SEND_JS)
+    })){ const until=Date.now()+30000; let disabled=false; while(Date.now()<until){ disabled=!(await js(${
+      JSON.stringify(SEND_ENABLED_JS)
+    })); if(disabled) break; await new Promise(resolve=>setTimeout(resolve,200)); } receipt=disabled?{verified_by:'send-button-disabled'}:{diagnostic:'post_submit_send_state_unverified'}; } return receipt; })()`;
+    return this._exec(sid, source);
+  }
+  async _finish(id) {
+    const sid = this.sessions.get(id);
+    this.sessions.delete(id);
+    if (sid) {
+      try {
+        await this.stopSession(sid);
+      } catch (e) {
+        this.logger({ event: "stop_session_error", error: String(e) });
+      }
+    }
+  }
+  _safeDiagnostic(error) {
+    const raw = String(error);
+    const safe =
+      /^(?:workspace\.acquireIdentity|session_identity_timeout|chatgpt_queue_unavailable|daemon_retiring)(?::[A-Za-z0-9_.-]{1,32})?$/
+          .test(raw)
+        ? raw
+        : "redacted";
+    const fingerprint = createHash("sha256").update(raw).digest("hex").slice(
+      0,
+      16,
+    );
+    return `${
+      error?.name || "Error"
+    };message=${safe};fingerprint=${fingerprint}`.slice(0, 480);
+  }
+  async _process(item) {
+    const owner = item.lease_owner;
+    try {
+      const state = await this._probe(item);
+      if (state === "RUNNING") {
+        this.transition(item.id, owner, "CHECKING", "WAITING", {
+          delay: this.intervalMs / 1000,
+          receipt: "stop_visible",
+        });
+        return;
+      }
+      if (state === "BLOCKED") {
+        this.transition(item.id, owner, "CHECKING", "BLOCKED", {
+          receipt: "page blocked",
+        });
+        return;
+      }
+      if (state !== "READY") {
+        this.transition(item.id, owner, "CHECKING", "WAITING", {
+          delay: this.intervalMs / 1000,
+          receipt: `probe_${state.toLowerCase()}`,
+        });
+        return;
+      }
+      this.transition(item.id, owner, "CHECKING", "SENDING");
+      const receipt = await this._send(item);
+      if (receipt?.verified_by !== "send-button-disabled") {
+        this.transition(item.id, owner, "SENDING", "UNCERTAIN", {
+          receipt: receipt?.diagnostic || "missing_user_turn_receipt",
+        });
+      } else {this.transition(item.id, owner, "SENDING", "SENT", {
+          receipt: "send-button-disabled",
+        });}
+    } catch (e) {
+      const diagnostic = this._safeDiagnostic(e),
+        current = this._one("SELECT * FROM turns WHERE id=?", item.id);
+      if (current?.state === "SENDING") {
+        this.transition(item.id, owner, "SENDING", "UNCERTAIN", {
+          receipt: diagnostic,
+        });
+      } else if (current?.state === "CHECKING") {
+        this.transition(item.id, owner, "CHECKING", "WAITING", {
+          delay: this.intervalMs / 1000,
+          receipt: `probe_error_${diagnostic}`,
+        });
+      }
+    } finally {
+      await this._finish(item.id);
+    }
+  }
+  async shutdown() {
+    if (this.closed) return;
+    this.closed = true;
+    clearTimeout(this.wakeTimer);
+    await Promise.allSettled([...this.active.values()]);
+    for (const id of [...this.sessions.keys()]) await this._finish(id);
+    this.db.close();
+  }
+  close() {
+    return this.shutdown();
+  }
+}
+export function createChatGPTQueue(options) {
+  return new ChatGPTQueue(options);
+}

package/runtime/chatgpt/lifecycle-common.mjs

@@ -0,0 +1,79 @@
+import { waitUntilStable } from "./readiness.mjs";
+export const SEND_ENABLED_JS =
+  `(() => { const b=document.querySelector('button[data-testid="send-button"],button[aria-label="Send prompt"],button[aria-label="Send"],form button[type="submit"]'); return !!b && !b.disabled && b.getAttribute('aria-disabled') !== 'true'; })()`;
+export const CLICK_SEND_JS =
+  `(() => { const visible=e=>!!e&&!!e.getClientRects().length; const running=[...document.querySelectorAll('button')].some(b=>{ if(!visible(b))return false; const l=(b.getAttribute('aria-label')||'').trim().toLowerCase(),t=(b.getAttribute('title')||'').trim().toLowerCase(),d=(b.getAttribute('data-testid')||'').trim().toLowerCase(); return ['stop generating','stop answering','stop response','stop'].includes(l)||['stop generating','stop answering'].includes(t)||['stop-button','stop-generating-button'].includes(d); }); if(running)return false; const b=document.querySelector('button[data-testid="send-button"],button[aria-label="Send prompt"],button[aria-label="Send"],form button[type="submit"]'); if(!b||b.disabled||b.getAttribute('aria-disabled')==='true')return false; b.click(); return true; })()`;
+export function targetUrl(
+  { project_id, thread_id, temporary = false, prompt } = {},
+) {
+  if (temporary && (project_id || thread_id)) {
+    throw new Error(
+      "temporary cannot be combined with project_id or thread_id",
+    );
+  }
+  const enc = encodeURIComponent;
+  const base = temporary
+    ? "https://chatgpt.com/"
+    : thread_id
+    ? `https://chatgpt.com${project_id ? `/g/${enc(project_id)}` : ""}/c/${
+      enc(thread_id)
+    }`
+    : project_id
+    ? `https://chatgpt.com/g/${enc(project_id)}/project`
+    : "https://chatgpt.com/";
+  const params = new URLSearchParams();
+  if (temporary) params.set("temporary-chat", "true");
+  if (prompt !== undefined) params.set("prompt", prompt);
+  return base + (params.size ? `?${params}` : "");
+}
+export function visibleDeliveryError(js) {
+  return js(
+    `(() => { const as=[...document.querySelectorAll('[role="alert"],[role="status"],[data-sonner-toast],[data-testid*="toast"],[class*="toast"],[class*="error-banner"]')]; for(const e of as){if(!e.getClientRects().length)continue; const t=(e.innerText||'').toLowerCase(); if(t.includes('this conversation is too long to continue')||t.includes('conversation is too long to continue'))return 'conversation_too_long'; if(t.includes('could not load this chatgpt conversation'))return 'thread_load_failed';} if((document.body?.innerText||'').toLowerCase().includes('could not load this chatgpt conversation'))return 'thread_load_failed'; return null; })()`,
+  );
+}
+export async function prefilledSubmit(helpers, prompt, { send = true } = {}) {
+  const { js } = helpers;
+  const sendEnabled = async () => !!(await js(SEND_ENABLED_JS));
+  try {
+    await waitUntilStable(
+      async () => ({ send: await sendEnabled() }),
+      (s) => s.send,
+      {
+        timeout: 15,
+        interval: 0.25,
+        stableSamples: 3,
+        phase: "prefilled Send readiness",
+        sleep: helpers.sleep,
+      },
+    );
+  } catch {
+    return send
+      ? Promise.reject(
+        new Error("URL-prefilled Send button was not observed ready"),
+      )
+      : { send_enabled: false };
+  }
+  if (!send) return { send_enabled: true };
+  if (!(await js(CLICK_SEND_JS))) {
+    throw new Error("URL-prefilled Send became unavailable before click");
+  }
+  try {
+    await waitUntilStable(
+      async () => ({ send_disabled: !(await sendEnabled()) }),
+      (s) => s.send_disabled,
+      {
+        timeout: 30,
+        interval: 0.2,
+        stableSamples: 2,
+        phase: "post-click Send disabled",
+        sleep: helpers.sleep,
+      },
+    );
+  } catch {
+    const e = new Error("Send did not become disabled after click");
+    e.name = "SubmissionVerificationError";
+    e.diagnostic = { reason: "post_submit_send_state_unverified" };
+    throw e;
+  }
+  return { verified_by: "send-button-disabled", turn: { id: null } };
+}

package/runtime/chatgpt/readiness.mjs

@@ -0,0 +1,120 @@
+export class SubmissionVerificationError extends Error {
+  constructor(message, diagnostic = {}) {
+    super(`${message}: ${JSON.stringify(diagnostic)}`);
+    this.name = "SubmissionVerificationError";
+    this.diagnostic = diagnostic;
+  }
+}
+
+export function waitUntilStable(
+  readState,
+  ready,
+  {
+    timeout = 15,
+    interval = 0.25,
+    stableSamples = 2,
+    phase = "readiness",
+    sleep = (ms) => new Promise((r) => setTimeout(r, ms)),
+  } = {},
+) {
+  return (async () => {
+    const end = Date.now() + timeout * 1000;
+    let stable = 0, previous;
+    while (Date.now() < end) {
+      let state;
+      try {
+        state = await readState();
+      } catch {
+        stable = 0;
+        await sleep(interval * 1000);
+        continue;
+      }
+      if (ready(state)) {
+        const key = JSON.stringify(state);
+        if (key === previous) stable++;
+        else {
+          previous = key;
+          stable = 1;
+        }
+        if (stable >= stableSamples) return state;
+      } else {
+        stable = 0;
+        previous = undefined;
+      }
+      await sleep(interval * 1000);
+    }
+    throw new Error(`ChatGPT ${phase} was not observed ready`);
+  })();
+}
+
+export function promptTextMatches(observed, expected) {
+  const norm = (value) =>
+    String(value || "").replace(/\s+/g, " ").replace(/>\s+/g, ">").replace(
+      /\s+</g,
+      "<",
+    ).trim();
+  const a = norm(observed), b = norm(expected);
+  if (a.includes(b)) return true;
+  if (!b) return !a;
+  const span = Math.min(256, Math.max(48, Math.floor(b.length / 8)));
+  return a.length >= Math.floor(b.length * 0.9) &&
+    a.includes(b.slice(0, span)) && a.includes(b.slice(-span));
+}
+
+export function sendReady(state, { prompt, attachments = [] } = {}) {
+  const button = state?.send;
+  const enabled = typeof button === "object" ? !!button.enabled : !!button;
+  if (!enabled) return false;
+  if (prompt !== undefined && !promptTextMatches(state.text || "", prompt)) {
+    return false;
+  }
+  const names = Array.isArray(state.attachments?.names)
+    ? state.attachments.names
+    : [];
+  return attachments.every((name) => names.includes(name));
+}
+
+export function submissionReceipt(
+  turns,
+  beforeCount,
+  prompt,
+  composerText,
+  { allowComposerCleared = false } = {},
+) {
+  for (const turn of turns.slice(beforeCount)) {
+    if (promptTextMatches(turn.text, prompt)) {
+      return { verified_by: "user-turn", turn };
+    }
+  }
+  if (allowComposerCleared && !String(composerText || "").trim()) {
+    return {
+      verified_by: "composer-cleared",
+      turn: { id: null, text: prompt },
+    };
+  }
+  return null;
+}
+
+export function submissionFailureDiagnostic(
+  turns,
+  beforeCount,
+  prompt,
+  composerText,
+  uiBefore,
+  uiAfter,
+) {
+  return {
+    accepted: false,
+    reason: "no_accepted_user_turn",
+    user_turn_matched: false,
+    before_user_turn_count: beforeCount,
+    user_turn_count: turns.length,
+    composer_populated: !!String(composerText || "").trim(),
+    composer_text_length: String(composerText || "").trim().length,
+    ui_changed: uiBefore == null || uiAfter == null
+      ? null
+      : JSON.stringify(uiBefore) !== JSON.stringify(uiAfter),
+    ui_before: uiBefore,
+    ui_after: uiAfter,
+  };
+}