@restregular/dsh-visual-browser 0.1.1 → 0.2.1

package/lib/routes.js

@@ -1,15 +1,15 @@
 /**
  * Same-origin HTTP API behind the Visual Browser panel.
  *
- * The panel polls `/state` for the timeline and pulls `/frame?seq=` for the
- * picture; user clicks, wheel events and keys go back through the same
- * BrowserManager methods the agent tools use. Frames stay on the host, so a
- * 1 Hz picture never costs a session token.
+ * Three jobs: a tiny `/state` JSON poll for the operation log, one long-lived
+ * `/stream` response that carries Chrome's own screencast frames as a binary
+ * frame stream, and `/input` batches that go straight to the DevTools input
+ * domain. No screenshot per click, no per-frame request, no base64 hop.
  */
 
 import { BrowserError } from './browser.js';
 
-const BODY_LIMIT = 64 * 1024;
+const BODY_LIMIT = 128 * 1024;
 
 class HttpError extends Error {
   constructor(status, code, message) {
@@ -28,17 +28,10 @@ function sendJson(res, status, payload) {
   res.end(body);
 }
 
-function sendFrame(res, frame) {
-  if (frame === null || frame === undefined) {
-    res.statusCode = 204;
-    res.end();
-    return;
-  }
-  res.statusCode = 200;
-  res.setHeader('content-type', 'image/jpeg');
+function sendEmpty(res, status) {
+  res.statusCode = status;
   res.setHeader('cache-control', 'no-store');
-  res.setHeader('content-length', String(frame.jpeg.length));
-  res.end(frame.jpeg);
+  res.end();
 }
 
 async function readJsonBody(req) {
@@ -75,6 +68,78 @@ function failure(res, error) {
   sendJson(res, status, { ok: false, error: { code, message } });
 }
 
+/**
+ * Hold the response open as one binary frame stream:
+ *
+ *   [uint32 LE payload length][uint32 LE sequence][JPEG bytes]...
+ *
+ * The panel reads it with `fetch` streaming and decodes each JPEG with
+ * `createImageBitmap` onto a canvas. Parsing the framing ourselves keeps the
+ * picture deterministic across browser builds and skips the base64 hop an
+ * event stream would need.
+ */
+function openStream(manager, res) {
+  if (typeof manager.subscribeFrames !== 'function') {
+    sendEmpty(res, 503);
+    return;
+  }
+  if (!manager.running) {
+    sendEmpty(res, 204);
+    return;
+  }
+  res.statusCode = 200;
+  // A custom type stays out of every compressible mime table on purpose: the
+  // host's gzip middleware must never buffer a live picture.
+  res.setHeader('content-type', 'application/x-dsh-visual-browser-frames');
+  // no-transform keeps the host's gzip middleware out of a live picture.
+  res.setHeader('cache-control', 'no-store, no-transform');
+  res.setHeader('pragma', 'no-cache');
+  res.setHeader('x-accel-buffering', 'no');
+  res.setHeader('connection', 'keep-alive');
+  res.flushHeaders?.();
+
+  let closed = false;
+  let paused = false;
+  let unsubscribe = null;
+  let sequence = 0;
+
+  const cleanup = () => {
+    if (closed) return;
+    closed = true;
+    try {
+      unsubscribe?.();
+    } catch {
+      /* the browser may be gone */
+    }
+    unsubscribe = null;
+  };
+
+  const writeFrame = (jpeg) => {
+    if (closed || paused) return;
+    try {
+      const header = Buffer.allocUnsafe(8);
+      header.writeUInt32LE(jpeg.length, 0);
+      header.writeUInt32LE(++sequence, 4);
+      const headOk = res.write(header);
+      const bodyOk = res.write(jpeg);
+      if (!headOk || !bodyOk) {
+        // Slow consumer: drop frames until the socket drains instead of growing
+        // an unbounded queue of stale pictures.
+        paused = true;
+        res.once('drain', () => {
+          paused = false;
+        });
+      }
+    } catch {
+      cleanup();
+    }
+  };
+
+  unsubscribe = manager.subscribeFrames(writeFrame);
+  res.on('close', cleanup);
+  res.on('error', cleanup);
+}
+
 /**
  * Handle one request under `prefix`. Exported so a smoke test can drive it with
  * a plain request/response pair and a stub manager.
@@ -90,7 +155,7 @@ export async function handle(manager, prefix, req, res) {
   }
   let route = url.pathname;
   if (route.startsWith(prefix)) route = route.slice(prefix.length);
-  if (route === '' || route === '/') route = '/';
+  if (route === '') route = '/';
 
   try {
     if (method === 'GET' && route === '/') {
@@ -101,15 +166,15 @@ export async function handle(manager, prefix, req, res) {
       sendJson(res, 200, { ok: true, state: manager.state() });
       return;
     }
-    if (method === 'GET' && route === '/frame') {
-      const seq = Number(url.searchParams.get('seq') ?? '0');
-      sendFrame(res, manager.frameFor(seq));
+    if (method === 'GET' && route === '/stream') {
+      openStream(manager, res);
       return;
     }
-    if (method === 'GET' && route === '/live') {
-      const state = await manager.refreshFrame();
-      const frame = manager.frameFor(state.frameSeq);
-      sendFrame(res, frame);
+    if (method === 'POST' && route === '/input') {
+      const body = await readJsonBody(req);
+      const events = Array.isArray(body.events) ? body.events : [];
+      const result = await manager.dispatchInput(events);
+      sendJson(res, 200, { ok: true, applied: result?.applied ?? 0, state: manager.state() });
       return;
     }
     if (method === 'POST' && route === '/start') {
@@ -117,6 +182,7 @@ export async function handle(manager, prefix, req, res) {
       const target = typeof body.url === 'string' ? body.url.trim() : '';
       if (target !== '') await manager.open(target);
       else await manager.ensureStarted();
+      manager.refreshLiveView?.();
       sendJson(res, 200, { ok: true, state: manager.state() });
       return;
     }
@@ -125,33 +191,12 @@ export async function handle(manager, prefix, req, res) {
       sendJson(res, 200, { ok: true, state: manager.state() });
       return;
     }
-    if (method === 'POST' && route === '/capture') {
-      const state = await manager.refreshFrame();
-      sendJson(res, 200, { ok: true, state });
-      return;
-    }
-    if (method === 'POST' && route === '/click') {
-      const body = await readJsonBody(req);
-      await manager.clickAt({ x: body.x, y: body.y });
-      sendJson(res, 200, { ok: true, state: manager.state() });
-      return;
-    }
-    if (method === 'POST' && route === '/wheel') {
-      const body = await readJsonBody(req);
-      await manager.wheelAt({ deltaY: body.deltaY, deltaX: body.deltaX });
-      sendJson(res, 200, { ok: true, state: manager.state() });
-      return;
-    }
-    if (method === 'POST' && route === '/key') {
-      const body = await readJsonBody(req);
-      await manager.keyFromUser(String(body.key ?? 'Enter'));
-      sendJson(res, 200, { ok: true, state: manager.state() });
-      return;
-    }
     if (method === 'POST' && route === '/nav') {
       const body = await readJsonBody(req);
       const action = String(body.action ?? '');
-      if (!['back', 'forward', 'reload'].includes(action)) throw new HttpError(400, 'BAD_ACTION', 'action must be back, forward, or reload');
+      if (!['back', 'forward', 'reload'].includes(action)) {
+        throw new HttpError(400, 'BAD_ACTION', 'action must be back, forward, or reload');
+      }
       await manager.act({ action });
       sendJson(res, 200, { ok: true, state: manager.state() });
       return;
@@ -159,6 +204,15 @@ export async function handle(manager, prefix, req, res) {
     sendJson(res, 404, { ok: false, error: { code: 'NOT_FOUND', message: `No route for ${method} ${route}` } });
   } catch (error) {
     manager.noteError?.(error);
+    if (res.headersSent) {
+      // A stream that failed after its headers went out can only be torn down.
+      try {
+        res.end();
+      } catch {
+        /* already closed */
+      }
+      return;
+    }
     failure(res, error);
   }
 }

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Visual Browser",
-    "description": "A real Chrome for the Agent plus a live view for you: the Agent reads a numbered, token-light list of interactive elements instead of the raw DOM, and every action lands in a panel with the page frame, a replayable timeline, and click-through control."
+    "description": "One extra door under the right Sidebar's built-in Browser: a live picture of the Chrome the Agent drives, with real click, drag, wheel and keyboard control, plus a collapsible, scrollable action log — no screenshot polling, no frame replay."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "可视化浏览器",
-    "description": "给 Agent 一个真实的 Chrome，也给你一块实时画面：Agent 只读「可交互元素编号列表」这种精简视图而不是整页 DOM，每次操作都会在侧边栏留下画面、可回放的操作时间线，你也可以直接点画面接管浏览器。"
+    "description": "在右侧边栏「浏览器」下面多一个入口：实时映射 Agent 正在操作的 Chrome 画面，点击、拖动、滚轮、键盘都能直接操作，操作记录可折叠、可滚动，不再需要逐帧截图或回放。"
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@restregular/dsh-visual-browser",
-  "version": "0.1.1",
-  "description": "Visual browser for DeepSeek Harness: the Agent drives a real Chrome through a token-light numbered view of interactive elements (never the raw DOM), while the Web UI streams the live page frame, the click point of every action, and a replayable operation timeline the user can also take over by clicking the picture.",
+  "version": "0.2.1",
+  "description": "Visual browser for DeepSeek Harness: a right-sidebar tab under the built-in Browser that streams Chrome live as a binary JPEG frame stream (no screenshot polling, no per-frame request) while the Agent drives it through a token-light numbered view of interactive elements, never the raw DOM. Clicks, drags, wheel and typing are forwarded straight to the DevTools input domain, and every action stays in a collapsible, scrollable operation log.",
   "icon": "./icon.svg",
   "type": "module",
   "main": "index.js",
@@ -33,8 +33,7 @@
       "immediately": true,
       "inject": [
         "@deepseek-ai/dsh-client-locale",
-        "@deepseek-ai/dsh-client-ui-layout",
-        "@deepseek-ai/dsh-client-ui-sidebar"
+        "@deepseek-ai/dsh-client-ui-sidebar-right"
       ]
     }
   },

package/test/package.test.mjs

@@ -1,56 +1,70 @@
-import assert from 'node:assert/strict';
-import { readFile } from 'node:fs/promises';
-import { dirname, join } from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-
-const root = dirname(dirname(fileURLToPath(import.meta.url)));
-const readJson = async (name) => JSON.parse(await readFile(join(root, name), 'utf8'));
-
-const pkg = await readJson('package.json');
-assert.equal(pkg.name, '@restregular/dsh-visual-browser');
-assert.match(pkg.version, /^\d+\.\d+\.\d+$/);
-assert.equal(pkg.type, 'module');
-assert.ok(pkg.description.length > 80, 'description explains the capability');
-assert.equal(pkg.icon, './icon.svg');
-assert.equal(pkg.dsh.bundle.patch, './cordis.patch.yml');
-assert.equal(pkg.dsh.client.platform, 'web');
-assert.ok(Array.isArray(pkg.dsh.client.inject) && pkg.dsh.client.inject.length > 0);
-assert.deepEqual(pkg.exports['./client'], './client.js');
-assert.ok(pkg.files.includes('client.js'));
-assert.ok(pkg.files.includes('index.js'));
-assert.ok(pkg.files.includes('lib/'));
-assert.ok(pkg.files.includes('cordis.patch.yml'));
-assert.ok(pkg.files.includes('icon.svg'));
-assert.ok(pkg.files.includes('locale/*.json'));
-
-const patch = await readFile(join(root, 'cordis.patch.yml'), 'utf8');
-assert.ok(patch.includes(`name: '${pkg.name}'`), 'patch row name must equal the package name');
-assert.ok(patch.includes('- insert:'));
-assert.ok(patch.includes('id: dsh-visual-browser'));
-
-for (const locale of ['en', 'zh']) {
-  const dict = await readJson(`locale/${locale}.json`);
-  assert.ok(dict.meta && dict.meta.title, `${locale} meta title`);
-  assert.ok(dict.meta.description && dict.meta.description.length > 40, `${locale} meta description`);
-}
-assert.notEqual((await readJson('locale/en.json')).meta.title, (await readJson('locale/zh.json')).meta.title);
-
-const icon = await readFile(join(root, 'icon.svg'), 'utf8');
-assert.ok(icon.startsWith('<svg'), 'icon is an SVG');
-assert.ok(icon.includes('viewBox="0 0 256 256"'));
-assert.ok(icon.includes('</svg>'));
-
-// The Host half must be importable and expose the Loader surface.
-const host = await import(pathToFileURL(join(root, 'index.js')).href);
-assert.equal(host.name, 'dsh-visual-browser');
-assert.equal(typeof host.apply, 'function');
-
-// The client bundle is not a module: it registers through the module loader.
-const client = await readFile(join(root, 'client.js'), 'utf8');
-assert.ok(client.includes('__ModuleLoader__.load'), 'client registers with the module loader');
-assert.ok(client.includes(`id: MODULE_ID`));
-assert.ok(client.includes(`'sidebar.panellist'`), 'sidebar entry');
-assert.ok(client.includes(`'main'`), 'main panel');
-assert.ok(!/(^|\n)\s*(const|let)\s+[A-Za-z_$][\w$]*\s*=/.test(client.replace(/^\s*\/\/.*$/gm, '')) || client.trimStart().startsWith('(function'), 'client file is wrapped in an IIFE');
-
-console.log('package.test.mjs ok');
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import { dirname, join } from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+
+const root = dirname(dirname(fileURLToPath(import.meta.url)));
+const readJson = async (name) => JSON.parse(await readFile(join(root, name), 'utf8'));
+
+const pkg = await readJson('package.json');
+assert.equal(pkg.name, '@restregular/dsh-visual-browser');
+assert.match(pkg.version, /^\d+\.\d+\.\d+$/);
+assert.equal(pkg.type, 'module');
+assert.ok(pkg.description.length > 80, 'description explains the capability');
+assert.equal(pkg.icon, './icon.svg');
+assert.equal(pkg.dsh.bundle.patch, './cordis.patch.yml');
+assert.equal(pkg.dsh.client.platform, 'web');
+assert.ok(Array.isArray(pkg.dsh.client.inject) && pkg.dsh.client.inject.length > 0);
+assert.ok(pkg.dsh.client.inject.includes('@deepseek-ai/dsh-client-ui-sidebar-right'), 'the right Sidebar must load first');
+assert.deepEqual(pkg.exports['./client'], './client.js');
+assert.ok(pkg.files.includes('client.js'));
+assert.ok(pkg.files.includes('index.js'));
+assert.ok(pkg.files.includes('lib/'));
+assert.ok(pkg.files.includes('cordis.patch.yml'));
+assert.ok(pkg.files.includes('icon.svg'));
+assert.ok(pkg.files.includes('locale/*.json'));
+
+const patch = await readFile(join(root, 'cordis.patch.yml'), 'utf8');
+assert.ok(patch.includes(`name: '${pkg.name}'`), 'patch row name must equal the package name');
+assert.ok(patch.includes('- insert:'));
+assert.ok(patch.includes('id: dsh-visual-browser'));
+
+for (const locale of ['en', 'zh']) {
+  const dict = await readJson(`locale/${locale}.json`);
+  assert.ok(dict.meta && dict.meta.title, `${locale} meta title`);
+  assert.ok(dict.meta.description && dict.meta.description.length > 40, `${locale} meta description`);
+}
+assert.notEqual((await readJson('locale/en.json')).meta.title, (await readJson('locale/zh.json')).meta.title);
+
+const icon = await readFile(join(root, 'icon.svg'), 'utf8');
+assert.ok(icon.startsWith('<svg'), 'icon is an SVG');
+assert.ok(icon.includes('viewBox="0 0 256 256"'));
+assert.ok(icon.includes('</svg>'));
+
+// The Host half must be importable and expose the Loader surface.
+const host = await import(pathToFileURL(join(root, 'index.js')).href);
+assert.equal(host.name, 'dsh-visual-browser');
+assert.equal(typeof host.apply, 'function');
+
+// The client bundle is not a module: it registers through the module loader.
+const client = await readFile(join(root, 'client.js'), 'utf8');
+assert.ok(client.includes('__ModuleLoader__.load'), 'client registers with the module loader');
+assert.ok(client.includes(`id: MODULE_ID`));
+assert.ok(client.includes(`'sidebar.right.pane.tab'`), 'right-sidebar tab body');
+assert.ok(client.includes(`'sidebar.right.pane.tab.title'`), 'right-sidebar tab title');
+assert.ok(client.includes(`'sidebar.right.tab.guide.entry'`), 'guide card seat');
+assert.ok(client.includes('@deepseek-ai/dsh-client-ui-sidebar-browser'), 'extends the built-in browser guide card');
+assert.ok(!client.includes(`'sidebar.panellist'`), 'the left sidebar entry is gone');
+assert.ok(!client.includes(`'main'`), 'the left main panel page is gone');
+assert.ok(client.includes(`ctx.inject(['sidebarRightTabs']`), 'the tab registry is waited for, not sampled');
+assert.ok(!client.includes('data-ds-dark-theme'), 'theme switching comes from --dsw-alias-* tokens alone');
+assert.ok(client.includes('createImageBitmap'), 'frames decode off the main thread');
+assert.ok(client.includes('/stream?r='), 'the panel reads the binary frame stream');
+assert.ok(!client.includes('previewSeq'), 'no frame replay is left in the panel');
+assert.ok(client.includes("'dvb-log-body'"), 'the operation log is a scroll container');
+assert.ok(client.includes("role: 'separator'"), 'the log height has a drag handle');
+assert.ok(client.includes('LOG_HEIGHT_KEY') && client.includes('localStorage'), 'the chosen split is remembered');
+assert.ok(client.includes('--dsw-alias-interactive-bg-hover'), 'hover uses the interactive token, not a surface token');
+assert.ok(!/(^|\n)\s*(const|let)\s+[A-Za-z_$][\w$]*\s*=/.test(client.replace(/^\s*\/\/.*$/gm, '')) || client.trimStart().startsWith('(function'), 'client file is wrapped in an IIFE');
+
+console.log('package.test.mjs ok');

package/test/routes.test.mjs

@@ -5,17 +5,39 @@ import { handle } from '../lib/routes.js';
 const PREFIX = '/visual-browser/api';
 
 function makeRes() {
+  const handlers = new Map();
   return {
     statusCode: 200,
     headers: {},
     chunks: [],
     ended: false,
+    flushed: false,
     setHeader(name, value) {
       this.headers[String(name).toLowerCase()] = value;
     },
+    flushHeaders() {
+      this.flushed = true;
+    },
+    write(chunk) {
+      this.chunks.push(Buffer.isBuffer(chunk) ? chunk : Buffer.from(String(chunk)));
+      return true;
+    },
     end(data) {
       if (data !== undefined) this.chunks.push(Buffer.isBuffer(data) ? data : Buffer.from(String(data)));
       this.ended = true;
+      this.emit('close');
+    },
+    on(event, callback) {
+      const bucket = handlers.get(event) ?? [];
+      bucket.push(callback);
+      handlers.set(event, bucket);
+      return this;
+    },
+    once(event, callback) {
+      return this.on(event, callback);
+    },
+    emit(event) {
+      for (const callback of handlers.get(event) ?? []) callback();
     },
     get body() {
       return Buffer.concat(this.chunks).toString('utf8');
@@ -37,17 +59,28 @@ function makeReq(method, url, body) {
   };
 }
 
-function makeManager() {
+function makeManager({ running = true } = {}) {
   const manager = {
     calls: {},
+    running,
     state() {
-      return { running: true, url: 'https://demo.test/', frameSeq: 3, actions: [] };
+      return { running, url: 'https://demo.test/', startedAt: 12, actionSeq: 3, actions: [] };
     },
-    frameFor(seq) {
-      return Number(seq) === 3 ? { seq: 3, jpeg: Buffer.from('jpeg-bytes') } : null;
+    framesListener: null,
+    subscribeFrames(listener) {
+      this.framesListener = listener;
+      this.calls.subscribed = (this.calls.subscribed ?? 0) + 1;
+      return () => {
+        this.framesListener = null;
+        this.calls.unsubscribed = true;
+      };
     },
-    async refreshFrame() {
-      return this.state();
+    refreshLiveView() {
+      this.calls.refreshed = true;
+    },
+    async dispatchInput(events) {
+      this.calls.input = events;
+      return { applied: events.length };
     },
     async open(url) {
       this.calls.open = url;
@@ -58,15 +91,6 @@ function makeManager() {
     async close() {
       this.calls.closed = true;
     },
-    async clickAt(point) {
-      this.calls.click = point;
-    },
-    async wheelAt(point) {
-      this.calls.wheel = point;
-    },
-    async keyFromUser(key) {
-      this.calls.key = key;
-    },
     async act(input) {
       this.calls.act = input;
     },
@@ -90,28 +114,44 @@ async function request(manager, method, path, body) {
   assert.equal(res.statusCode, 200);
   assert.equal(res.headers['content-type'], 'application/json; charset=utf-8');
   assert.equal(res.json.ok, true);
-  assert.equal(res.json.state.frameSeq, 3);
+  assert.equal(res.json.state.startedAt, 12);
 }
 
-// frame hit and miss
+// live picture stream: binary framing, then frames pushed through subscribeFrames
 {
   const manager = makeManager();
-  const hit = await request(manager, 'GET', '/frame?seq=3');
-  assert.equal(hit.statusCode, 200);
-  assert.equal(hit.headers['content-type'], 'image/jpeg');
-  assert.equal(hit.body, 'jpeg-bytes');
-
-  const miss = await request(manager, 'GET', '/frame?seq=2');
-  assert.equal(miss.statusCode, 204);
-  assert.equal(miss.chunks.length, 0);
+  const res = makeRes();
+  await handle(manager, PREFIX, makeReq('GET', PREFIX + '/stream'), res);
+  assert.equal(res.statusCode, 200);
+  assert.equal(res.headers['content-type'], 'application/x-dsh-visual-browser-frames');
+  assert.match(res.headers['cache-control'], /no-transform/, 'the host gzip middleware must stay out of a live picture');
+  assert.equal(res.flushed, true);
+  assert.equal(manager.calls.subscribed, 1);
+  assert.equal(typeof manager.framesListener, 'function');
+
+  manager.framesListener(Buffer.from('jpeg-bytes'));
+  const body = Buffer.concat(res.chunks);
+  assert.equal(body.length, 8 + 10);
+  assert.equal(body.readUInt32LE(0), 10, 'frame length prefix');
+  assert.equal(body.readUInt32LE(4), 1, 'frame sequence');
+  assert.equal(body.subarray(8).toString('utf8'), 'jpeg-bytes');
+
+  res.emit('close');
+  assert.equal(manager.calls.unsubscribed, true, 'the stream releases its subscription when the panel goes away');
 }
 
-// live capture
+// no multipart: the panel parses frames itself
 {
-  const manager = makeManager();
-  const res = await request(manager, 'GET', '/live');
-  assert.equal(res.statusCode, 200);
-  assert.equal(res.body, 'jpeg-bytes');
+  const routes = await import('node:fs/promises').then((fs) => fs.readFile(new URL('../lib/routes.js', import.meta.url), 'utf8'));
+  assert.ok(!routes.includes('multipart/x-mixed-replace'), 'binary framing replaced MJPEG');
+}
+
+// stream without a running browser is an empty answer, not a hang
+{
+  const manager = makeManager({ running: false });
+  const res = await request(manager, 'GET', '/stream');
+  assert.equal(res.statusCode, 204);
+  assert.equal(manager.calls.subscribed, undefined);
 }
 
 // start with and without a URL
@@ -120,26 +160,27 @@ async function request(manager, method, path, body) {
   const started = await request(manager, 'POST', '/start', { url: 'example.com' });
   assert.equal(started.statusCode, 200);
   assert.equal(manager.calls.open, 'example.com');
+  assert.equal(manager.calls.refreshed, true);
 
   const plain = await request(manager, 'POST', '/start', {});
   assert.equal(plain.statusCode, 200);
   assert.equal(manager.calls.started, true);
 }
 
-// user interactions
+// one input batch, one round trip
 {
   const manager = makeManager();
-  const click = await request(manager, 'POST', '/click', { x: 0.5, y: 0.25 });
-  assert.equal(click.statusCode, 200);
-  assert.deepEqual(manager.calls.click, { x: 0.5, y: 0.25 });
-
-  const wheel = await request(manager, 'POST', '/wheel', { deltaY: 240 });
-  assert.equal(wheel.statusCode, 200);
-  assert.deepEqual(manager.calls.wheel, { deltaY: 240, deltaX: undefined });
-
-  const key = await request(manager, 'POST', '/key', { key: 'Enter' });
-  assert.equal(key.statusCode, 200);
-  assert.equal(manager.calls.key, 'Enter');
+  const events = [
+    { t: 'pointer', type: 'down', x: 0.5, y: 0.25, button: 0, buttons: 1 },
+    { t: 'pointer', type: 'up', x: 0.5, y: 0.25, button: 0, buttons: 0 },
+    { t: 'wheel', x: 0.5, y: 0.5, dx: 0, dy: 240 },
+    { t: 'key', type: 'down', key: 'Enter', code: 'Enter', keyCode: 13 },
+  ];
+  const res = await request(manager, 'POST', '/input', { events });
+  assert.equal(res.statusCode, 200);
+  assert.equal(res.json.ok, true);
+  assert.equal(res.json.applied, 4);
+  assert.deepEqual(manager.calls.input, events);
 
   const nav = await request(manager, 'POST', '/nav', { action: 'back' });
   assert.equal(nav.statusCode, 200);
@@ -164,7 +205,7 @@ async function request(manager, method, path, body) {
   const res = makeRes();
   const badReq = {
     method: 'POST',
-    url: PREFIX + '/click',
+    url: PREFIX + '/input',
     async *[Symbol.asyncIterator]() {
       yield Buffer.from('{not json');
     },
@@ -176,9 +217,9 @@ async function request(manager, method, path, body) {
   const toobig = makeRes();
   const huge = {
     method: 'POST',
-    url: PREFIX + '/click',
+    url: PREFIX + '/input',
     async *[Symbol.asyncIterator]() {
-      yield Buffer.alloc(70 * 1024, 0x20);
+      yield Buffer.alloc(200 * 1024, 0x20);
     },
   };
   await handle(manager, PREFIX, huge, toobig);