@acertijosapps/electron-viewer 1.0.0 → 1.1.0

package/README.md

@@ -4,17 +4,18 @@ Live viewer for Electron apps in the browser, plus an MCP server so an AI agent
 Built for the browser pane of AI coding tools (such as Claude Code): you and the agent watch and
 control the same app window, in real time.
 
-<img src="https://unpkg.com/@acertijosapps/electron-viewer/media/viewer.jpg" width="560" alt="Electron Viewer showing the example app: window selector and launch button on top, the live window in the middle, and the reload, DevTools, window size, frame and screenshot controls at the bottom" />
+<img src="https://unpkg.com/@acertijosapps/electron-viewer/media/viewer.jpg" width="560" alt="Electron Viewer showing the example app: window selector and launch button on top, the live window in the middle, and the reload, DevTools, window size, touch and screenshot controls at the bottom" />
 
 - **Live video**: `Page.startScreencast` from the Chrome DevTools Protocol (CDP) over WebSocket. It keeps
   streaming while the app window is covered or minimized.
 - **Real input**: mouse move and hover, click, double click, right click, drag, wheel and full keyboard
   passthrough (including ⌘C/⌘V/⌘A on macOS, IME and dictation).
+- **Touch**: a touch mode in the viewer turns the pointer into a finger, and the agent can tap, swipe,
+  long press and pinch, for touch-first and kiosk apps.
 - **Every app and window**: launch your project with `electron .` from the viewer, or attach to any app
   started with `--remote-debugging-port`. Apps on ports 9222–9231 are found automatically.
 - **Main process too**: launched apps also expose their main process (Node inspector), so the agent can
-  run code there, resize the real window, open DevTools and capture the native frame.
-- **Native frame capture**: title bar, context menus and dialogs on top of the window.
+  run code there, resize the real window and open DevTools.
 - **MCP server**: the same actions as tools, plus JavaScript in the renderer and main process, the
   accessibility tree with click-ready coordinates, and console logs.
 - **Nothing to add to your app**: no preload, no dependency, no code changes.
@@ -32,28 +33,42 @@ control the same app window, in real time.
 From your Electron project folder:
 
 ```sh
-npx @acertijosapps/electron-viewer
+npx @acertijosapps/electron-viewer@1.1.0
 ```
 
 Open <http://localhost:8094> and click **Launch**. The viewer runs `electron .` on free debugging
 ports (CDP from 9222, Node inspector from 9229). Deep link to a window: `?window=<target id>`.
 
-If your app is started by another tool (Electron Forge, electron-vite, a custom script), pass the flags
-yourself and the viewer finds it:
+If your app is started by another tool (electron-vite, Electron Forge, a custom script), give the viewer
+your own start command. `{cdpPort}` and `{inspectPort}` are replaced with free debugging ports, and the
+Launch button (and `launch_app`) runs it in the project folder:
+
+```sh
+npx @acertijosapps/electron-viewer@1.1.0 --launch-cmd "yarn dev --remoteDebuggingPort {cdpPort} --inspect {inspectPort}"
+```
+
+That line is for electron-vite; for an npm script that ends in `electron .`, pass the flags after `--`:
+`--launch-cmd "npm start -- --remote-debugging-port={cdpPort} --inspect={inspectPort}"`. The command is
+only read from the command line or `ELECTRON_VIEWER_LAUNCH_CMD`, never from the HTTP API or the MCP.
+
+Or start the app yourself with the flags and the viewer finds it:
 
 ```sh
 electron --remote-debugging-port=9222 --inspect=9229 .
 ```
 
-`--inspect` is optional; without it you get everything except the main-process features
-(`evaluate_main`, frame capture, real window resizing and in-app DevTools). To attach on another
-port, use the form in the viewer or `--attach`.
+Apps on CDP ports 9222–9231 are found automatically, and so is their main process when its inspector is
+on 9229–9238. `--inspect` is optional; without it you get everything except the main-process features
+(`evaluate_main`, real window resizing and in-app DevTools). To attach on other ports, use the form in
+the viewer or `--attach` and `--inspect`.
 
 ```text
 electron-viewer [options]        Start the viewer
 electron-viewer mcp [options]    Start the MCP server on stdio
 
       --project <dir>      Project to launch with "electron ." (default: current folder)
+      --launch-cmd <cmd>   Launch with this shell command instead; {cdpPort} and {inspectPort}
+                           are replaced with the debugging ports
   -p, --port <port>        Viewer port (default 8094, env PORT)
       --host <host>        Interface to bind (default 127.0.0.1, env HOST)
       --attach <port>      Attach at startup to an app on this CDP port
@@ -72,7 +87,7 @@ Other environment variables: `MAX_DIM` (longest side of the streamed frames, def
 Claude Code:
 
 ```sh
-claude mcp add electron-viewer -- npx -y @acertijosapps/electron-viewer mcp
+claude mcp add electron-viewer -- npx -y @acertijosapps/electron-viewer@1.1.0 mcp
 ```
 
 Any other MCP client:
@@ -82,7 +97,7 @@ Any other MCP client:
   "mcpServers": {
     "electron-viewer": {
       "command": "npx",
-      "args": ["-y", "@acertijosapps/electron-viewer", "mcp"]
+      "args": ["-y", "@acertijosapps/electron-viewer@1.1.0", "mcp"]
     }
   }
 }
@@ -91,7 +106,10 @@ Any other MCP client:
 Also listed in the [official MCP Registry](https://registry.modelcontextprotocol.io) as
 `io.github.acertijosapps/electron-viewer`.
 
-Keep the viewer running (`npx @acertijosapps/electron-viewer`) to watch what the agent does. Without
+The examples pin an exact version. The viewer and the MCP can run code in your app, so pin the version
+you reviewed instead of letting `npx` fetch whatever was published last, and update it on purpose.
+
+Keep the viewer running (`npx @acertijosapps/electron-viewer@1.1.0`) to watch what the agent does. Without
 it, the MCP drives the app over CDP directly. Apps launched by either one are visible to the other.
 
 | Tool | What it does |
@@ -99,14 +117,18 @@ it, the MCP drives the app over CDP directly. Apps launched by either one are vi
 | `list_windows` | Running apps (with `main` when the main process is reachable) and their windows |
 | `launch_app` | Run `electron .` in the project on free debugging ports and wait for the first window |
 | `attach` | Attach to an app on a CDP port, optionally with its inspector port |
-| `screenshot` | PNG of the window content, longest side ≤ 1024 px; `frame: true` adds the native frame, menus and dialogs |
+| `screenshot` | PNG of the window content, longest side ≤ 1024 px |
 | `click` | Left, right or middle click; `count: 2` for a double click; optional modifiers |
 | `drag` | Press, move in steps and release: a real drag |
 | `hover` | Move the mouse without clicking |
+| `tap` | One-finger tap (touch events, `pointerType: "touch"`) |
+| `swipe` | One-finger swipe: scrolls touch lists and drives swipe gestures |
+| `long_press` | Hold one finger down for a while, 800 ms by default |
+| `pinch` | Two-finger pinch around a point; `scale` > 1 zooms in, < 1 zooms out |
 | `scroll` | Mouse wheel at a point, deltas in CSS px |
 | `type_text` | Insert text into the focused element (any Unicode) |
 | `press_key` | Enter, Tab, Escape, arrows, F1–F12… or any character, with modifiers |
-| `resize_window` | Resize the content area (the real window with the main process, emulated without it) |
+| `resize_window` | Resize the content area: the real window with the main process, an emulated viewport when the window can't reach the size (or with `emulate: true`) |
 | `reload` | Reload the window's page |
 | `evaluate` | Run JavaScript in the window's page and return the value |
 | `evaluate_main` | Run JavaScript in the main process, with `require('electron')` available |
@@ -128,7 +150,7 @@ Add the viewer to `.claude/launch.json` and open it with `preview_start electron
     {
       "name": "electron-viewer",
       "runtimeExecutable": "npx",
-      "runtimeArgs": ["-y", "@acertijosapps/electron-viewer"],
+      "runtimeArgs": ["-y", "@acertijosapps/electron-viewer@1.1.0"],
       "port": 8094,
       "autoPort": false
     }
@@ -136,19 +158,6 @@ Add the viewer to `.claude/launch.json` and open it with `preview_start electron
 }
 ```
 
-## Native frame capture
-
-The **frame** button (and `screenshot` with `frame: true`) captures the screen area of the window from
-the main process with `desktopCapturer`: the title bar, native context menus and dialogs on top of the
-window show up, at a few frames per second. Anything else covering the window shows up too, and the
-macOS menu bar at the top of the screen is not included. In frame mode, clicks on the content still
-work; the title bar and native menus can't be clicked from the viewer.
-
-On macOS the app needs the **Screen Recording** permission (System Settings › Privacy & Security ›
-Screen & System Audio Recording). For an app run with `electron .`, that is the `Electron.app` inside
-the project's `node_modules/electron/dist`; the error message gives the exact path. Restart the app
-after allowing it.
-
 ## HTTP API
 
 The MCP uses the viewer's API; you can call it too. `window` (target id or part of the title) goes in
@@ -160,7 +169,7 @@ the query string or the body and is optional with a single window. The server on
 | --- | --- |
 | `GET /api/windows` | `[{ id, name, cdpPort, inspectPort, main, windows: [{ id, title, url }] }]` |
 | `GET /api/project` | The project the viewer launches and whether it has Electron installed |
-| `GET /api/screenshot?max=<px>&frame=1` | PNG; viewport size in `X-Viewport-Width` / `X-Viewport-Height` |
+| `GET /api/screenshot?max=<px>` | PNG; viewport size in `X-Viewport-Width` / `X-Viewport-Height` |
 | `GET /api/ax-tree?interactiveOnly=true` | `{ tree }` |
 | `GET /api/logs?level=&source=&limit=` | `{ logs }` or `{ stdout }` |
 | `POST /api/launch` | `{ project? }` |
@@ -168,10 +177,14 @@ the query string or the body and is optional with a single window. The server on
 | `POST /api/click` | `{ x, y, button?, count?, modifiers? }` |
 | `POST /api/drag` | `{ x1, y1, x2, y2, ms? }` |
 | `POST /api/hover` | `{ x, y }` |
+| `POST /api/tap` | `{ x, y }` |
+| `POST /api/swipe` | `{ x1, y1, x2, y2, ms? }` |
+| `POST /api/long-press` | `{ x, y, ms? }` |
+| `POST /api/pinch` | `{ x?, y?, scale, ms? }` |
 | `POST /api/scroll` | `{ x, y, dx, dy }` |
 | `POST /api/text` | `{ text }` |
 | `POST /api/key` | `{ key, modifiers? }` |
-| `POST /api/resize` | `{ width, height }` (0 × 0 restores the window size) |
+| `POST /api/resize` | `{ width, height, emulate? }` (0 × 0 restores the window size) |
 | `POST /api/reload` | `{ ignoreCache? }` |
 | `POST /api/evaluate` | `{ expression }` |
 | `POST /api/evaluate-main` | `{ expression, app? }` |
@@ -189,24 +202,32 @@ the query string or the body and is optional with a single window. The server on
   textarea holds the focus: keys are sent with `Input.dispatchKeyEvent`, and text that arrives without
   key events (IME, dictation) with `Input.insertText`. On macOS, ⌘A, ⌘C, ⌘V, ⌘X and ⌘Z are sent as
   editing commands, because the native menu that normally handles them never sees CDP events.
+- Touch goes through `Input.dispatchTouchEvent`. The first touch action on a window also turns on touch
+  emulation (`navigator.maxTouchPoints` 5, `pointer: coarse`) until the viewer or MCP that sent it exits.
 - Each process keeps one connection per window and per main process, which also collects console
   messages and exceptions (the last 1000 per app).
+- For an app with no known inspector, each Node inspector on ports 9229–9238 is asked once, read only,
+  whether it is Electron and which CDP port its app listens on. Any other Node process started with
+  `--inspect` in that range gets one short connection (it logs `Debugger attached.`) and is left alone.
 - Launched and attached apps are remembered in `~/.cache/electron-viewer`, so the viewer and the MCP see
   the same apps. Launched apps write their output to a log file there and keep running if the viewer
   or MCP exits.
 
 ## Limitations
 
-- CDP only sees web content. Native UI (title bar, menus, dialogs, tray, notifications) is visible only
-  in frame mode and can't be clicked; use `evaluate_main` to drive it from the main process.
-- Synchronous dialogs (`dialog.showMessageBoxSync`) block the main process: `evaluate_main` and frame
-  capture wait until the dialog is closed.
+- CDP only sees web content. Native UI (title bar, menus, dialogs, tray, notifications) isn't shown or
+  clickable; use `evaluate_main` to drive it from the main process. Capturing it would mean capturing the
+  screen, and with it any other window on top of the app, so the viewer doesn't.
+- Synchronous dialogs (`dialog.showMessageBoxSync`) block the main process: `evaluate_main` waits until
+  the dialog is closed.
 - Each `WebContentsView` is a separate CDP target, so it is listed as its own window. `<webview>` tags are
   not listed.
+- A long press reaches the app as a held touch, so apps that time `touchstart` themselves see it, but
+  Chromium on desktop doesn't turn it into a context menu. The viewer's touch mode is one finger; use
+  `pinch` for two.
 - No audio.
-- Frame mode runs at a few frames per second and, on macOS, needs the Screen Recording permission.
-- Apps that build before starting (Forge, electron-vite) can't be launched from the viewer; start them
-  with the debugging flags and they are picked up.
+- A `--launch-cmd` must pass the ports on to Electron; how depends on the tool. Launched apps keep running
+  when the viewer exits; close them from the app (or its terminal).
 
 ## Contributing
 

package/bin/electron-viewer.js

@@ -17,6 +17,10 @@ Usage:
 Common options:
       --project <dir>      Electron project to launch with "electron ." (default:
                            current folder, env ELECTRON_VIEWER_PROJECT)
+      --launch-cmd <cmd>   Launch with this shell command instead (env
+                           ELECTRON_VIEWER_LAUNCH_CMD); {cdpPort} and {inspectPort}
+                           are replaced with the debugging ports, e.g.
+                           "yarn dev --remoteDebuggingPort {cdpPort} --inspect {inspectPort}"
 
 Viewer options:
   -p, --port <port>        Port to listen on (default: 8094, env PORT)
@@ -24,8 +28,8 @@ Viewer options:
       --attach <port>      Attach at startup to an app already running with
                            --remote-debugging-port=<port>
       --inspect <port>     With --attach: the app's main process inspector
-                           (--inspect=<port>), for evaluate_main, frame capture,
-                           DevTools and real window resizing
+                           (--inspect=<port>), for evaluate_main, DevTools and
+                           real window resizing
 
 MCP options:
       --viewer-url <url>   Viewer to talk to (default: http://localhost:8094,
@@ -82,6 +86,12 @@ for (let i = 0; i < args.length; i++) {
     case '--project':
       process.env.ELECTRON_VIEWER_PROJECT = path.resolve(value());
       break;
+    case '--launch-cmd': {
+      const cmd = value();
+      if (!cmd.includes('{cdpPort}')) fail('--launch-cmd must include {cdpPort}');
+      process.env.ELECTRON_VIEWER_LAUNCH_CMD = cmd;
+      break;
+    }
     case '--attach':
       process.env.ELECTRON_VIEWER_ATTACH = portValue(flag, value());
       break;

package/lib/electron.js

@@ -19,6 +19,8 @@ const RESERVED_PORTS = new Set([8081, 8082, 8093, 8094]);
 const STATE_DIR = process.env.ELECTRON_VIEWER_STATE_DIR || path.join(os.homedir(), '.cache', 'electron-viewer');
 const STATE_FILE = path.join(STATE_DIR, 'apps.json');
 const LAUNCH_TIMEOUT_MS = 30000;
+// Un comando propio (`yarn dev`) suele compilar antes de abrir la app: se le da más tiempo.
+const LAUNCH_CMD_TIMEOUT_MS = 120000;
 const FIRST_WINDOW_TIMEOUT_MS = 10000;
 const MAX_LOGS = 1000;
 const IS_MAC = process.platform === 'darwin';
@@ -101,7 +103,49 @@ export async function listApps() {
     }),
   );
   if (stale.length) updateState((s) => stale.forEach((p) => delete s[p]));
-  return apps.filter(Boolean).sort((a, b) => a.cdpPort - b.cdpPort);
+  const found = apps.filter(Boolean).sort((a, b) => a.cdpPort - b.cdpPort);
+  await discoverInspectors(found);
+  return found;
+}
+
+// Inspectores del main de apps arrancadas a mano (`--inspect`): se buscan en INSPECT_PORT … +9 y
+// se emparejan preguntándole a cada uno, solo leyendo, en qué puerto CDP escucha su app. El
+// resultado se guarda por proceso (id del target): a cada inspector se le conecta una sola vez.
+const inspectorPairs = new Map(); // id del target del inspector → Promise<puerto CDP | null>
+
+async function discoverInspectors(apps) {
+  const missing = apps.filter((a) => !a.inspectPort);
+  if (!missing.length) return;
+  const used = new Set(apps.map((a) => a.inspectPort).filter(Boolean));
+  const ports = Array.from({ length: SCAN_PORTS }, (_, i) => INSPECT_PORT + i).filter((p) => !used.has(p));
+  await Promise.all(
+    ports.map(async (port) => {
+      const target = await inspectorTarget(port);
+      if (!target) return;
+      if (!inspectorPairs.has(target.id)) inspectorPairs.set(target.id, pairInspector(target).catch(() => null));
+      const cdpPort = await inspectorPairs.get(target.id);
+      const app = missing.find((a) => a.cdpPort === cdpPort);
+      if (!app) return;
+      app.inspectPort = port;
+      updateState((s) => {
+        s[app.cdpPort] = { ...s[app.cdpPort], cdpPort: app.cdpPort, inspectPort: port, name: s[app.cdpPort]?.name || app.name };
+      });
+    }),
+  );
+}
+
+async function pairInspector(target) {
+  const client = await CdpClient.connect(target.webSocketDebuggerUrl, { timeout: 1500 });
+  try {
+    // Cualquier proceso Node con --inspect puede estar en el rango: solo se lee, y nada si no es Electron.
+    return await evaluate(
+      client,
+      "process.versions.electron ? Number(require('electron').app.commandLine.getSwitchValue('remote-debugging-port')) || null : null",
+      { commandLineAPI: true, timeout: 1500 },
+    );
+  } finally {
+    client.close();
+  }
 }
 
 const isWindowTarget = (t) => t.type === 'page' && !t.url.startsWith('devtools://');
@@ -229,6 +273,12 @@ export async function resolveElectron(dir) {
   return downloaded;
 }
 
+// Comando de arranque propio (--launch-cmd). Solo desde la CLI o el entorno, nunca desde la API ni
+// el MCP: si no, una petición local podría ejecutar cualquier cosa en la shell.
+export function launchCommand() {
+  return process.env.ELECTRON_VIEWER_LAUNCH_CMD || null;
+}
+
 export function projectInfo(project) {
   const dir = projectDir(project);
   let name = path.basename(dir);
@@ -238,11 +288,13 @@ export function projectInfo(project) {
   } catch {
     // sin package.json: el nombre de la carpeta
   }
+  const command = launchCommand();
+  if (command) return { dir, name, command, launchable: true };
   try {
     electronPackageDir(dir);
-    return { dir, name, launchable: true };
+    return { dir, name, command: 'electron .', launchable: true };
   } catch (err) {
-    return { dir, name, launchable: false, reason: err.message };
+    return { dir, name, command: 'electron .', launchable: false, reason: err.message };
   }
 }
 
@@ -256,7 +308,11 @@ function tail(file, lines = 20) {
 
 export async function launchApp({ project, args = [] } = {}) {
   const info = projectInfo(project);
-  const electron = await resolveElectron(info.dir);
+  const command = launchCommand();
+  if (command && !command.includes('{cdpPort}')) {
+    throw invalid('The launch command must pass {cdpPort} to Electron, e.g. "yarn dev --remoteDebuggingPort {cdpPort} --inspect {inspectPort}"');
+  }
+  const electron = command ? null : await resolveElectron(info.dir);
   const cdpPort = await freePort(CDP_PORT);
   const inspectPort = await freePort(INSPECT_PORT, [cdpPort]);
   mkdirSync(STATE_DIR, { recursive: true });
@@ -265,29 +321,27 @@ export async function launchApp({ project, args = [] } = {}) {
   const fd = openSync(log, 'w');
   const env = { ...process.env };
   delete env.ELECTRON_RUN_AS_NODE;
-  const child = spawn(electron, [`--inspect=${inspectPort}`, `--remote-debugging-port=${cdpPort}`, '.', ...args], {
-    cwd: info.dir,
-    env,
-    detached: true,
-    stdio: ['ignore', fd, fd],
-  });
+  const options = { cwd: info.dir, env, detached: true, stdio: ['ignore', fd, fd] };
+  const child = command
+    ? spawn(command.replaceAll('{cdpPort}', cdpPort).replaceAll('{inspectPort}', inspectPort), { ...options, shell: true })
+    : spawn(electron, [`--inspect=${inspectPort}`, `--remote-debugging-port=${cdpPort}`, '.', ...args], options);
   closeSync(fd);
   let exited = null;
   child.once('exit', (code, signal) => (exited = `exited (code ${code}${signal ? `, ${signal}` : ''})`));
   child.once('error', (err) => (exited = err.message));
   child.unref();
 
-  const deadline = Date.now() + LAUNCH_TIMEOUT_MS;
+  const deadline = Date.now() + (command ? LAUNCH_CMD_TIMEOUT_MS : LAUNCH_TIMEOUT_MS);
   while (!(await probe(cdpPort))) {
     if (exited || Date.now() > deadline) {
-      if (!exited) child.kill();
+      if (!exited) killGroup(child);
       const output = tail(log);
       throw new Error(`${info.name} ${exited || 'did not open its debugging port in time'}${output ? `:\n${output}` : ''}`);
     }
     await sleep(200);
   }
   updateState((s) => {
-    s[cdpPort] = { cdpPort, inspectPort, pid: child.pid, project: info.dir, name: info.name, log, startedAt: new Date().toISOString() };
+    s[cdpPort] = { cdpPort, inspectPort, pid: child.pid, project: info.dir, name: info.name, command: info.command, log, startedAt: new Date().toISOString() };
   });
   const until = Date.now() + FIRST_WINDOW_TIMEOUT_MS;
   let app;
@@ -299,6 +353,17 @@ export async function launchApp({ project, args = [] } = {}) {
   return app;
 }
 
+// Con un comando propio, el hijo es una shell que arranca a su vez el dev server y Electron: se
+// termina todo su grupo de procesos (detached lo hizo líder de grupo).
+function killGroup(child) {
+  try {
+    if (process.platform === 'win32') child.kill();
+    else process.kill(-child.pid, 'SIGTERM');
+  } catch {
+    // ya terminó
+  }
+}
+
 export async function attachApp({ port, inspectPort } = {}) {
   port = Number(port);
   if (!Number.isInteger(port) || port < 1 || port > 65535) throw invalid('port must be a TCP port');
@@ -515,69 +580,26 @@ export async function viewport(page) {
 
 const BUTTONS = { left: 1, right: 2, middle: 4 };
 
-function mouse(page, type, x, y, extra = {}) {
-  return page.send('Input.dispatchMouseEvent', { type, x, y, ...extra });
-}
-
-// ---------- Captura con el marco nativo ----------
-// desktopCapturer recorta la pantalla en el área de la ventana: sale la barra de título, menús
-// contextuales y diálogos encima de ella (y cualquier otra ventana que la tape).
-
-const nativeCaptureExpr = (targetId, { format, quality, maxDim }) => `(async () => {
-  const { desktopCapturer, screen } = require('electron');
-  const win = ${winExpr(targetId)};
-  const bounds = win.getBounds();
-  const content = win.getContentBounds();
-  const display = screen.getDisplayMatching(bounds);
-  const k = display.scaleFactor;
-  let sources;
-  try {
-    sources = await desktopCapturer.getSources({
-      types: ['screen'],
-      thumbnailSize: { width: Math.round(display.size.width * k), height: Math.round(display.size.height * k) },
-    });
-  } catch (err) {
-    const app = process.execPath.replace(/(\\.app)\\/.*$/, '$1');
-    throw new Error(process.platform === 'darwin'
-      ? 'Screen capture is not allowed. In System Settings › Privacy & Security › Screen & System Audio Recording, allow ' + app + ' and restart the app.'
-      : 'Screen capture failed: ' + (err.message || err));
-  }
-  const source = sources.find((s) => s.display_id === String(display.id)) || sources[0];
-  if (!source) throw new Error('No screen to capture');
-  const shot = source.thumbnail;
-  const scale = shot.getSize().width / display.bounds.width;
-  const x0 = Math.max(bounds.x, display.bounds.x);
-  const y0 = Math.max(bounds.y, display.bounds.y);
-  const x1 = Math.min(bounds.x + bounds.width, display.bounds.x + display.bounds.width);
-  const y1 = Math.min(bounds.y + bounds.height, display.bounds.y + display.bounds.height);
-  if (x1 <= x0 || y1 <= y0 || win.isMinimized()) throw new Error('The window is not on screen');
-  let img = shot.crop({
-    x: Math.round((x0 - display.bounds.x) * scale),
-    y: Math.round((y0 - display.bounds.y) * scale),
-    width: Math.round((x1 - x0) * scale),
-    height: Math.round((y1 - y0) * scale),
+// Touch: Input.dispatchTouchEvent llega como touch real (touchstart, pointerType "touch"). La
+// primera vez se activa la emulación de touch de la ventana, para que la página se vea en una
+// pantalla táctil (navigator.maxTouchPoints, pointer: coarse) mientras dure la conexión.
+async function enableTouch(page) {
+  if (page.touchEnabled) return;
+  await page.send('Emulation.setTouchEmulationEnabled', { enabled: true, maxTouchPoints: 5 });
+  page.touchEnabled = true;
+}
+
+// type: touchStart, touchMove, touchEnd o touchCancel; points en px CSS, con id estable por dedo.
+export async function dispatchTouch(page, type, points = []) {
+  await enableTouch(page);
+  await page.send('Input.dispatchTouchEvent', {
+    type,
+    touchPoints: type === 'touchEnd' || type === 'touchCancel' ? [] : points.map((p, i) => ({ x: p.x, y: p.y, id: p.id ?? i, radiusX: 1, radiusY: 1, force: 1 })),
   });
-  const max = ${Number(maxDim) || 0};
-  const size = img.getSize();
-  if (max && Math.max(size.width, size.height) > max) {
-    const f = max / Math.max(size.width, size.height);
-    img = img.resize({ width: Math.round(size.width * f), height: Math.round(size.height * f), quality: 'good' });
-  }
-  const out = img.getSize();
-  const w = x1 - x0;
-  const h = y1 - y0;
-  return {
-    data: ${format === 'png' ? 'img.toPNG()' : `img.toJPEG(${Number(quality) || 80})`}.toString('base64'),
-    width: out.width,
-    height: out.height,
-    // Área del contenido (lo que ve CDP) dentro de la imagen, normalizada 0–1.
-    content: { x: (content.x - x0) / w, y: (content.y - y0) / h, width: content.width / w, height: content.height / h },
-  };
-})()`;
+}
 
-export async function captureNative(app, targetId, { format = 'jpeg', quality, maxDim } = {}) {
-  const shot = await evaluateMain(app, nativeCaptureExpr(targetId, { format, quality, maxDim }), { timeout: 15000 });
-  return { ...shot, data: Buffer.from(shot.data, 'base64'), mimeType: format === 'png' ? 'image/png' : 'image/jpeg' };
+function mouse(page, type, x, y, extra = {}) {
+  return page.send('Input.dispatchMouseEvent', { type, x, y, ...extra });
 }
 
 // ---------- Árbol de accesibilidad ----------
@@ -683,12 +705,8 @@ export function createActions() {
     launch: ({ project } = {}) => launchApp({ project }),
     attach: ({ port, inspectPort }) => attachApp({ port, inspectPort }),
 
-    screenshot: async ({ window, max, frame }) => {
+    screenshot: async ({ window, max }) => {
       const { w, page } = await target(window);
-      if (frame && frame !== 'false' && frame !== '0') {
-        const shot = await captureNative(w.app, w.id, { format: 'png', maxDim: Number(max) || undefined });
-        return { ...shot, window: w.id, frame: true };
-      }
       const vp = await viewport(page);
       const dpr = await evaluate(page, 'devicePixelRatio');
       const scale = Number(max) ? Math.min(1, Number(max) / (Math.max(vp.width, vp.height) * dpr)) : 1;
@@ -731,6 +749,65 @@ export function createActions() {
       return { ok: true };
     },
 
+    tap: async ({ window, x, y }) => {
+      const { page } = await target(window);
+      const p = await at(page, x, y);
+      await dispatchTouch(page, 'touchStart', [p]);
+      await sleep(50);
+      await dispatchTouch(page, 'touchEnd');
+      return { ok: true };
+    },
+
+    swipe: async ({ window, x1, y1, x2, y2, ms = 300 }) => {
+      const { page } = await target(window);
+      const a = await at(page, x1, y1);
+      const b = await at(page, x2, y2);
+      const duration = Math.max(50, Math.min(10000, Number(ms) || 300));
+      const steps = Math.max(5, Math.round(duration / 16));
+      await dispatchTouch(page, 'touchStart', [a]);
+      for (let i = 1; i <= steps; i++) {
+        await sleep(duration / steps);
+        const t = i / steps;
+        await dispatchTouch(page, 'touchMove', [{ x: a.x + (b.x - a.x) * t, y: a.y + (b.y - a.y) * t }]);
+      }
+      await dispatchTouch(page, 'touchEnd');
+      return { ok: true };
+    },
+
+    longPress: async ({ window, x, y, ms = 800 }) => {
+      const { page } = await target(window);
+      const p = await at(page, x, y);
+      await dispatchTouch(page, 'touchStart', [p]);
+      await sleep(Math.max(100, Math.min(10000, Number(ms) || 800)));
+      await dispatchTouch(page, 'touchEnd');
+      return { ok: true };
+    },
+
+    // Dos dedos en horizontal alrededor de (x, y) que se separan (scale > 1) o se juntan (< 1).
+    pinch: async ({ window, x = 0.5, y = 0.5, scale = 2, ms = 400 }) => {
+      const { page } = await target(window);
+      const f = Number(scale);
+      if (!(f >= 0.1 && f <= 10) || f === 1) throw invalid('scale must be between 0.1 and 10, and not 1');
+      const vp = await viewport(page);
+      const c = await at(page, x, y);
+      const base = Math.min(vp.width, vp.height) * 0.1; // separación inicial al acercar
+      const from = f > 1 ? base : base / f;
+      const to = Math.min(from * f, Math.min(vp.width, vp.height) * 0.45);
+      const duration = Math.max(100, Math.min(10000, Number(ms) || 400));
+      const steps = Math.max(5, Math.round(duration / 16));
+      const fingers = (d) => [
+        { x: Math.max(0, c.x - d), y: c.y, id: 0 },
+        { x: Math.min(vp.width, c.x + d), y: c.y, id: 1 },
+      ];
+      await dispatchTouch(page, 'touchStart', fingers(from));
+      for (let i = 1; i <= steps; i++) {
+        await sleep(duration / steps);
+        await dispatchTouch(page, 'touchMove', fingers(from + (to - from) * (i / steps)));
+      }
+      await dispatchTouch(page, 'touchEnd');
+      return { ok: true, scale: Number((to / from).toFixed(3)) };
+    },
+
     hover: async ({ window, x, y }) => {
       const { page } = await target(window);
       const p = await at(page, x, y);
@@ -760,21 +837,30 @@ export function createActions() {
       return { ok: true };
     },
 
-    resize: async ({ window, width, height }) => {
+    // Con el main se cambia la ventana real; si no llega al tamaño pedido (pantalla más chica, kiosk,
+    // pantalla completa) o con emulate, se emula el viewport exacto. 0 × 0 vuelve al tamaño de la ventana.
+    resize: async ({ window, width, height, emulate }) => {
       const { w, page } = await target(window);
       const fit = !Number(width) || !Number(height);
       if (!fit && (Number(width) < 100 || Number(height) < 100 || Number(width) > 8000 || Number(height) > 8000)) {
         throw invalid('width and height must be between 100 and 8000');
       }
-      if (w.app.main) {
-        await page.send('Emulation.clearDeviceMetricsOverride');
-        if (!fit) await evaluateMain(w.app, `(${winExpr(w.id)}).setContentSize(${Math.round(width)}, ${Math.round(height)}), 0`);
+      await page.send('Emulation.clearDeviceMetricsOverride');
+      if (fit) return { ...(await viewport(page)), via: 'window' };
+      const W = Math.round(width);
+      const H = Math.round(height);
+      const force = emulate === true || emulate === 'true';
+      let reached = null;
+      if (w.app.main && !force) {
+        await evaluateMain(w.app, `(${winExpr(w.id)}).setContentSize(${W}, ${H}), 0`);
         await sleep(150);
-        return { ...(await viewport(page)), via: 'window' };
+        reached = await viewport(page);
+        if (reached.width === W && reached.height === H) return { ...reached, via: 'window' };
       }
-      if (fit) await page.send('Emulation.clearDeviceMetricsOverride');
-      else await page.send('Emulation.setDeviceMetricsOverride', { width: Math.round(width), height: Math.round(height), deviceScaleFactor: 0, mobile: false });
-      return { ...(await viewport(page)), via: 'viewport emulation' };
+      await page.send('Emulation.setDeviceMetricsOverride', { width: W, height: H, deviceScaleFactor: 0, mobile: false });
+      const result = { ...(await viewport(page)), via: 'viewport emulation' };
+      if (reached) result.note = `The window only reached ${reached.width}×${reached.height} (screen size, kiosk or full screen), so the page is emulated at ${W}×${H}.`;
+      return result;
     },
 
     reload: async ({ window, ignoreCache }) => {

package/mcp/server.js

@@ -40,7 +40,6 @@ async function viewer(method, route, params = {}) {
   }
   const type = res.headers.get('content-type') || '';
   if (!type.startsWith('image/')) return res.json();
-  const content = res.headers.get('x-content');
   const vw = res.headers.get('x-viewport-width');
   return {
     data: Buffer.from(await res.arrayBuffer()),
@@ -49,7 +48,6 @@ async function viewer(method, route, params = {}) {
     height: Number(res.headers.get('x-image-height')),
     window: res.headers.get('x-window'),
     viewport: vw ? { width: Number(vw), height: Number(res.headers.get('x-viewport-height')) } : undefined,
-    content: content ? JSON.parse(content) : undefined,
   };
 }
 
@@ -82,7 +80,7 @@ server.registerTool(
     title: 'List windows',
     description:
       'Lists the running Electron apps (found on CDP ports 9222–9231, launched or attached) and their windows. ' +
-      'main=true means the main process is reachable (evaluate_main, frame screenshots, real window resizing). ' +
+      'main=true means the main process is reachable (evaluate_main, real window resizing). ' +
       'Includes the viewer URL to watch a window live in a browser pane.',
     annotations: { readOnlyHint: true },
   },
@@ -90,7 +88,7 @@ server.registerTool(
     const { result: apps, via } = await run('windows', 'GET', '/api/windows');
     return text({
       apps,
-      viewer: via === 'viewer' ? VIEWER_URL : 'not running (start it with `npx @acertijosapps/electron-viewer`)',
+      viewer: via === 'viewer' ? VIEWER_URL : `not running (start it with \`npx @acertijosapps/electron-viewer@${version}\`)`,
     });
   },
 );
@@ -100,8 +98,9 @@ server.registerTool(
   {
     title: 'Launch app',
     description:
-      'Starts the Electron project with `electron .` (its own node_modules/electron) on free debugging ports, ' +
-      'so both the renderer (CDP) and the main process (Node inspector) are reachable. Waits for the first window.',
+      'Starts the Electron project on free debugging ports, so both the renderer (CDP) and the main process ' +
+      '(Node inspector) are reachable, and waits for the first window. It runs `electron .` with the project\'s own ' +
+      'Electron, or the launch command configured with --launch-cmd (e.g. a dev server).',
     inputSchema: {
       project: z.string().optional().describe('Project folder (default: the folder the viewer or MCP was started in)'),
     },
@@ -130,22 +129,15 @@ server.registerTool(
     title: 'Screenshot',
     description:
       'Captures the window content (PNG). For click, drag, hover and scroll use normalized coordinates: ' +
-      'x = pixel_x / image width, y = pixel_y / image height. With frame=true it captures the screen area of ' +
-      'the window instead, with its native title bar, menus and dialogs (needs main=true; on macOS the app needs ' +
-      'the Screen Recording permission); coordinates still refer to the content screenshot.',
+      'x = pixel_x / image width, y = pixel_y / image height. Native UI (title bar, menus, dialogs) is not included.',
     inputSchema: {
       window: windowArg,
-      frame: z.boolean().optional().describe('Include the native window frame, menus and dialogs'),
     },
     annotations: { readOnlyHint: true },
   },
-  async ({ window, frame }) => {
-    const { result: shot } = await run('screenshot', 'GET', '/api/screenshot', { window, max: SCREENSHOT_MAX, frame: frame ? 1 : undefined });
-    const c = shot.content;
-    const note = c
-      ? `Window with frame, ${shot.width}×${shot.height} px. Content area: x ${c.x.toFixed(3)}–${(c.x + c.width).toFixed(3)}, ` +
-        `y ${c.y.toFixed(3)}–${(c.y + c.height).toFixed(3)} of the image; click coordinates are normalized over the content only.`
-      : `Viewport is ${shot.viewport?.width}×${shot.viewport?.height} CSS px (image ${shot.width}×${shot.height}, longest side ≤ ${SCREENSHOT_MAX}).`;
+  async ({ window }) => {
+    const { result: shot } = await run('screenshot', 'GET', '/api/screenshot', { window, max: SCREENSHOT_MAX });
+    const note = `Viewport is ${shot.viewport?.width}×${shot.viewport?.height} CSS px (image ${shot.width}×${shot.height}, longest side ≤ ${SCREENSHOT_MAX}).`;
     return {
       content: [
         { type: 'image', data: shot.data.toString('base64'), mimeType: shot.mimeType },
@@ -209,6 +201,80 @@ server.registerTool(
   },
 );
 
+server.registerTool(
+  'tap',
+  {
+    title: 'Tap',
+    description:
+      'Taps a point with one finger (Input.dispatchTouchEvent): the page gets touch and pointer events with ' +
+      'pointerType "touch". The first touch action turns on touch emulation for the window (maxTouchPoints, pointer: coarse).',
+    inputSchema: { x: coord('x coordinate'), y: coord('y coordinate'), window: windowArg },
+  },
+  async ({ x, y, window }) => {
+    await run('tap', 'POST', '/api/tap', { window, x, y });
+    return text(`tapped (${x.toFixed(3)}, ${y.toFixed(3)})`);
+  },
+);
+
+server.registerTool(
+  'swipe',
+  {
+    title: 'Swipe',
+    description: 'Swipes one finger from one point to another (touch events; use drag for the mouse). Scrolls touch lists and drives swipe gestures.',
+    inputSchema: {
+      x1: coord('Start x'),
+      y1: coord('Start y'),
+      x2: coord('End x'),
+      y2: coord('End y'),
+      duration_ms: z.number().int().min(50).max(10000).default(300).describe('Gesture duration in ms'),
+      window: windowArg,
+    },
+  },
+  async ({ x1, y1, x2, y2, duration_ms, window }) => {
+    await run('swipe', 'POST', '/api/swipe', { window, x1, y1, x2, y2, ms: duration_ms });
+    return text(`swiped (${x1.toFixed(3)}, ${y1.toFixed(3)}) → (${x2.toFixed(3)}, ${y2.toFixed(3)}) in ${duration_ms} ms`);
+  },
+);
+
+server.registerTool(
+  'long_press',
+  {
+    title: 'Long press',
+    description:
+      'Holds one finger on a point and releases it. Apps that time touchstart themselves see a long press; ' +
+      "Chromium on desktop doesn't turn it into a context menu.",
+    inputSchema: {
+      x: coord('x coordinate'),
+      y: coord('y coordinate'),
+      duration_ms: z.number().int().min(100).max(10000).default(800).describe('How long the finger stays down, in ms'),
+      window: windowArg,
+    },
+  },
+  async ({ x, y, duration_ms, window }) => {
+    await run('longPress', 'POST', '/api/long-press', { window, x, y, ms: duration_ms });
+    return text(`long-pressed (${x.toFixed(3)}, ${y.toFixed(3)}) for ${duration_ms} ms`);
+  },
+);
+
+server.registerTool(
+  'pinch',
+  {
+    title: 'Pinch',
+    description: 'Two-finger pinch centered on a point: scale > 1 spreads the fingers (zoom in), scale < 1 brings them together.',
+    inputSchema: {
+      x: coord('Center x').default(0.5),
+      y: coord('Center y').default(0.5),
+      scale: z.number().min(0.1).max(10).describe('Final finger distance ÷ initial distance, e.g. 2 or 0.5'),
+      duration_ms: z.number().int().min(100).max(10000).default(400).describe('Gesture duration in ms'),
+      window: windowArg,
+    },
+  },
+  async ({ x, y, scale, duration_ms, window }) => {
+    const { result } = await run('pinch', 'POST', '/api/pinch', { window, x, y, scale, ms: duration_ms });
+    return text(`pinched ×${result.scale} at (${x.toFixed(3)}, ${y.toFixed(3)})`);
+  },
+);
+
 server.registerTool(
   'scroll',
   {
@@ -262,14 +328,17 @@ server.registerTool(
     title: 'Resize window',
     description:
       'Sets the size of the window content area in CSS px. With the main process it resizes the real window; ' +
-      'without it, it emulates the viewport. Width and height 0 restore the window size.',
+      'if the window cannot reach that size (smaller screen, kiosk, full screen), without the main process or with ' +
+      'emulate=true, the page viewport is emulated at the exact size instead. Width and height 0 restore the window size.',
     inputSchema: {
       width: z.number().int().min(0).max(8000).describe('Content width in CSS px'),
       height: z.number().int().min(0).max(8000).describe('Content height in CSS px'),
+      emulate: z.boolean().optional().describe('Emulate the viewport without touching the real window'),
       window: windowArg,
     },
   },
-  async ({ width, height, window }) => text((await run('resize', 'POST', '/api/resize', { window, width, height })).result),
+  async ({ width, height, emulate, window }) =>
+    text((await run('resize', 'POST', '/api/resize', { window, width, height, emulate })).result),
 );
 
 server.registerTool(

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@acertijosapps/electron-viewer",
   "mcpName": "io.github.acertijosapps/electron-viewer",
-  "version": "1.0.0",
-  "description": "Visor web de apps Electron en vivo (screencast por CDP, input de mouse y teclado, captura con el marco nativo) y MCP para que un agente las maneje.",
+  "version": "1.1.0",
+  "description": "Visor web de apps Electron en vivo (screencast por CDP, input de mouse y teclado, logs y árbol de accesibilidad) y MCP para que un agente las maneje.",
   "type": "module",
   "main": "server.js",
   "bin": {
@@ -22,7 +22,7 @@
     "start": "node bin/electron-viewer.js",
     "mcp": "node bin/electron-viewer.js mcp",
     "example": "node bin/electron-viewer.js --project example",
-    "check": "node --check bin/electron-viewer.js && node --check server.js && node --check lib/cdp.js && node --check lib/electron.js && node --check mcp/server.js && node --check public/viewer.js",
+    "check": "node --check bin/electron-viewer.js && node --check server.js && node --check lib/cdp.js && node --check lib/electron.js && node --check mcp/server.js && node --check public/viewer.js && node scripts/check-version.js",
     "prepare": "git config core.hooksPath .githooks || exit 0"
   },
   "keywords": [

package/public/index.html

@@ -8,7 +8,7 @@
   </head>
   <body>
     <header class="bar">
-      <select id="window" aria-label="Window"></select>
+      <select id="window" aria-label="Window" data-tip="App window to show"></select>
       <button id="launch-top" class="primary" hidden>Launch</button>
       <span id="status" aria-live="polite"></span>
     </header>
@@ -27,16 +27,18 @@
     </main>
     <footer class="bar controls">
       <div class="group" role="group" aria-label="Page">
-        <button id="reload" title="Reload">
+        <button id="reload" aria-label="Reload" data-tip="Reload the page">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 5v5h-5" /><path d="M18.5 15a7 7 0 1 1-1.2-7.4L20 10" /></svg>
         </button>
-        <button id="devtools" title="Toggle DevTools">
+        <button id="devtools" aria-label="DevTools" data-tip="Open or close DevTools">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 8-4 4 4 4M15 8l4 4-4 4" /></svg>
         </button>
       </div>
       <div class="group" role="group" aria-label="Window size">
-        <select id="size" title="Window size">
+        <select id="size" aria-label="Window size" data-tip="Resize the window content (emulated when the window can't reach the size)">
           <option value="">Window size</option>
+          <option value="1920x1080">1920 × 1080</option>
+          <option value="1080x1920">1080 × 1920</option>
           <option value="1440x900">1440 × 900</option>
           <option value="1280x800">1280 × 800</option>
           <option value="1024x768">1024 × 768</option>
@@ -44,15 +46,18 @@
           <option value="390x844">390 × 844</option>
         </select>
       </div>
-      <div class="group" role="group" aria-label="Capture">
-        <button id="frame" title="Show the native window frame, menus and dialogs (needs the main process)" aria-pressed="false">
-          <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2" /><path d="M3.5 9h17" /></svg>
+      <div class="group" role="group" aria-label="Input">
+        <button id="touch" aria-label="Touch" data-tip="Send the pointer as touch (tap, swipe, long press)" aria-pressed="false">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 11V5.5a1.5 1.5 0 0 1 3 0V11m0-1.5a1.5 1.5 0 0 1 3 0V12m0-1a1.5 1.5 0 0 1 3 0v3.5a6 6 0 0 1-6 6h-.5a6 6 0 0 1-5-2.7L4.4 14a1.5 1.5 0 0 1 2.4-1.8L9 14.5" /></svg>
         </button>
-        <button id="screenshot" title="Save screenshot (PNG)">
+      </div>
+      <div class="group" role="group" aria-label="Capture">
+        <button id="screenshot" aria-label="Screenshot" data-tip="Save a screenshot (PNG)">
           <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 8h3l2-2.5h6L17 8h3v11H4z" /><circle cx="12" cy="13" r="3.5" /></svg>
         </button>
       </div>
     </footer>
+    <div id="tip" role="tooltip" hidden></div>
     <script type="module" src="viewer.js"></script>
   </body>
 </html>

package/public/style.css

@@ -197,10 +197,6 @@ button:disabled {
   outline-offset: -2px;
 }
 
-#screen.native {
-  cursor: default;
-}
-
 .group select {
   border-radius: 6px;
   cursor: pointer;
@@ -232,3 +228,19 @@ button:disabled {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 12px;
 }
+
+/* Tooltip propio: el panel de navegador de algunas apps no muestra el de `title`. */
+#tip {
+  position: fixed;
+  z-index: 10;
+  max-width: min(320px, calc(100vw - 16px));
+  padding: 5px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--text);
+  color: var(--bg);
+  font-size: 12px;
+  line-height: 1.35;
+  pointer-events: none;
+  white-space: normal;
+}

package/public/viewer.js

@@ -10,7 +10,7 @@ const launchButton = $('#launch');
 const launchTop = $('#launch-top');
 const attachForm = $('#attach');
 const sizeSelect = $('#size');
-const frameButton = $('#frame');
+const touchButton = $('#touch');
 const controls = $('.controls');
 
 const TARGETS_REFRESH_MS = 3000;
@@ -96,15 +96,12 @@ function renderStatus(text) {
   }
   if (!meta || performance.now() < noteUntil) return;
   statusEl.title = '';
-  statusEl.textContent = `${meta.width}×${meta.height}${meta.frame ? ' · frame' : ''} · ${fps} fps`;
+  statusEl.textContent = `${meta.width}×${meta.height}${touchMode ? ' · touch' : ''} · ${fps} fps`;
 }
 
 function onJson(msg) {
   if (msg.type === 'meta') {
     meta = msg;
-    frameButton.setAttribute('aria-pressed', String(Boolean(msg.frame)));
-    frameButton.disabled = !msg.app?.main;
-    canvas.classList.toggle('native', Boolean(msg.frame));
     sizeSelect.options[0].textContent = `Window size (${msg.width} × ${msg.height})`;
     renderStatus();
   } else if (msg.type === 'error') {
@@ -130,7 +127,6 @@ function showMessage(text, { launch = false } = {}) {
 
 function setControlsEnabled(enabled) {
   controls.querySelectorAll('button, select').forEach((b) => (b.disabled = !enabled));
-  if (enabled) frameButton.disabled = !selected()?.app.main;
 }
 
 function disconnect() {
@@ -164,7 +160,7 @@ function renderLaunch() {
   launchTop.hidden = !project?.launchable;
   launchTop.disabled = !can;
   launchTop.textContent = launching ? 'Launching…' : `Launch ${project?.name ?? 'app'}`;
-  launchTop.title = project ? `electron . in ${project.dir}` : '';
+  launchTop.dataset.tip = project ? `Run ${project.command} in ${project.dir}` : '';
   launchButton.textContent = launchTop.textContent;
 }
 
@@ -274,16 +270,15 @@ $('#devtools').onclick = async () => {
 sizeSelect.onchange = async () => {
   const [width, height] = sizeSelect.value ? sizeSelect.value.split('x').map(Number) : [0, 0];
   sizeSelect.value = '';
-  await control('resize', { width, height });
+  const result = await control('resize', { width, height });
+  if (result?.note) renderStatus(result.note);
 };
 
-frameButton.onclick = () => send({ type: 'frame', on: !meta?.frame });
-
 $('#screenshot').onclick = async () => {
   if (!windowId) return;
   renderStatus('Saving screenshot…');
   try {
-    const res = await api('GET', `screenshot?window=${encodeURIComponent(windowId)}${meta?.frame ? '&frame=1' : ''}`);
+    const res = await api('GET', `screenshot?window=${encodeURIComponent(windowId)}`);
     const a = document.createElement('a');
     a.href = URL.createObjectURL(await res.blob());
     const name = (selected()?.app.name || 'electron').replace(/[^\w.-]+/g, '-');
@@ -299,8 +294,7 @@ $('#screenshot').onclick = async () => {
 
 // ---------- Input ----------
 
-// Posición normalizada (0–1) dentro del contenido de la ventana, descontando el letterbox de
-// object-fit y, en modo marco, la barra de título y los bordes.
+// Posición normalizada (0–1) dentro del contenido de la ventana, descontando el letterbox de object-fit.
 function toNorm(e) {
   const r = canvas.getBoundingClientRect();
   const ar = canvas.width / canvas.height;
@@ -315,13 +309,8 @@ function toNorm(e) {
     h = w / ar;
     oy = (r.height - h) / 2;
   }
-  let x = (e.clientX - r.left - ox) / w;
-  let y = (e.clientY - r.top - oy) / h;
-  const c = meta?.frame && meta.content;
-  if (c) {
-    x = (x - c.x) / c.width;
-    y = (y - c.y) / c.height;
-  }
+  const x = (e.clientX - r.left - ox) / w;
+  const y = (e.clientY - r.top - oy) / h;
   return { x, y };
 }
 
@@ -334,6 +323,32 @@ function modifiersOf(e) {
 let lastDown = null;
 let pressed = false;
 
+// Modo touch: el puntero del visor se manda como un dedo (Input.dispatchTouchEvent). Se recuerda
+// en este navegador.
+let touchMode = false;
+try {
+  touchMode = localStorage.getItem('electron-viewer:touch') === '1';
+} catch {
+  // sin almacenamiento: empieza en mouse
+}
+
+function renderTouch() {
+  touchButton.setAttribute('aria-pressed', String(touchMode));
+  touchButton.dataset.tip = touchMode ? 'Touch mode on: the pointer is a finger. Click to use the mouse' : 'Send the pointer as touch (tap, swipe, long press)';
+  canvas.style.cursor = touchMode ? 'pointer' : '';
+  renderStatus();
+}
+
+touchButton.onclick = () => {
+  touchMode = !touchMode;
+  try {
+    localStorage.setItem('electron-viewer:touch', touchMode ? '1' : '0');
+  } catch {
+    // no se recuerda
+  }
+  renderTouch();
+};
+
 canvas.addEventListener('pointerdown', (e) => {
   if (!meta || !canvas.width) return;
   keys.focus({ preventScroll: true });
@@ -342,6 +357,11 @@ canvas.addEventListener('pointerdown', (e) => {
   e.preventDefault();
   canvas.setPointerCapture(e.pointerId);
   pressed = true;
+  if (touchMode) {
+    if (e.button === 0) send({ type: 'touch', action: 'start', ...p });
+    else pressed = false;
+    return;
+  }
   const button = BUTTONS[e.button] || 'left';
   const now = performance.now();
   const near = lastDown && Math.hypot(e.clientX - lastDown.cx, e.clientY - lastDown.cy) < DOUBLE_CLICK_SLOP_PX;
@@ -354,6 +374,10 @@ canvas.addEventListener('pointerup', (e) => {
   if (!pressed) return;
   pressed = false;
   const p = toNorm(e);
+  if (touchMode) {
+    send({ type: 'touch', action: 'end', ...p });
+    return;
+  }
   send({ type: 'mouse', action: 'up', x: p.x, y: p.y, button: BUTTONS[e.button] || 'left', buttons: e.buttons, clickCount: lastDown?.count || 1, modifiers: modifiersOf(e) });
 });
 
@@ -370,11 +394,19 @@ function flushMove() {
   moveEvent = null;
   if (!e) return;
   const p = toNorm(e);
+  if (touchMode) {
+    // Un dedo solo se mueve apoyado: sin hover.
+    if (pressed) send({ type: 'touch', action: 'move', ...p });
+    return;
+  }
   if (!pressed && !inside(p)) return;
   send({ type: 'mouse', action: 'move', ...p, buttons: e.buttons, modifiers: modifiersOf(e) });
 }
 
-canvas.addEventListener('pointercancel', () => (pressed = false));
+canvas.addEventListener('pointercancel', (e) => {
+  if (pressed && touchMode) send({ type: 'touch', action: 'cancel', ...toNorm(e) });
+  pressed = false;
+});
 canvas.addEventListener('contextmenu', (e) => e.preventDefault());
 
 let wheel = null;
@@ -430,6 +462,46 @@ keys.addEventListener('compositionend', () => {
   keys.value = '';
 });
 
+// ---------- Tooltips ----------
+// Uno solo, colocado junto al control bajo el puntero o con el foco del teclado. Se usa
+// pointerover en el documento porque los botones deshabilitados no reciben eventos propios.
+
+const tip = $('#tip');
+let tipFor = null;
+
+function showTip(el) {
+  const text = el?.dataset.tip;
+  if (!text) return hideTip();
+  tipFor = el;
+  tip.textContent = text;
+  tip.hidden = false;
+  const r = el.getBoundingClientRect();
+  const t = tip.getBoundingClientRect();
+  const gap = 6;
+  // Debajo si cabe (barra de arriba), si no encima (controles de abajo).
+  const top = r.bottom + gap + t.height <= innerHeight ? r.bottom + gap : r.top - gap - t.height;
+  const left = Math.min(innerWidth - t.width - 8, Math.max(8, r.left + r.width / 2 - t.width / 2));
+  tip.style.top = `${Math.max(8, top)}px`;
+  tip.style.left = `${left}px`;
+}
+
+function hideTip() {
+  tipFor = null;
+  tip.hidden = true;
+}
+
+document.addEventListener('pointerover', (e) => {
+  const el = e.target.closest?.('[data-tip]');
+  if (el !== tipFor) el ? showTip(el) : hideTip();
+});
+document.addEventListener('pointerdown', hideTip);
+document.addEventListener('focusin', (e) => (e.target.matches?.(':focus-visible') ? showTip(e.target.closest('[data-tip]')) : hideTip()));
+document.addEventListener('focusout', hideTip);
+addEventListener('blur', hideTip);
+// Con otro tamaño de página la posición ya no vale.
+addEventListener('resize', hideTip);
+
+renderTouch();
 setControlsEnabled(false);
 await loadProject();
 refreshTargets();

package/server.js

@@ -1,7 +1,6 @@
 // Visor web de apps Electron.
 // Video: `Page.startScreencast` (JPEG) de la ventana elegida, reenviado por WebSocket a un canvas.
-// Modo marco: capturas de pantalla del área de la ventana desde el proceso main (desktopCapturer),
-// con barra de título, menús y diálogos nativos. Input: `Input.dispatchMouseEvent` y `Input.dispatchKeyEvent`.
+// Input: `Input.dispatchMouseEvent` y `Input.dispatchKeyEvent`.
 
 import http from 'node:http';
 import path from 'node:path';
@@ -10,9 +9,9 @@ import { fileURLToPath } from 'node:url';
 import { WebSocketServer } from 'ws';
 import {
   attachApp,
-  captureNative,
   createActions,
   dispatchKey,
+  dispatchTouch,
   pageClient,
   projectInfo,
   resolveWindow,
@@ -26,11 +25,9 @@ const HOST = process.env.HOST || '127.0.0.1';
 const PROJECT = process.env.ELECTRON_VIEWER_PROJECT || process.cwd();
 const MAX_DIM = Number(process.env.MAX_DIM) || 1920; // lado mayor de los frames del screencast
 const QUALITY = Number(process.env.QUALITY) || 80; // calidad JPEG
-const NATIVE_INTERVAL_MS = 250; // modo marco: una captura cada 250 ms como mucho
 const MAX_CLIENT_BUFFER = 4 * 1024 * 1024;
 const MAX_BODY_BYTES = 256 * 1024;
 const FLAG_SCREENCAST = 0;
-const FLAG_NATIVE = 1;
 
 const LOOPBACK = ['localhost', '127.0.0.1', '[::1]', '::1'];
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
@@ -50,10 +47,9 @@ class WindowSession {
     this.ready = null;
     this.viewport = null;
     this.lastFrame = null;
-    this.frameMode = false;
-    this.content = null; // área del contenido dentro de la captura nativa
     this.queue = Promise.resolve();
     this.pendingMove = null;
+    this.pendingTouch = null;
     this.onScreencast = (e) => this.handleScreencast(e);
     this.onClose = () => {
       log(this.app.name, this.id.slice(0, 8), 'window closed');
@@ -98,7 +94,6 @@ class WindowSession {
   dispose() {
     if (this.disposed) return;
     this.disposed = true;
-    this.frameMode = false;
     sessions.delete(this.key);
     const page = this.page;
     if (!page) return;
@@ -116,14 +111,11 @@ class WindowSession {
       app: { id: this.app.id, name: this.app.name, main: this.app.main },
       width: this.viewport?.width,
       height: this.viewport?.height,
-      frame: this.frameMode,
-      content: this.frameMode ? this.content : null,
     };
   }
 
   handleScreencast({ data, metadata, sessionId }) {
     this.page.send('Page.screencastFrameAck', { sessionId }).catch(() => {});
-    if (this.frameMode) return;
     const { deviceWidth: width, deviceHeight: height } = metadata;
     if (width && height && (width !== this.viewport?.width || height !== this.viewport?.height)) {
       this.viewport = { ...this.viewport, width, height };
@@ -141,41 +133,6 @@ class WindowSession {
     }
   }
 
-  async setFrameMode(on) {
-    if (on === this.frameMode) return;
-    if (on && !this.app.main) throw new Error('Frame capture needs the main process: launch the app from the viewer or attach with an inspect port');
-    this.frameMode = on;
-    if (on) {
-      await this.page.send('Page.stopScreencast').catch(() => {});
-      this.nativeLoop();
-    } else {
-      this.content = null;
-      await this.startScreencast();
-    }
-    this.broadcastJson(this.meta());
-  }
-
-  async nativeLoop() {
-    while (this.frameMode && !this.disposed) {
-      const started = Date.now();
-      try {
-        const shot = await captureNative(this.app, this.id, { format: 'jpeg', quality: QUALITY, maxDim: MAX_DIM });
-        if (!this.frameMode) break;
-        if (JSON.stringify(shot.content) !== JSON.stringify(this.content)) {
-          this.content = shot.content;
-          this.broadcastJson(this.meta());
-        }
-        this.broadcastFrame(FLAG_NATIVE, shot.data);
-      } catch (err) {
-        log(this.app.name, 'frame capture failed:', err.message);
-        this.broadcastJson({ type: 'error', message: err.message });
-        await this.setFrameMode(false).catch(() => {});
-        break;
-      }
-      await sleep(Math.max(0, NATIVE_INTERVAL_MS - (Date.now() - started)));
-    }
-  }
-
   send(ws, obj) {
     if (ws.readyState === ws.OPEN) ws.send(JSON.stringify(obj));
   }
@@ -208,6 +165,7 @@ class WindowSession {
           this.enqueue(() => {
             const m = this.pendingMove;
             this.pendingMove = null;
+    this.pendingTouch = null;
             const pressed = Object.keys(BUTTON_BITS).find((b) => m.buttons & BUTTON_BITS[b]) || 'none';
             return this.page.send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: m.x, y: m.y, modifiers: m.modifiers, buttons: m.buttons, button: pressed });
           });
@@ -226,6 +184,26 @@ class WindowSession {
         }
         break;
       }
+      case 'touch': {
+        // Un dedo, como el puntero del visor. Los movimientos se fusionan igual que los del mouse.
+        const p = this.point(msg);
+        const type = { start: 'touchStart', move: 'touchMove', end: 'touchEnd', cancel: 'touchCancel' }[msg.action];
+        if (!type) return;
+        if (type === 'touchMove') {
+          const queued = this.pendingTouch;
+          this.pendingTouch = p;
+          if (queued) return;
+          this.enqueue(() => {
+            const next = this.pendingTouch;
+            this.pendingTouch = null;
+            return dispatchTouch(this.page, 'touchMove', [next]);
+          });
+        } else {
+          this.pendingTouch = null;
+          this.enqueue(() => dispatchTouch(this.page, type, [p]));
+        }
+        break;
+      }
       case 'wheel': {
         const { x, y } = this.point(msg);
         this.enqueue(() =>
@@ -251,14 +229,6 @@ class WindowSession {
       case 'text':
         if (typeof msg.text === 'string' && msg.text) this.enqueue(() => this.page.send('Input.insertText', { text: msg.text.slice(0, 10000) }));
         break;
-      case 'frame':
-        try {
-          await this.setFrameMode(Boolean(msg.on));
-        } catch (err) {
-          this.send(ws, { type: 'error', message: err.message });
-          this.send(ws, this.meta());
-        }
-        break;
     }
   }
 }
@@ -279,6 +249,10 @@ const API = {
   'POST /api/click': actions.click,
   'POST /api/drag': actions.drag,
   'POST /api/hover': actions.hover,
+  'POST /api/tap': actions.tap,
+  'POST /api/swipe': actions.swipe,
+  'POST /api/long-press': actions.longPress,
+  'POST /api/pinch': actions.pinch,
   'POST /api/scroll': actions.scroll,
   'POST /api/text': actions.text,
   'POST /api/key': actions.key,
@@ -343,7 +317,6 @@ async function handleApi(req, res, url) {
       'x-window': shot.window,
     };
     if (shot.viewport) Object.assign(headers, { 'x-viewport-width': shot.viewport.width, 'x-viewport-height': shot.viewport.height });
-    if (shot.content) headers['x-content'] = JSON.stringify(shot.content);
     res.writeHead(200, headers);
     res.end(shot.data);
     return;