getobsrv 0.11.0 → 0.13.0

package/out/renderer/assets/{index-B61fbgqt.css → index-BRkFfzcI.css}

@@ -170,10 +170,12 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .warn { color: var(--warn); }
 .chrome .warn { white-space: nowrap; }
 
-/* Two strips. Browsing above; the controls that describe the simulated
-   screen below, on a darker ground so the rows read as separate registers.
-   44 + 38 = 82 must equal TOOLBAR_H in src/main/ipc.ts. Pinned heights also
-   keep a late reflow from resizing the panes under NativeSlot's observer. */
+/* Three strips. The tab strip on top — furthest from the panes, as every
+   browser puts it; browsing below it; the controls that describe the simulated
+   screen last, on a darker ground so the rows read as separate registers.
+   32 + 44 + 38 = 114 must equal TOOLBAR_H in src/main/ipc.ts. Pinned heights
+   also keep a late reflow from resizing the panes under NativeSlot's
+   observer. */
 .chrome { flex: 0 0 auto; }
 .chrome-row {
   box-sizing: border-box;
@@ -191,6 +193,107 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .chrome-screen { height: 38px; background: var(--chrome-0); }
 .chrome-spacer { flex: 1 1 auto; }
 
+/* The tab strip. Ground is the darkest chrome step so an inactive tab (one
+   step up) already reads as a raised object, and the active one has somewhere
+   further to go. Neutral throughout: a coloured tab beside the panes would
+   shift the perceived hue of the render under test, which is the one thing
+   this chrome may never do. */
+.chrome-tabs { height: 32px; gap: 4px; padding: 0 6px; background: var(--chrome-0); }
+/* The tabs scroll rather than shrink past legibility; the new-tab button is
+   outside this box so it never scrolls away from the pointer. */
+.tabs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+.tabs::-webkit-scrollbar { display: none; }
+
+.tab {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 180px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  background: var(--chrome-1);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+}
+.tab-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0 2px 0 8px;
+  background: none;
+  border: 0;
+  color: var(--text-1);
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.tab:hover { background: var(--chrome-2); }
+/* The chrome's one selected idiom: the `--chrome-3` fill step plus weight,
+   exactly as `.segmented button[aria-pressed]` and `.menu-row[aria-pressed]`
+   mark theirs. Selection is carried by the label button's `aria-selected`, so
+   the fill is derived from it rather than duplicated onto the wrapper. */
+.tab:has(> .tab-label[aria-selected='true']) { background: var(--chrome-3); border-color: var(--chrome-3); }
+.tab > .tab-label[aria-selected='true'] { color: var(--text-0); font-weight: 600; }
+
+/* The driven tab, while agent control is on. The 2px inset rule `.menu-row`
+   and `.surround-control` already use to mark a choice — the same idiom, in
+   the same direction, so it reads as "this one" and not as a new language.
+   It sits on the leading edge rather than surrounding the tab, so it never
+   competes with the selected fill underneath it (the driven tab is always the
+   selected one, and two full outlines on one control would be noise).
+
+   Neutral, and only neutral: --text-1 standing, --text-0 for ~3s after each
+   command, exactly the step the AGENT chip makes. No hue and no glow — a blur
+   here would be the first shadow in the app, and the rule against it is what
+   stops the chrome biasing the render below. */
+.tab.driven { box-shadow: inset 2px 0 0 var(--text-1); }
+.tab.driven.busy { box-shadow: inset 2px 0 0 var(--text-0); }
+
+.tab-close {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  margin-right: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 3px;
+  color: var(--text-1);
+  cursor: pointer;
+}
+/* Only on hover of the tab: sixteen ✕ glyphs at rest is a busier strip than
+   the titles they sit beside, and the titles are the content here. */
+.tab-close { opacity: 0; }
+.tab:hover .tab-close,
+.tab:has(> .tab-label[aria-selected='true']) .tab-close,
+.tab-close:focus-visible { opacity: 1; }
+.tab-close:hover { background: var(--chrome-2); color: var(--text-0); }
+
+.tab-new {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: var(--chrome-2);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  color: var(--text-0);
+  cursor: pointer;
+}
+.tab-new:hover:not(:disabled) { background: var(--chrome-3); }
+/* At the cap. Dimmed rather than hidden, and the `title` says why and where to
+   raise it — a control that vanishes teaches nothing. */
+.tab-new:disabled { color: var(--text-1); background: var(--chrome-1); cursor: default; }
+
 /* No blanket `button` rule here, ever. The old `.toolbar button { width:
    26px }` was specificity (0,1,1) and silently clipped the update button to
    "v0."; every control now sizes itself. */
@@ -536,6 +639,41 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 }
 .pane-footer .role { color: var(--text-0); letter-spacing: 0.08em; }
 
+/* The rotate control. Same 30px border-box and the same `--chrome-3` pressed
+   fill as `.segmented`, so the screen row keeps one hit-target rhythm and one
+   way of marking a choice. Two outlines of the screen you get, rather than the
+   words: "Portrait"/"Landscape" would take 150px in a row that already holds
+   two selects and three groups, and the shape reads faster than either word.
+   The buttons are 28px like `.surround-control`'s, for the same reason — the
+   glyph is the affordance and the button is only the target.
+
+   No hue anywhere, pressed included: this control sits a few pixels from the
+   pane whose greys the user came to judge. */
+.orientation-control {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  display: inline-flex;
+  height: 30px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  overflow: hidden;
+}
+.orientation-control button {
+  width: 28px;
+  height: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-right: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--chrome-2);
+  color: var(--text-1);
+  cursor: pointer;
+}
+.orientation-control button:last-child { border-right: 0; }
+.orientation-control button[aria-pressed='true'] { background: var(--chrome-3); color: var(--text-0); }
+
 /* Segmented surround control: the same 30px border-box as `.segmented` and
    `.select-shell`, so the screen row has one hit-target rhythm. `box-sizing`
    for the same reason `.segmented` needs it — a `div` gets no border-box from

package/out/renderer/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:" />
     <title>Obsrv</title>
-    <script type="module" crossorigin src="./assets/index-BlbBg6lm.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-B61fbgqt.css">
+    <script type="module" crossorigin src="./assets/index-BHt9Vm0J.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-BRkFfzcI.css">
   </head>
   <body>
     <div id="root"></div>

package/out/shared/calibration.js

@@ -1,10 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyOrientation = applyOrientation;
+exports.screenShape = screenShape;
 exports.ppi = ppi;
 exports.computeScale = computeScale;
 exports.maxCssViewport = maxCssViewport;
 exports.clampViewport = clampViewport;
 const presets_1 = require("./presets");
+/**
+ * The screen as it is actually being held. The **one** place the axes are
+ * swapped: everything downstream — the viewport handed to `TargetSource`, the
+ * clamp, the magnification, the footer — reads the rotated screen and needs no
+ * orientation of its own.
+ *
+ * Rotation must not change the *magnitude* of the physical scale, and does not:
+ * `ppi` is `hypot(w, h) / diagonalInches` and `hypot` is symmetric, so the
+ * diagonal, the pixel count and the density are all orientation-independent.
+ * A phone does not get physically larger by being turned sideways. The unit
+ * test asserts it, because it is exactly the kind of thing that drifts.
+ *
+ * `'portrait'` is the preset as the table stores it; `'landscape'` is that
+ * rotated a quarter turn. Every mobile preset — the case this feature exists
+ * for — is stored portrait, so for those the names are literal. A monitor
+ * preset is stored landscape-natural, so there the pair reads as
+ * unrotated/rotated instead; the UI never repeats the flag back at the user,
+ * it names the shape the dimensions actually have (`screenShape`), so nothing
+ * on screen can contradict the pixels beside it.
+ */
+function applyOrientation(screen, orientation) {
+    if (orientation !== 'landscape')
+        return screen;
+    return { ...screen, width: screen.height, height: screen.width };
+}
+/**
+ * The shape a pair of dimensions actually has, for anything the user reads. A
+ * square screen counts as portrait — it has no landscape reading, and one of
+ * the two words has to win.
+ */
+function screenShape(width, height) {
+    return width > height ? 'landscape' : 'portrait';
+}
 function ppi(width, height, diagonalInches) {
     if (!(diagonalInches > 0))
         throw new RangeError('diagonalInches must be > 0');

package/out/shared/control.js

@@ -9,6 +9,7 @@ exports.defaultControlFilePath = defaultControlFilePath;
 exports.presetApplyError = presetApplyError;
 exports.profileApplyError = profileApplyError;
 exports.viewModeApplyError = viewModeApplyError;
+exports.orientationApplyError = orientationApplyError;
 exports.panesApplyError = panesApplyError;
 exports.pixelExactApplyError = pixelExactApplyError;
 exports.parseClick = parseClick;
@@ -17,6 +18,7 @@ exports.parseControlStatus = parseControlStatus;
 const node_crypto_1 = require("node:crypto");
 const node_path_1 = require("node:path");
 const ipcPayloads_1 = require("./ipcPayloads");
+const calibration_1 = require("./calibration");
 const presets_1 = require("./presets");
 /**
  * The agent-control protocol shared by the main-process control server
@@ -50,6 +52,7 @@ exports.CONTROL_COMMANDS = [
     'setProfile',
     'setViewMode',
     'setPanes',
+    'setOrientation',
     'captureVisible',
     // v0.5 drive controls (spec §14 "Drive controls").
     'scroll',
@@ -153,6 +156,13 @@ function profileApplyError(id) {
 function viewModeApplyError(v) {
     return v === '1:1' || v === 'fit' ? null : `setViewMode payload must be { mode: '1:1' | 'fit' }`;
 }
+/**
+ * Validates a `setOrientation` payload. Unlike a preset id there is no table to
+ * miss, so the message just names the two words rather than listing anything.
+ */
+function orientationApplyError(v) {
+    return (0, presets_1.isOrientation)(v) ? null : `setOrientation payload must be { orientation: 'portrait' | 'landscape' }`;
+}
 function panesApplyError(v) {
     return v === 'both' || v === 'target' ? null : `setPanes payload must be { panes: 'both' | 'target' }`;
 }
@@ -214,6 +224,19 @@ function parseHighlight(raw) {
         durationMs: Math.min(Math.max(Math.round(d), exports.HIGHLIGHT_DURATION_MIN_MS), exports.HIGHLIGHT_DURATION_MAX_MS),
     };
 }
+/**
+ * The shape to report when the app did not name one. Dimensions settle it
+ * outright when they are there. Without them the app predates rotation, which
+ * means it is showing the preset unrotated — so the preset's own natural shape
+ * is exact rather than a guess. Only a custom screen on such an app falls all
+ * the way through to the flag.
+ */
+function inferScreenShape(cssWidth, cssHeight, presetId, orientation) {
+    if (cssWidth > 0 && cssHeight > 0)
+        return (0, calibration_1.screenShape)(cssWidth, cssHeight);
+    const preset = presets_1.SCREEN_PRESETS.find(p => p.id === presetId);
+    return preset ? (0, calibration_1.screenShape)(preset.width, preset.height) : orientation;
+}
 /** Validates a control server `status` response on the client side. */
 function parseControlStatus(raw) {
     if (!isRecord(raw))
@@ -233,5 +256,52 @@ function parseControlStatus(raw) {
     const panes = raw.panes ?? 'both';
     if (panes !== 'both' && panes !== 'target')
         return null;
-    return { version, url, presetId, profileId, viewMode, panes, mode };
+    // The same skew, one release later. An app that predates tabs has exactly
+    // one session — it is the tab at index 0, and it has no id to name — so the
+    // defaults describe that app truthfully rather than papering over it. An
+    // agent polling one sees an unchanging `tabId`, which is correct: there is
+    // no other tab for the user to switch to. Returning null instead would take
+    // out drive and live snap wholesale against every app older than tabs.
+    const tabId = raw.tabId ?? '';
+    if (typeof tabId !== 'string')
+        return null;
+    const tabIndex = raw.tabIndex ?? 0;
+    if (typeof tabIndex !== 'number' || !Number.isInteger(tabIndex) || tabIndex < 0)
+        return null;
+    // And the same skew again, one release later still. The npm MCP server
+    // routinely talks to a DMG app older than itself, and an app that predates
+    // rotation shows every screen unrotated — which is exactly what the default
+    // says. Returning null instead would take out drive and live snap wholesale
+    // against every app older than this feature, which is the bug this repo has
+    // already been bitten by twice.
+    const orientation = raw.orientation ?? presets_1.DEFAULT_ORIENTATION;
+    if (!(0, presets_1.isOrientation)(orientation))
+        return null;
+    // And once more for the dimensions and the derived shape. `0` means "the app
+    // did not say", which is the truthful answer for one that predates them —
+    // inventing a size would be worse than admitting the gap.
+    const cssWidth = raw.cssWidth ?? 0;
+    if (typeof cssWidth !== 'number' || !Number.isFinite(cssWidth) || cssWidth < 0)
+        return null;
+    const cssHeight = raw.cssHeight ?? 0;
+    if (typeof cssHeight !== 'number' || !Number.isFinite(cssHeight) || cssHeight < 0)
+        return null;
+    const reported = raw.screenShape;
+    if (reported !== undefined && !(0, presets_1.isOrientation)(reported))
+        return null;
+    return {
+        version,
+        url,
+        presetId,
+        profileId,
+        viewMode,
+        panes,
+        orientation,
+        mode,
+        tabId,
+        tabIndex,
+        cssWidth,
+        cssHeight,
+        screenShape: reported ?? inferScreenShape(cssWidth, cssHeight, presetId, orientation),
+    };
 }

package/out/shared/ipcPayloads.js

@@ -5,7 +5,9 @@ exports.parseRect = parseRect;
 exports.parseInputEvent = parseInputEvent;
 exports.parseDeviceScaleFactor = parseDeviceScaleFactor;
 exports.parseSettings = parseSettings;
+exports.parseOrientation = parseOrientation;
 exports.parseMode = parseMode;
+exports.parseTabId = parseTabId;
 exports.parseUiState = parseUiState;
 exports.parseScrollPos = parseScrollPos;
 exports.parseScrollRequest = parseScrollRequest;
@@ -132,13 +134,42 @@ function parseSettings(raw) {
     const split = raw.split ?? presets_1.DEFAULT_SETTINGS.split;
     if (!isFiniteNumber(split) || split < presets_1.SPLIT_MIN || split > presets_1.SPLIT_MAX)
         return null;
-    return { hostDiagonalInches, hostNits, agentControl, updateCheck, lastUpdateCheck, recordHistory, split };
+    // Same shape for the tab cap: absent is the pre-tabs wire shape and means
+    // the default, and an out-of-band or fractional count is refused rather
+    // than clamped — the Settings input is a bounded integer field, so one
+    // arriving here is a bug rather than a hand-edited file.
+    const maxTabs = raw.maxTabs ?? presets_1.DEFAULT_SETTINGS.maxTabs;
+    if (!isFiniteNumber(maxTabs) || !Number.isInteger(maxTabs) || maxTabs < presets_1.MAX_TABS_MIN || maxTabs > presets_1.MAX_TABS_MAX)
+        return null;
+    return { hostDiagonalInches, hostNits, agentControl, updateCheck, lastUpdateCheck, recordHistory, split, maxTabs };
+}
+/**
+ * An orientation off the wire. Refused rather than defaulted, unlike the
+ * absent-field handling inside `parseUiState`: a caller that names an
+ * orientation and gets a different one back is worse served than one told its
+ * value was not a word this app knows.
+ */
+function parseOrientation(raw) {
+    return (0, presets_1.isOrientation)(raw) ? raw : null;
 }
 function parseMode(raw) {
     return raw === 'url' || raw === 'image' ? raw : null;
 }
 /** Longest preset/profile id the UI-state mirror will store. */
 const MAX_UI_ID = 64;
+/**
+ * Longest tab id main will act on. Ids are minted main-side (`tab-N`), so a
+ * renderer message naming one is only ever echoing what it was told; the bound
+ * is there because the renderer is still the one sending it. An id no session
+ * carries resolves to nothing in the manager and the command is dropped, so
+ * shape is all this has to check.
+ */
+const MAX_TAB_ID = 64;
+function parseTabId(raw) {
+    if (typeof raw !== 'string' || raw.length === 0 || raw.length > MAX_TAB_ID)
+        return null;
+    return raw;
+}
 /**
  * The renderer's UI-state report (`IPC.uiState`), mirrored main-side so the
  * agent-control server can answer `status` without a renderer round-trip.
@@ -156,6 +187,12 @@ function parseUiState(raw) {
     if (!isRecord(raw))
         return null;
     const { presetId, profileId, viewMode, mode } = raw;
+    // Required, unlike `panes` below: there is no sane default for "which tab
+    // this describes", and guessing would reintroduce exactly the misattribution
+    // the field exists to stop.
+    const tabId = parseTabId(raw.tabId);
+    if (tabId === null)
+        return null;
     if (typeof presetId !== 'string' || presetId.length === 0 || presetId.length > MAX_UI_ID)
         return null;
     if (typeof profileId !== 'string' || profileId.length === 0 || profileId.length > MAX_UI_ID)
@@ -170,11 +207,17 @@ function parseUiState(raw) {
     const panes = raw.panes ?? 'both';
     if (panes !== 'both' && panes !== 'target')
         return null;
+    // Same shape again for the orientation, and for the same reason.
+    const orientation = raw.orientation ?? presets_1.DEFAULT_ORIENTATION;
+    if (!(0, presets_1.isOrientation)(orientation))
+        return null;
     return {
+        tabId,
         presetId,
         profileId,
         viewMode,
         panes,
+        orientation,
         mode,
         targetBounds: parseRect(raw.targetBounds),
         canvasBounds: parseRect(raw.canvasBounds),

package/out/shared/presets.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PANEL_PROFILES = exports.SCREEN_PRESETS = exports.DEFAULT_SETTINGS = exports.SPLIT_MAX = exports.SPLIT_MIN = exports.MAX_VIEWPORT = void 0;
+exports.PANEL_PROFILES = exports.SCREEN_PRESETS = exports.DEFAULT_ORIENTATION = exports.DEFAULT_SETTINGS = exports.MAX_TABS_MAX = exports.MAX_TABS_MIN = exports.SPLIT_MAX = exports.SPLIT_MIN = exports.MAX_VIEWPORT = void 0;
+exports.isOrientation = isOrientation;
 exports.findPreset = findPreset;
 exports.findProfile = findProfile;
 exports.MAX_VIEWPORT = 4096;
@@ -8,6 +9,10 @@ exports.MAX_VIEWPORT = 4096;
  *  drag's 240px-a-side floor, which only the renderer knows the pixels for. */
 exports.SPLIT_MIN = 0.1;
 exports.SPLIT_MAX = 0.9;
+/** The band `Settings.maxTabs` is held to. Below two there is nothing to tab
+ *  between; above thirty-two the process count is a problem on any machine. */
+exports.MAX_TABS_MIN = 2;
+exports.MAX_TABS_MAX = 32;
 exports.DEFAULT_SETTINGS = {
     hostDiagonalInches: 27,
     hostNits: 500,
@@ -16,7 +21,17 @@ exports.DEFAULT_SETTINGS = {
     lastUpdateCheck: 0,
     recordHistory: true,
     split: 0.5,
+    maxTabs: 12,
 };
+/**
+ * Every tab opens unrotated. `'portrait'` means "the preset as stored", so this
+ * is a no-op against the table below rather than a shape anyone has to honour.
+ */
+exports.DEFAULT_ORIENTATION = 'portrait';
+/** Type guard for anything off the wire, off disk, or off an agent's payload. */
+function isOrientation(v) {
+    return v === 'portrait' || v === 'landscape';
+}
 exports.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' },

package/out/shared/tabList.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.closeTab = closeTab;
+exports.canAddTab = canAddTab;
+exports.tabTitle = tabTitle;
+/**
+ * Removes a tab and says which one should take focus. Closing the active tab
+ * moves right, because the tab that took its screen position is the one the
+ * eye is already on; at the end of the strip there is nothing to the right, so
+ * it moves left.
+ */
+function closeTab(tabs, closeId, activeId) {
+    const index = tabs.findIndex(t => t.id === closeId);
+    if (index === -1)
+        return { tabs, activeId };
+    const next = tabs.filter(t => t.id !== closeId);
+    if (next.length === 0)
+        return { tabs: next, activeId: null };
+    if (closeId !== activeId)
+        return { tabs: next, activeId };
+    const neighbour = next[Math.min(index, next.length - 1)];
+    return { tabs: next, activeId: neighbour.id };
+}
+function canAddTab(count, max) {
+    return count < max;
+}
+/**
+ * What the strip shows. The port is kept deliberately: two local dev servers
+ * differ only by it, and a host-only label would render them identically.
+ */
+function tabTitle(url, pageTitle) {
+    if (pageTitle.trim() !== '')
+        return pageTitle;
+    // `about:blank` is where every session starts and what an unused tab still
+    // holds, so it is the empty tab spelled in Chromium's words rather than an
+    // address anyone typed. It has no host, and falling through to the raw
+    // string labels a fresh tab `about:blank` — which the screenshot caught.
+    if (url.trim() === '' || url.trim() === 'about:blank')
+        return 'New tab';
+    try {
+        return new URL(url).host || url;
+    }
+    catch {
+        return url;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "getobsrv",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "See your site the way 1x screens see it",
   "main": "./out/main/index.js",
   "bin": {

package/skills/obsrv-screens/SKILL.md

@@ -61,6 +61,13 @@ when the PNG is taken. Reaching for `obsrv_snap` after a scroll works only
 when the app is already on that exact URL (it answers `navigated: false`);
 snapping a different URL is a fresh load and lands back at the top.
 
+The app can hold several sessions open as tabs, and both tools act on the one
+in **front** — resolved per command, so the user can move it under you. Each
+result names the tab (`tabId`, `tabIndex`); if you drive over several calls and
+the state has to hold, check that `tabId` did not change rather than assuming
+it. You cannot name another tab, and you cannot open, close or switch tabs —
+ask the user. An empty `tabId` is an app older than tabs, which has only one.
+
 ## The loop that catches real regressions
 
 1. Snap the dev URL across `--matrix laptop-768,android-65,1080p-24`, plus a