getobsrv 0.11.0 → 0.13.0

package/out/main/{targetSource-nbfc-Fe6.js → targetSource-DuRYHUo8.js}

@@ -5,6 +5,8 @@ const node_path = require("node:path");
 const MAX_VIEWPORT = 4096;
 const SPLIT_MIN = 0.1;
 const SPLIT_MAX = 0.9;
+const MAX_TABS_MIN = 2;
+const MAX_TABS_MAX = 32;
 const DEFAULT_SETTINGS = {
   hostDiagonalInches: 27,
   hostNits: 500,
@@ -12,8 +14,13 @@ const DEFAULT_SETTINGS = {
   updateCheck: true,
   lastUpdateCheck: 0,
   recordHistory: true,
-  split: 0.5
+  split: 0.5,
+  maxTabs: 12
 };
+const DEFAULT_ORIENTATION = "portrait";
+function isOrientation(v) {
+  return v === "portrait" || v === "landscape";
+}
 const SCREEN_PRESETS = [
   // Laptops — ordered largest to smallest panel, then the denser 1080p outlier.
   { id: "laptop-768", label: '1366×768 15.6"', width: 1366, height: 768, diagonalInches: 15.6, deviceScaleFactor: 1, group: "laptop" },
@@ -52,6 +59,9 @@ function findProfile(id) {
   if (!p) throw new Error(`unknown profile: ${id}`);
   return p;
 }
+function screenShape(width, height) {
+  return width > height ? "landscape" : "portrait";
+}
 function maxCssViewport(deviceScaleFactor) {
   const dsf = Number.isFinite(deviceScaleFactor) && deviceScaleFactor > 1 ? deviceScaleFactor : 1;
   return Math.max(1, Math.floor(MAX_VIEWPORT / dsf));
@@ -144,6 +154,12 @@ class TargetSource extends node_events.EventEmitter {
    */
   internal = false;
   disposed = false;
+  /**
+   * What the owner asked for, not what the current window happens to be doing.
+   * See `setPainting` — `recreate()` swaps in a fresh webContents that starts
+   * painting, so the wish has to outlive the window that was serving it.
+   */
+  paintingWanted = true;
   constructor(fps = DEFAULT_FPS, options = {}) {
     super();
     this.fps = fps;
@@ -171,6 +187,7 @@ class TargetSource extends node_events.EventEmitter {
     this.firstNavDone = false;
     const wc = win.webContents;
     wc.setFrameRate(this.fps);
+    if (!this.paintingWanted) wc.stopPainting();
     wc.setAudioMuted(true);
     this.defaultUserAgent ??= wc.getUserAgent();
     wc.setUserAgent(this.dsf > 1 && this.mobileEmulation ? MOBILE_USER_AGENT : this.defaultUserAgent);
@@ -245,6 +262,16 @@ class TargetSource extends node_events.EventEmitter {
       if (this.win === win) this.firstNavDone = true;
     });
   }
+  /**
+   * Resolves once this window's own initial `about:blank` has committed.
+   * A navigation issued before that lands is undone by it — the commit
+   * arrives late and `SyncBus` mirrors it into the native pane — so a caller
+   * that builds a source and immediately drives it waits here first. Follows
+   * the current window: a dsf change swaps in a fresh one with a fresh gate.
+   */
+  get ready() {
+    return this.firstNavigation;
+  }
   /**
    * Mobile viewport semantics for dsf > 1 (see class doc). Post-commit only:
    * enabling emulation before a window's first navigation commits segfaults
@@ -344,6 +371,26 @@ class TargetSource extends node_events.EventEmitter {
   getDeviceScaleFactor() {
     return this.dsf;
   }
+  /**
+   * Stops or resumes rasterisation without touching the page. Offscreen
+   * rendering runs at a fixed frame rate with `backgroundThrottling: false`,
+   * so a source nobody is looking at would otherwise paint a full viewport
+   * forever for nobody. The page keeps its DOM, timers, network and scroll —
+   * only pixel production stops.
+   */
+  setPainting(painting) {
+    if (this.paintingWanted === painting) return;
+    this.paintingWanted = painting;
+    if (this.win.isDestroyed()) return;
+    const wc = this.win.webContents;
+    if (wc.isDestroyed()) return;
+    if (painting) wc.startPainting();
+    else wc.stopPainting();
+  }
+  /** What was last asked of `setPainting`, not what the window is doing. */
+  get painting() {
+    return this.paintingWanted;
+  }
   /** Forces a full-frame repaint, e.g. after the renderer loses its texture. */
   invalidate() {
     if (!this.win.isDestroyed()) this.win.webContents.invalidate();
@@ -370,8 +417,11 @@ class TargetSource extends node_events.EventEmitter {
   }
 }
 exports.ALLOWED_URL_SCHEMES = ALLOWED_URL_SCHEMES;
+exports.DEFAULT_ORIENTATION = DEFAULT_ORIENTATION;
 exports.DEFAULT_SETTINGS = DEFAULT_SETTINGS;
 exports.IMAGE_EXTENSIONS = IMAGE_EXTENSIONS;
+exports.MAX_TABS_MAX = MAX_TABS_MAX;
+exports.MAX_TABS_MIN = MAX_TABS_MIN;
 exports.PANEL_PROFILES = PANEL_PROFILES;
 exports.SCREEN_PRESETS = SCREEN_PRESETS;
 exports.SPLIT_MAX = SPLIT_MAX;
@@ -380,6 +430,8 @@ exports.TargetSource = TargetSource;
 exports.classifyFileNavigation = classifyFileNavigation;
 exports.findPreset = findPreset;
 exports.findProfile = findProfile;
+exports.isOrientation = isOrientation;
 exports.maxCssViewport = maxCssViewport;
 exports.normalizeUrl = normalizeUrl;
+exports.screenShape = screenShape;
 exports.urlSchemeError = urlSchemeError;

package/out/mcp/lib.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PANE_CAPTURE_HEADLESS_NOTE = exports.APP_NOT_REACHABLE = exports.urlSchemeError = exports.ALLOWED_URL_SCHEMES = exports.STDERR_TAIL_CHARS = exports.MAX_INLINE_IMAGE_BYTES = exports.UsageError = void 0;
+exports.ORIENTATION_NOTE = exports.PANE_CAPTURE_HEADLESS_NOTE = exports.APP_NOT_REACHABLE = exports.urlSchemeError = exports.ALLOWED_URL_SCHEMES = exports.STDERR_TAIL_CHARS = exports.MAX_INLINE_IMAGE_BYTES = exports.UsageError = void 0;
 exports.buildSnapArgs = buildSnapArgs;
 exports.buildDiffArgs = buildDiffArgs;
 exports.shouldInlineImage = shouldInlineImage;
@@ -46,6 +46,8 @@ function buildSnapArgs(input, outPath) {
     const args = ['snap', input.url];
     if (input.preset !== undefined)
         args.push('--preset', input.preset);
+    if (input.orientation !== undefined)
+        args.push('--orientation', input.orientation);
     if (custom) {
         args.push('--width', String(input.width), '--height', String(input.height));
         if (input.deviceScaleFactor !== undefined)
@@ -170,9 +172,20 @@ function extractTrailingJson(stdout) {
     }
     return null;
 }
+/**
+ * What `obsrv_presets` says about rotation. Stated once here rather than
+ * repeated per entry: it is true of every preset in the table, and a field
+ * saying "rotatable: true" fourteen times would carry less than one sentence.
+ */
+exports.ORIENTATION_NOTE = 'cssWidth/cssHeight are each preset\'s natural orientation — portrait for every mobile preset, ' +
+    'landscape for the monitor and laptop ones. Every preset rotates: pass orientation: "landscape" ' +
+    'to obsrv_snap or obsrv_drive to swap the two axes a quarter turn. Rotation changes nothing else — ' +
+    'the diagonal, deviceScaleFactor, ppi and physical size are all orientation-independent, so a ' +
+    'rotated screen is the same panel turned sideways rather than a different one.';
 /** The `obsrv_presets` payload, straight from src/shared/presets.ts — no spawn. */
 function listCatalog() {
     return {
+        orientation: exports.ORIENTATION_NOTE,
         presets: presets_1.SCREEN_PRESETS.map(p => ({
             id: p.id,
             label: p.label,

package/out/mcp/server.js

@@ -97,12 +97,21 @@ const profileField = zod_1.z
     .enum(PROFILE_IDS)
     .optional()
     .describe('Panel simulation (contrast floor, gamut, bit depth, brightness). Default: reference (off).');
+const orientationField = zod_1.z
+    .enum(['portrait', 'landscape'])
+    .optional()
+    .describe('Rotate the screen a quarter turn (default portrait). Presets store their natural orientation — ' +
+    'portrait for every mobile preset, landscape for the monitors and laptops — and this swaps the CSS ' +
+    "viewport's two axes on top of that. Nothing else changes: the diagonal, raster density and physical " +
+    'size are orientation-independent, so it is the same panel turned sideways. Use it to check a ' +
+    'landscape phone layout, or a monitor stood on end.');
 const snapInputShape = {
     url: urlField,
     preset: zod_1.z
         .enum(PRESET_IDS)
         .optional()
         .describe('Screen preset id (list them with obsrv_presets). Mutually exclusive with width/height. Default: 1080p-24.'),
+    orientation: orientationField,
     width: zod_1.z.number().int().min(1).optional().describe('Custom CSS viewport width in px. Needs height; mutually exclusive with preset.'),
     height: zod_1.z.number().int().min(1).optional().describe('Custom CSS viewport height in px. Needs width.'),
     deviceScaleFactor: zod_1.z
@@ -138,8 +147,24 @@ const snapOutputShape = {
         .describe('How the snap was produced: a headless render, or a capture of the visible Obsrv app window (live drive).'),
     out: zod_1.z.string().optional().describe('Headless only: PNG path the CLI wrote (same file as pngPath).'),
     preset: zod_1.z.string().optional().describe('Headless only: preset id, or "custom" for width/height runs.'),
-    cssWidth: zod_1.z.number().optional().describe('Headless only: applied CSS viewport width.'),
-    cssHeight: zod_1.z.number().optional().describe('Headless only: applied CSS viewport height (grown under fullPage).'),
+    cssWidth: zod_1.z
+        .number()
+        .optional()
+        .describe('Applied CSS viewport width, already rotated. Headless: grown under fullPage. Live: what the app is rendering.'),
+    cssHeight: zod_1.z
+        .number()
+        .optional()
+        .describe('Applied CSS viewport height, already rotated. Headless: grown under fullPage. Live: what the app is rendering.'),
+    orientation: zod_1.z
+        .string()
+        .optional()
+        .describe("Live only: the app's rotation flag — 'portrait' (the preset as its table stores it) or 'landscape' " +
+        '(rotated a quarter turn). See `screenShape` for the shape that produced. Headless runs report the ' +
+        'applied `cssWidth`/`cssHeight` instead, which say the same thing exactly.'),
+    screenShape: zod_1.z.string().optional().describe('Live only. ' + "The shape the screen actually has: 'portrait' or 'landscape'. Derived from the CSS dimensions, not from " +
+        "the `orientation` flag beside it — the flag means 'the preset as its table stores it' vs 'rotated a " +
+        "quarter turn', so for a landscape-natural monitor preset the two diverge (a fresh 1080p-24 tab is " +
+        "orientation 'portrait' on a 1920x1080 landscape screen). Report this word to the user, not the flag."),
     deviceScaleFactor: zod_1.z.number().optional().describe('Headless only.'),
     profile: zod_1.z.string().optional().describe('Headless only: applied panel profile id.'),
     settled: zod_1.z
@@ -161,6 +186,8 @@ const snapOutputShape = {
     profileId: zod_1.z.string().optional().describe('Live only: the panel profile selected in the app.'),
     viewMode: zod_1.z.string().optional().describe("Live only: the app's target-pane view (1:1 or fit)."),
     panes: zod_1.z.string().optional().describe("Live only: 'both' (native pane beside the target) or 'target' (the target render has the whole window)."),
+    tabId: zod_1.z.string().optional().describe('Live only: which of the app\'s tabs was captured (the active one). Empty from an app older than tabs.'),
+    tabIndex: zod_1.z.number().optional().describe("Live only: that tab's 0-based position in the strip."),
     width: zod_1.z
         .number()
         .optional()
@@ -216,6 +243,9 @@ const diffOutputShape = {
     findings: zod_1.z.array(zod_1.z.string()).describe('Humanised per-band findings. Informational — thresholds are the caller\'s job.'),
 };
 const presetsOutputShape = {
+    orientation: zod_1.z
+        .string()
+        .describe('How the cssWidth/cssHeight below relate to rotation, and how to ask for the other orientation.'),
     presets: zod_1.z.array(zod_1.z.object({
         id: zod_1.z.string(),
         label: zod_1.z.string(),
@@ -244,6 +274,7 @@ const driveInputShape = {
         .optional()
         .describe('Navigate the app (both panes) to this http://, https:// or file:// URL (bare hosts also work).'),
     preset: zod_1.z.enum(PRESET_IDS).optional().describe('Apply this screen preset, exactly as clicking the toolbar would.'),
+    orientation: orientationField,
     profile: zod_1.z.enum(PROFILE_IDS).optional().describe('Apply this panel profile in the app.'),
     viewMode: zod_1.z.enum(['1:1', 'fit']).optional().describe("Switch the app's target pane between 1:1 (actual size) and fit."),
     panes: zod_1.z
@@ -307,9 +338,28 @@ const driveOutputShape = {
     url: zod_1.z.string().describe('The URL the target pane reports showing.'),
     presetId: zod_1.z.string(),
     profileId: zod_1.z.string(),
+    orientation: zod_1.z
+        .string()
+        .describe("The rotation flag: 'portrait' (the preset as its table stores it) or 'landscape' (rotated a quarter " +
+        "turn). This is what to pass back to change it — for the shape the screen actually has, read " +
+        '`screenShape`. Reported as \'portrait\' by an app older than rotation, which is what such an app shows.'),
+    screenShape: zod_1.z.string().describe("The shape the screen actually has: 'portrait' or 'landscape'. Derived from the CSS dimensions, not from " +
+        "the `orientation` flag beside it — the flag means 'the preset as its table stores it' vs 'rotated a " +
+        "quarter turn', so for a landscape-natural monitor preset the two diverge (a fresh 1080p-24 tab is " +
+        "orientation 'portrait' on a 1920x1080 landscape screen). Report this word to the user, not the flag."),
+    cssWidth: zod_1.z
+        .number()
+        .describe('The CSS viewport the target is rendering at, already rotated. 0 from an app that predates the field.'),
+    cssHeight: zod_1.z.number().describe('The CSS viewport height, already rotated. 0 from an app that predates the field.'),
     viewMode: zod_1.z.string(),
     panes: zod_1.z.string(),
     mode: zod_1.z.string().describe("The app's pane mode: 'url' (live page) or 'image' (a dropped design export)."),
+    tabId: zod_1.z
+        .string()
+        .describe('Which of the app\'s tabs this acted on. Every command resolves the active tab as it arrives, so a tabId ' +
+        'that changed between two calls means the user switched tabs under you. Empty string from an app older ' +
+        'than tabs, which has only one.'),
+    tabIndex: zod_1.z.number().describe('That tab\'s 0-based position in the strip.'),
     scrolled: zod_1.z
         .object({ x: zod_1.z.number(), y: zod_1.z.number() })
         .nullable()
@@ -434,6 +484,9 @@ async function liveSnap(app, input, notes) {
         }
         if (input.preset !== undefined)
             await (0, control_2.controlCall)(info, 'setPreset', { id: input.preset }, LIVE_APPLY_TIMEOUT_MS);
+        if (input.orientation !== undefined) {
+            await (0, control_2.controlCall)(info, 'setOrientation', { orientation: input.orientation }, LIVE_APPLY_TIMEOUT_MS);
+        }
         if (input.profile !== undefined)
             await (0, control_2.controlCall)(info, 'setProfile', { id: input.profile }, LIVE_APPLY_TIMEOUT_MS);
     }
@@ -480,8 +533,14 @@ async function liveSnap(app, input, notes) {
         url: status.url,
         presetId: status.presetId,
         profileId: status.profileId,
+        orientation: status.orientation,
+        screenShape: status.screenShape,
+        cssWidth: status.cssWidth,
+        cssHeight: status.cssHeight,
         viewMode: status.viewMode,
         panes: status.panes,
+        tabId: status.tabId,
+        tabIndex: status.tabIndex,
         width,
         height,
         settled,
@@ -505,7 +564,8 @@ server.registerTool('obsrv_snap', {
         `presets, the device's 2x/3x DPR plus mobile UA and viewport semantics for phone presets — optionally ` +
         `through a cheap-panel simulation, and return the PNG. Use it to judge how a page actually looks on the ` +
         `screens users own (1366×768 laptops, 1080p desktops, budget Androids) before declaring frontend work done.\n\n` +
-        `Pass either \`preset\` (list ids with obsrv_presets) or custom \`width\` + \`height\`, never both. ` +
+        `Pass either \`preset\` (list ids with obsrv_presets) or custom \`width\` + \`height\`, never both; either can be ` +
+        `rotated with \`orientation: "landscape"\`, which is how you check a phone's landscape layout. ` +
         `Returns structured metadata (applied viewport, profile, \`settled\`, warnings, and \`pngPath\` — the PNG ` +
         `kept in a per-call temp dir) plus the PNG as an inline image when it is within the 1.5 MiB cap; larger ` +
         `captures (typically fullPage) stay on disk with a note.\n\n` +
@@ -520,7 +580,11 @@ server.registerTool('obsrv_snap', {
         `capture; that visible steering is the point of live mode.\n\n` +
         `A live snap only navigates when the app is showing a different URL; the result's \`navigated\` says which ` +
         `happened. Navigating is a fresh load, so it starts at the top of the page — to photograph a scrolled or ` +
-        `panned state, use obsrv_drive with \`capture\` instead, which never navigates unless you ask it to.`,
+        `panned state, use obsrv_drive with \`capture\` instead, which never navigates unless you ask it to.\n\n` +
+        `Tabs: the app can hold several sessions open as tabs, and a live snap acts on the one in front — which the ` +
+        `user can change at any moment. The result names it (\`tabId\`, \`tabIndex\`); compare across calls if you ` +
+        `need to know it did not move. There is no way to name a different tab, and no way to open, close or ` +
+        `switch tabs — those are the user's.`,
     inputSchema: snapInputShape,
     outputSchema: snapOutputShape,
     annotations: { readOnlyHint: true, destructiveHint: false, openWorldHint: true },
@@ -621,15 +685,16 @@ server.registerTool('obsrv_diff', {
 });
 server.registerTool('obsrv_drive', {
     title: 'Drive the visible Obsrv app',
-    description: `Drive the Obsrv desktop app the user is looking at: navigate it to a URL, apply a screen preset, a panel ` +
-        `profile, the target pane's 1:1/fit view or pixel-exact toggle — each exactly as clicking the toolbar would ` +
+    description: `Drive the Obsrv desktop app the user is looking at: navigate it to a URL, apply a screen preset, rotate that ` +
+        `screen to landscape or portrait, apply a panel profile, the target pane's 1:1/fit view or pixel-exact ` +
+        `toggle — each exactly as clicking the toolbar would ` +
         `— and steer the session like a guided demo: focus the window, step history (back/forward/reload), scroll ` +
         `both panes, pan the target pane to a pixel, click the live page, and highlight a rect with a temporary ` +
         `neutral marker, all while the user watches.\n\n` +
         `Only the supplied inputs run (none = just read the current state), in this fixed order: focus → url → ` +
-        `preset → profile → viewMode → panes → pixelExact → reload → back → forward → scroll → panTo → click → highlight → ` +
+        `preset → orientation → profile → viewMode → panes → pixelExact → reload → back → forward → scroll → panTo → click → highlight → ` +
         `capture. ` +
-        `The result is the final status: app version, the URL showing, and the selected preset/profile/view. A ` +
+        `The result is the final status: app version, the URL showing, and the selected preset/orientation/profile/view. A ` +
         `click that navigates is reflected in that status — the call waits briefly (up to 2 s) for the commit. A ` +
         `scroll adds \`scrolled\` (the offset actually reached) and \`scroller\` ('root' or 'element'): compare ` +
         `\`scrolled\` with what you asked for rather than trusting the call's success, and use \`scroll.scrollSelector\` ` +
@@ -641,6 +706,12 @@ server.registerTool('obsrv_drive', {
         `pass \`url\`, so this is how you photograph a scrolled or panned state: scroll, then capture, in one call. ` +
         `obsrv_snap is the other way round — it points the app at a URL first, and pointing it somewhere new is a ` +
         `fresh load that starts at the top.\n\n` +
+        `Tabs: the app can hold several sessions open as tabs, each with its own URL, screen preset and page state. ` +
+        `Every command here acts on whichever tab is in front *when that command arrives* — nothing is bound to a ` +
+        `tab for the length of the call — and the returned status names it (\`tabId\`, \`tabIndex\`). A \`tabId\` ` +
+        `that changed between two calls means the user switched tabs under you; re-read the state before trusting ` +
+        `what you knew. You cannot name a different tab, nor open, close or switch tabs — those are the user's. An ` +
+        `empty \`tabId\` means an app older than tabs, which has only the one.\n\n` +
         `Requires the app to be open with its "Agent control" toolbar toggle on; errors otherwise. This tool ` +
         `mutates visible app state (it changes what the user's window shows, and a click can act on the live page).`,
     inputSchema: driveInputShape,
@@ -666,6 +737,12 @@ server.registerTool('obsrv_drive', {
         }
         if (input.preset !== undefined)
             await (0, control_2.controlCall)(live.info, 'setPreset', { id: input.preset }, LIVE_APPLY_TIMEOUT_MS);
+        // After the preset, before everything else: rotation is applied on top of
+        // whichever screen is in force, so a call carrying both has to land in
+        // that order or the rotation would be spent on the outgoing preset.
+        if (input.orientation !== undefined) {
+            await (0, control_2.controlCall)(live.info, 'setOrientation', { orientation: input.orientation }, LIVE_APPLY_TIMEOUT_MS);
+        }
         if (input.profile !== undefined)
             await (0, control_2.controlCall)(live.info, 'setProfile', { id: input.profile }, LIVE_APPLY_TIMEOUT_MS);
         if (input.viewMode !== undefined) {
@@ -757,7 +834,9 @@ server.registerTool('obsrv_presets', {
     title: 'List screen presets and panel profiles',
     description: `List every screen preset (id, label, group, CSS dims, deviceScaleFactor, panel diagonal, derived physical ` +
         `ppi) and panel profile (id, label, simulation params) accepted by obsrv_snap and obsrv_diff. Read straight ` +
-        `from the app's preset table — nothing is rendered.`,
+        `from the app's preset table — nothing is rendered. The dimensions are each preset's natural orientation ` +
+        `(portrait for the mobile ones, landscape for the monitors); every preset also rotates — see the ` +
+        `\`orientation\` note in the result.`,
     inputSchema: {},
     outputSchema: presetsOutputShape,
     annotations: { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false },

package/out/preload/app.js

@@ -16,6 +16,7 @@ const IPC = {
   frame: "obsrv:frame",
   frameSubscribe: "obsrv:frame-subscribe",
   urlChanged: "obsrv:url-changed",
+  titleChanged: "obsrv:title-changed",
   loadError: "obsrv:load-error",
   hostChanged: "obsrv:host-changed",
   targetLoading: "obsrv:target-loading",
@@ -34,7 +35,12 @@ const IPC = {
   updateStatus: "obsrv:update-status",
   getHistory: "obsrv:get-history",
   clearHistory: "obsrv:clear-history",
-  historyChanged: "obsrv:history-changed"
+  historyChanged: "obsrv:history-changed",
+  getTabs: "obsrv:get-tabs",
+  addTab: "obsrv:add-tab",
+  closeTab: "obsrv:close-tab",
+  activateTab: "obsrv:activate-tab",
+  tabsChanged: "obsrv:tabs-changed"
 };
 function subscribe(channel, cb) {
   const listener = (_e, v) => cb(v);
@@ -69,24 +75,16 @@ const api = {
   getSettings: () => electron.ipcRenderer.invoke(IPC.getSettings),
   setSettings: (s) => electron.ipcRenderer.invoke(IPC.setSettings, s),
   onFrame: subscribeFrames,
+  // Each of these names the tab it describes: main no longer gates them on the
+  // tab being in front, so a background tab keeps its own strip entry current
+  // without touching the address bar of the tab that is showing.
   onUrlChanged: (cb) => subscribe(IPC.urlChanged, cb),
+  onTitleChanged: (cb) => subscribe(IPC.titleChanged, cb),
   onLoadError: (cb) => subscribe(IPC.loadError, cb),
   onHostChanged: (cb) => subscribe(IPC.hostChanged, cb),
   onTargetLoading: (cb) => subscribe(IPC.targetLoading, cb),
-  onNativeFocused: (cb) => {
-    const listener = () => cb();
-    electron.ipcRenderer.on(IPC.nativeFocused, listener);
-    return () => {
-      electron.ipcRenderer.removeListener(IPC.nativeFocused, listener);
-    };
-  },
-  onTargetNavigating: (cb) => {
-    const listener = () => cb();
-    electron.ipcRenderer.on(IPC.targetNavigating, listener);
-    return () => {
-      electron.ipcRenderer.removeListener(IPC.targetNavigating, listener);
-    };
-  },
+  onNativeFocused: (cb) => subscribe(IPC.nativeFocused, cb),
+  onTargetNavigating: (cb) => subscribe(IPC.targetNavigating, cb),
   onOpenImage: (cb) => {
     const listener = () => cb();
     electron.ipcRenderer.on(IPC.openImage, listener);
@@ -118,6 +116,11 @@ const api = {
   onUpdateStatus: (cb) => subscribe(IPC.updateStatus, cb),
   getHistory: () => electron.ipcRenderer.invoke(IPC.getHistory),
   clearHistory: () => electron.ipcRenderer.invoke(IPC.clearHistory),
-  onHistoryChanged: (cb) => subscribe(IPC.historyChanged, cb)
+  onHistoryChanged: (cb) => subscribe(IPC.historyChanged, cb),
+  getTabs: () => electron.ipcRenderer.invoke(IPC.getTabs),
+  addTab: () => electron.ipcRenderer.invoke(IPC.addTab),
+  closeTab: (id) => electron.ipcRenderer.send(IPC.closeTab, id),
+  activateTab: (id) => electron.ipcRenderer.send(IPC.activateTab, id),
+  onTabsChanged: (cb) => subscribe(IPC.tabsChanged, cb)
 };
 electron.contextBridge.exposeInMainWorld("obsrv", api);