getobsrv 0.12.0 → 0.13.0

package/out/cli/args.js

@@ -30,6 +30,18 @@ Shared flags:
 ${presets}
   --width <px> --height <px> [--dsf <factor>] [--diagonal <inches>]
                        Custom CSS viewport instead of --preset (dsf defaults to 1).
+  --orientation <o>    portrait | landscape (default ${presets_1.DEFAULT_ORIENTATION}). This names the
+                       preset's *stored* orientation, not the shape you get:
+                         portrait  = the preset exactly as the table above lists it
+                         landscape = that rotated a quarter turn (width and height swap)
+                       Every mobile preset is stored portrait, so for those the two
+                       readings agree. The laptop and desktop presets are stored
+                       landscape-natural, so --orientation landscape turns them into a
+                       portrait screen — which is how you render a 1080p monitor stood on
+                       end (1080p-24 becomes 1080x1920). Applies to custom --width/--height
+                       dims too. The diagonal, raster density and physical size never
+                       change: it is the same panel turned sideways. Each render's JSON
+                       and log line name the resulting shape.
   --profile <id>       Panel profile: ${profiles} (default reference).
   --wait <ms>          Extra settle time after load (default 0).
   --timeout <ms>       Per-render budget for load + paint quiescence (default ${exports.DEFAULT_TIMEOUT_MS}).
@@ -55,7 +67,7 @@ warning naming what was missing. Only a render that painted nothing errors.`;
 /** Flags that take no value. */
 const BOOLEAN_FLAGS = new Set(['full-page', 'json']);
 /** Flags that consume the next token. */
-const VALUE_FLAGS = new Set(['preset', 'profile', 'out', 'out-dir', 'wait', 'timeout', 'matrix', 'width', 'height', 'dsf', 'diagonal']);
+const VALUE_FLAGS = new Set(['preset', 'profile', 'orientation', 'out', 'out-dir', 'wait', 'timeout', 'matrix', 'width', 'height', 'dsf', 'diagonal']);
 const SNAP_ONLY = new Set(['out', 'full-page', 'matrix']);
 const DIFF_ONLY = new Set(['out-dir', 'json']);
 function collect(command, argv) {
@@ -131,9 +143,30 @@ function presetSpec(id) {
         cssHeight: preset.height,
         deviceScaleFactor: preset.deviceScaleFactor,
         diagonalInches: preset.diagonalInches,
+        orientation: presets_1.DEFAULT_ORIENTATION,
     };
 }
+function resolveOrientation(flags) {
+    const raw = flags.get('orientation');
+    if (raw === undefined)
+        return presets_1.DEFAULT_ORIENTATION;
+    if (!(0, presets_1.isOrientation)(raw))
+        throw new ArgError(`--orientation: expected portrait or landscape, got "${String(raw)}"`);
+    return raw;
+}
+/**
+ * Rotation swaps the CSS axes and nothing else — the diagonal and the raster
+ * density are orientation-independent, so the render is the same screen turned
+ * sideways rather than a different one. Applied here, before the diff bounds
+ * are checked, so those check the viewport that will actually be rendered.
+ */
+function orientSpec(spec, orientation) {
+    if (orientation !== 'landscape')
+        return { ...spec, orientation };
+    return { ...spec, orientation, cssWidth: spec.cssHeight, cssHeight: spec.cssWidth };
+}
 function resolveSpecs(flags) {
+    const orientation = resolveOrientation(flags);
     const custom = ['width', 'height', 'dsf', 'diagonal'].some(f => flags.has(f));
     if (custom && flags.has('preset'))
         throw new ArgError('--preset and --width/--height are mutually exclusive');
@@ -153,17 +186,25 @@ function resolveSpecs(flags) {
             throw new ArgError(`viewport exceeds the 4096-device-pixel budget: at dsf ${deviceScaleFactor} the CSS limit is ${max}`);
         }
         const diagonal = flags.has('diagonal') ? float(flags, 'diagonal', 0, 0.1) : null;
-        return { specs: [{ presetId: 'custom', cssWidth, cssHeight, deviceScaleFactor, diagonalInches: diagonal }], matrix: false };
+        const spec = {
+            presetId: 'custom',
+            cssWidth,
+            cssHeight,
+            deviceScaleFactor,
+            diagonalInches: diagonal,
+            orientation: presets_1.DEFAULT_ORIENTATION,
+        };
+        return { specs: [orientSpec(spec, orientation)], matrix: false };
     }
     const matrixRaw = flags.get('matrix');
     if (typeof matrixRaw === 'string') {
         const ids = matrixRaw.split(',').map(s => s.trim()).filter(s => s.length > 0);
         if (ids.length === 0)
             throw new ArgError('--matrix: expected a comma-separated list of preset ids');
-        return { specs: ids.map(presetSpec), matrix: true };
+        return { specs: ids.map(id => orientSpec(presetSpec(id), orientation)), matrix: true };
     }
     const id = typeof flags.get('preset') === 'string' ? flags.get('preset') : exports.DEFAULT_PRESET;
-    return { specs: [presetSpec(id)], matrix: false };
+    return { specs: [orientSpec(presetSpec(id), orientation)], matrix: false };
 }
 function resolveProfile(flags) {
     const raw = flags.get('profile');
@@ -201,8 +242,14 @@ function parseArgs(argv) {
     }
     const referenceMax = (0, calibration_1.maxCssViewport)(2);
     if (spec.cssWidth > referenceMax || spec.cssHeight > referenceMax) {
+        // Named as rendered, not as stored: the dims here are post-rotation, and
+        // attributing them to the bare preset id would print "1440p-27 is
+        // 1440×2560" — a shape that id never has. The bound itself is per-axis
+        // symmetric, so rotation can never sneak a too-large viewport past it;
+        // this is the message telling the truth about which one it measured.
+        const as = spec.orientation === 'landscape' ? ' rotated a quarter turn' : '';
         throw new ArgError(`diff renders a 2x reference, so the CSS viewport must fit ${referenceMax}px per axis ` +
-            `(4096 device px at 2x) — "${spec.presetId}" is ${spec.cssWidth}×${spec.cssHeight}. ` +
+            `(4096 device px at 2x) — "${spec.presetId}"${as} is ${spec.cssWidth}×${spec.cssHeight}. ` +
             `Use \`obsrv snap\` for this preset instead.`);
     }
     const outDir = typeof flags.get('out-dir') === 'string' ? flags.get('out-dir') : null;

package/out/main/cli.js

@@ -3,7 +3,7 @@ const electron = require("electron");
 const node_fs = require("node:fs");
 const node_os = require("node:os");
 const node_path = require("node:path");
-const targetSource = require("./targetSource-DlsHc-Ri.js");
+const targetSource = require("./targetSource-DuRYHUo8.js");
 function boxDownsample(src, factor) {
   if (!Number.isInteger(factor) || factor < 1) throw new RangeError("factor must be an integer >= 1");
   const width = Math.floor(src.width / factor);
@@ -61,6 +61,18 @@ Shared flags:
 ${presets}
   --width <px> --height <px> [--dsf <factor>] [--diagonal <inches>]
                        Custom CSS viewport instead of --preset (dsf defaults to 1).
+  --orientation <o>    portrait | landscape (default ${targetSource.DEFAULT_ORIENTATION}). This names the
+                       preset's *stored* orientation, not the shape you get:
+                         portrait  = the preset exactly as the table above lists it
+                         landscape = that rotated a quarter turn (width and height swap)
+                       Every mobile preset is stored portrait, so for those the two
+                       readings agree. The laptop and desktop presets are stored
+                       landscape-natural, so --orientation landscape turns them into a
+                       portrait screen — which is how you render a 1080p monitor stood on
+                       end (1080p-24 becomes 1080x1920). Applies to custom --width/--height
+                       dims too. The diagonal, raster density and physical size never
+                       change: it is the same panel turned sideways. Each render's JSON
+                       and log line name the resulting shape.
   --profile <id>       Panel profile: ${profiles} (default reference).
   --wait <ms>          Extra settle time after load (default 0).
   --timeout <ms>       Per-render budget for load + paint quiescence (default ${DEFAULT_TIMEOUT_MS}).
@@ -84,7 +96,7 @@ painted. False is a rescued capture, not a failure: a page that kept animating
 warning naming what was missing. Only a render that painted nothing errors.`;
 }
 const BOOLEAN_FLAGS = /* @__PURE__ */ new Set(["full-page", "json"]);
-const VALUE_FLAGS = /* @__PURE__ */ new Set(["preset", "profile", "out", "out-dir", "wait", "timeout", "matrix", "width", "height", "dsf", "diagonal"]);
+const VALUE_FLAGS = /* @__PURE__ */ new Set(["preset", "profile", "orientation", "out", "out-dir", "wait", "timeout", "matrix", "width", "height", "dsf", "diagonal"]);
 const SNAP_ONLY = /* @__PURE__ */ new Set(["out", "full-page", "matrix"]);
 const DIFF_ONLY = /* @__PURE__ */ new Set(["out-dir", "json"]);
 function collect(command, argv) {
@@ -148,10 +160,22 @@ function presetSpec(id) {
     cssWidth: preset.width,
     cssHeight: preset.height,
     deviceScaleFactor: preset.deviceScaleFactor,
-    diagonalInches: preset.diagonalInches
+    diagonalInches: preset.diagonalInches,
+    orientation: targetSource.DEFAULT_ORIENTATION
   };
 }
+function resolveOrientation(flags) {
+  const raw = flags.get("orientation");
+  if (raw === void 0) return targetSource.DEFAULT_ORIENTATION;
+  if (!targetSource.isOrientation(raw)) throw new ArgError(`--orientation: expected portrait or landscape, got "${String(raw)}"`);
+  return raw;
+}
+function orientSpec(spec, orientation) {
+  if (orientation !== "landscape") return { ...spec, orientation };
+  return { ...spec, orientation, cssWidth: spec.cssHeight, cssHeight: spec.cssWidth };
+}
 function resolveSpecs(flags) {
+  const orientation = resolveOrientation(flags);
   const custom = ["width", "height", "dsf", "diagonal"].some((f) => flags.has(f));
   if (custom && flags.has("preset")) throw new ArgError("--preset and --width/--height are mutually exclusive");
   if (custom && flags.has("matrix")) throw new ArgError("--matrix lists presets; it cannot be combined with custom --width/--height dims");
@@ -168,16 +192,24 @@ function resolveSpecs(flags) {
       throw new ArgError(`viewport exceeds the 4096-device-pixel budget: at dsf ${deviceScaleFactor} the CSS limit is ${max}`);
     }
     const diagonal = flags.has("diagonal") ? float(flags, "diagonal", 0, 0.1) : null;
-    return { specs: [{ presetId: "custom", cssWidth, cssHeight, deviceScaleFactor, diagonalInches: diagonal }], matrix: false };
+    const spec = {
+      presetId: "custom",
+      cssWidth,
+      cssHeight,
+      deviceScaleFactor,
+      diagonalInches: diagonal,
+      orientation: targetSource.DEFAULT_ORIENTATION
+    };
+    return { specs: [orientSpec(spec, orientation)], matrix: false };
   }
   const matrixRaw = flags.get("matrix");
   if (typeof matrixRaw === "string") {
     const ids = matrixRaw.split(",").map((s) => s.trim()).filter((s) => s.length > 0);
     if (ids.length === 0) throw new ArgError("--matrix: expected a comma-separated list of preset ids");
-    return { specs: ids.map(presetSpec), matrix: true };
+    return { specs: ids.map((id2) => orientSpec(presetSpec(id2), orientation)), matrix: true };
   }
   const id = typeof flags.get("preset") === "string" ? flags.get("preset") : DEFAULT_PRESET;
-  return { specs: [presetSpec(id)], matrix: false };
+  return { specs: [orientSpec(presetSpec(id), orientation)], matrix: false };
 }
 function resolveProfile(flags) {
   const raw = flags.get("profile");
@@ -215,8 +247,9 @@ ${usage()}`);
   }
   const referenceMax = targetSource.maxCssViewport(2);
   if (spec.cssWidth > referenceMax || spec.cssHeight > referenceMax) {
+    const as = spec.orientation === "landscape" ? " rotated a quarter turn" : "";
     throw new ArgError(
-      `diff renders a 2x reference, so the CSS viewport must fit ${referenceMax}px per axis (4096 device px at 2x) — "${spec.presetId}" is ${spec.cssWidth}×${spec.cssHeight}. Use \`obsrv snap\` for this preset instead.`
+      `diff renders a 2x reference, so the CSS viewport must fit ${referenceMax}px per axis (4096 device px at 2x) — "${spec.presetId}"${as} is ${spec.cssWidth}×${spec.cssHeight}. Use \`obsrv snap\` for this preset instead.`
     );
   }
   const outDir = typeof flags.get("out-dir") === "string" ? flags.get("out-dir") : null;
@@ -559,8 +592,9 @@ async function runSnap(cmd) {
     const img = applyPanelProfile(bgraToRgba(r.frame.bgra, r.frame.width, r.frame.height), profile);
     node_fs.mkdirSync(node_path.dirname(out), { recursive: true });
     node_fs.writeFileSync(out, encodePng(img));
+    const shape = targetSource.screenShape(r.cssWidth, r.cssHeight);
     human(
-      `snap ${cmd.url} → ${out} (${r.frame.width}×${r.frame.height} device px, preset ${spec.presetId}, profile ${profile.id})`
+      `snap ${cmd.url} → ${out} (${r.frame.width}×${r.frame.height} device px, ${r.cssWidth}×${r.cssHeight} CSS ${shape}, preset ${spec.presetId}, profile ${profile.id})`
     );
     results.push({
       out,
@@ -607,7 +641,7 @@ async function runDiff(cmd) {
   }
   const pct2 = (v) => `${(v * 100).toFixed(2)}%`;
   human(
-    `diff ${cmd.url} @ ${cmd.spec.presetId} (profile ${profile.id}): ink ${pct2(metrics.inkCoverage.target)} vs ${pct2(metrics.inkCoverage.reference)} reference, rows ${metrics.rows.target}/${metrics.rows.reference} (ratio ${metrics.rows.ratio?.toFixed(2) ?? "n/a"}), ${metrics.findings.length} finding(s)${settled ? "" : " — UNSETTLED, deltas are not rendering evidence"}`
+    `diff ${cmd.url} @ ${cmd.spec.presetId} (${cmd.spec.cssWidth}×${cmd.spec.cssHeight} CSS ${targetSource.screenShape(cmd.spec.cssWidth, cmd.spec.cssHeight)}, profile ${profile.id}): ink ${pct2(metrics.inkCoverage.target)} vs ${pct2(metrics.inkCoverage.reference)} reference, rows ${metrics.rows.target}/${metrics.rows.reference} (ratio ${metrics.rows.ratio?.toFixed(2) ?? "n/a"}), ${metrics.findings.length} finding(s)${settled ? "" : " — UNSETTLED, deltas are not rendering evidence"}`
   );
   await machine({
     url: cmd.url,

package/out/main/index.js

@@ -4,7 +4,7 @@ const node_fs = require("node:fs");
 const promises = require("node:fs/promises");
 const node_path = require("node:path");
 const node_crypto = require("node:crypto");
-const targetSource = require("./targetSource-DlsHc-Ri.js");
+const targetSource = require("./targetSource-DuRYHUo8.js");
 const node_http = require("node:http");
 const node_url = require("node:url");
 const MAX_SCROLL_SELECTOR = 512;
@@ -106,12 +106,15 @@ function parseUiState(raw) {
   if (mode !== "url" && mode !== "image") return null;
   const panes = raw.panes ?? "both";
   if (panes !== "both" && panes !== "target") return null;
+  const orientation = raw.orientation ?? targetSource.DEFAULT_ORIENTATION;
+  if (!targetSource.isOrientation(orientation)) return null;
   return {
     tabId,
     presetId,
     profileId,
     viewMode,
     panes,
+    orientation,
     mode,
     targetBounds: parseRect(raw.targetBounds),
     canvasBounds: parseRect(raw.canvasBounds)
@@ -152,6 +155,7 @@ const CONTROL_COMMANDS = [
   "setProfile",
   "setViewMode",
   "setPanes",
+  "setOrientation",
   "captureVisible",
   // v0.5 drive controls (spec §14 "Drive controls").
   "scroll",
@@ -196,6 +200,9 @@ function profileApplyError(id) {
 function viewModeApplyError(v) {
   return v === "1:1" || v === "fit" ? null : `setViewMode payload must be { mode: '1:1' | 'fit' }`;
 }
+function orientationApplyError(v) {
+  return targetSource.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' }`;
 }
@@ -400,7 +407,8 @@ function loadTabs(file, max = Infinity) {
       tabs.push({
         url: entry.url,
         presetId: targetSource.SCREEN_PRESETS.some((p) => p.id === entry.presetId) ? entry.presetId : DEFAULT_PRESET,
-        profileId: targetSource.PANEL_PROFILES.some((p) => p.id === entry.profileId) ? entry.profileId : DEFAULT_PROFILE
+        profileId: targetSource.PANEL_PROFILES.some((p) => p.id === entry.profileId) ? entry.profileId : DEFAULT_PROFILE,
+        orientation: targetSource.isOrientation(entry.orientation) ? entry.orientation : targetSource.DEFAULT_ORIENTATION
       });
     }
     const kept = tabs.slice(0, Math.max(0, max));
@@ -587,6 +595,12 @@ class ControlServer {
         const panes = payload.panes;
         return this.applyAndConfirm({ panes }, (s) => s.panes === panes);
       }
+      case "setOrientation": {
+        const err = orientationApplyError(payload.orientation);
+        if (err) return reply(400, { error: err });
+        const orientation = payload.orientation;
+        return this.applyAndConfirm({ orientation }, (s) => s.orientation === orientation);
+      }
       case "captureVisible": {
         const capture = await this.deps.captureVisible();
         return reply(200, { ok: true, ...capture });
@@ -934,6 +948,12 @@ function registerIpc(ctx) {
     set viewMode(v) {
       tab().viewMode = v;
     },
+    get orientation() {
+      return tab().orientation;
+    },
+    set orientation(v) {
+      tab().orientation = v;
+    },
     get mode() {
       return tab().reportedMode;
     },
@@ -1115,7 +1135,12 @@ function registerIpc(ctx) {
   const persistTabs = () => {
     if (!persistReady) return;
     const stored = {
-      tabs: tabs.tabs.map((t) => ({ url: t.url, presetId: t.presetId, profileId: t.profileId })),
+      tabs: tabs.tabs.map((t) => ({
+        url: t.url,
+        presetId: t.presetId,
+        profileId: t.profileId,
+        orientation: t.orientation
+      })),
       activeIndex: tabs.activeIndex
     };
     const json = JSON.stringify(stored);
@@ -1137,6 +1162,7 @@ function registerIpc(ctx) {
       if (!s) break;
       s.presetId = entry.presetId;
       s.profileId = entry.profileId;
+      s.orientation = entry.orientation;
       sessions.push(s);
     }
     tabs.activate(sessions[Math.min(stored.activeIndex, sessions.length - 1)].id);
@@ -1176,14 +1202,30 @@ function registerIpc(ctx) {
         url = tab().target.webContents.getURL();
       } catch {
       }
-      return { version: appVersion, url, tabId: tabs.activeId, tabIndex: tabs.activeIndex, ...uiState };
+      let css = { width: 0, height: 0 };
+      try {
+        css = tab().target.getViewport();
+      } catch {
+      }
+      return {
+        version: appVersion,
+        url,
+        tabId: tabs.activeId,
+        tabIndex: tabs.activeIndex,
+        cssWidth: css.width,
+        cssHeight: css.height,
+        screenShape: targetSource.screenShape(css.width, css.height),
+        ...uiState
+      };
     },
     navigate: navigateBoth,
     apply: (patch) => {
       if (win.isDestroyed()) return;
-      if (patch.presetId !== void 0) {
-        tab().viewportPending = true;
-        tab().viewportArrived = false;
+      const s = tab();
+      const resizes = patch.presetId !== void 0 && patch.presetId !== s.presetId || patch.orientation !== void 0 && patch.orientation !== s.orientation;
+      if (resizes) {
+        s.viewportPending = true;
+        s.viewportArrived = false;
       }
       if (!rendererReported) {
         if (pendingApplies.length >= MAX_PENDING_APPLIES) {
@@ -1605,6 +1647,13 @@ class TabSession {
   viewportArrived = false;
   presetId = "1080p-24";
   profileId = "reference";
+  /**
+   * Which way round this tab's screen is held. Per tab like the preset it
+   * rotates, and mirrored here from the renderer's `uiState` for the same
+   * reason: a restored tab has to come back the way it was left, and no
+   * renderer existed to report that when the list came off disk.
+   */
+  orientation = targetSource.DEFAULT_ORIENTATION;
   viewMode = "fit";
   /**
    * Resolves once both panes have settled on their initial `about:blank`.
@@ -1824,7 +1873,8 @@ class TabManager {
         url: t.url,
         title: t.title,
         presetId: t.presetId,
-        profileId: t.profileId
+        profileId: t.profileId,
+        orientation: t.orientation
       })),
       activeId: this.id
     };

package/out/main/{targetSource-DlsHc-Ri.js → targetSource-DuRYHUo8.js}

@@ -17,6 +17,10 @@ const DEFAULT_SETTINGS = {
   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" },
@@ -55,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));
@@ -410,6 +417,7 @@ 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;
@@ -422,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
@@ -218,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(),
@@ -246,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
@@ -309,6 +338,19 @@ 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)."),
@@ -442,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);
     }
@@ -488,6 +533,10 @@ 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,
@@ -515,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` +
@@ -635,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\` ` +
@@ -686,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) {
@@ -777,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/renderer/assets/{index-gYDbIgqJ.js → index-BHt9Vm0J.js}

@@ -12702,6 +12702,7 @@ const DEFAULT_SETTINGS = {
   split: 0.5,
   maxTabs: 12
 };
+const DEFAULT_ORIENTATION = "portrait";
 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" },
@@ -12735,6 +12736,13 @@ function findProfile(id) {
   if (!p) throw new Error(`unknown profile: ${id}`);
   return p;
 }
+function applyOrientation(screen, orientation) {
+  if (orientation !== "landscape") return screen;
+  return { ...screen, width: screen.height, height: screen.width };
+}
+function screenShape(width, height) {
+  return width > height ? "landscape" : "portrait";
+}
 function ppi(width, height, diagonalInches) {
   if (!(diagonalInches > 0)) throw new RangeError("diagonalInches must be > 0");
   return Math.hypot(width, height) / diagonalInches;
@@ -12799,6 +12807,7 @@ function blankTab() {
     title: "",
     lastUrl: "",
     presetId: "1080p-24",
+    orientation: DEFAULT_ORIENTATION,
     custom: { width: 1920, height: 1080, diagonalInches: 24 },
     pixelExact: false,
     profileId: PANEL_PROFILES[0].id,
@@ -12860,6 +12869,11 @@ const useStore = create()((set, get) => ({
   // A screen change re-rasters the target, so a highlight's target-pixel rect
   // no longer marks what it marked; the same for the custom fields below.
   setPreset: (presetId) => set(patchActive({ presetId, agentHighlight: null })),
+  // A rotation re-rasters the target exactly as a preset change does, so a
+  // highlight's target-pixel rect no longer marks what it marked. Setting the
+  // orientation already in force writes nothing, so a re-report from an agent
+  // (or a click on the pressed half of the control) costs no re-render.
+  setOrientation: (orientation) => set(patchActiveWith((t) => t.orientation === orientation ? null : { orientation, agentHighlight: null })),
   setCustom: (c) => set(patchActiveWith((t) => ({ custom: { ...t.custom, ...c }, presetId: CUSTOM_PRESET_ID, agentHighlight: null }))),
   setPixelExact: (pixelExact) => set(patchActive({ pixelExact })),
   // Picking a profile drops any hand-tuned slider values.
@@ -12914,7 +12928,8 @@ const useStore = create()((set, get) => ({
           url: info.url,
           title: info.title,
           presetId: info.presetId,
-          profileId: info.profileId
+          profileId: info.profileId,
+          orientation: info.orientation
         }
       );
     }
@@ -12952,7 +12967,7 @@ const useStore = create()((set, get) => ({
 function selectTab(s) {
   return s.tabs[s.activeId];
 }
-function selectScreen(s) {
+function naturalScreen(s) {
   const tab = selectTab(s);
   const preset = SCREEN_PRESETS.find((p) => p.id === tab.presetId);
   return preset ? {
@@ -12962,6 +12977,21 @@ function selectScreen(s) {
     deviceScaleFactor: preset.deviceScaleFactor
   } : tab.custom;
 }
+function selectScreen(s) {
+  return applyOrientation(naturalScreen(s), selectTab(s).orientation);
+}
+function selectScreenShape(s) {
+  const screen = selectScreen(s);
+  return screenShape(screen.width, screen.height);
+}
+const ORIENTATIONS = ["portrait", "landscape"];
+function selectOrientationShapes(s) {
+  const natural = naturalScreen(s);
+  return ORIENTATIONS.map((value) => {
+    const r = applyOrientation(natural, value);
+    return screenShape(r.width, r.height);
+  });
+}
 function selectDeviceScaleFactor(s) {
   return selectScreen(s).deviceScaleFactor ?? 1;
 }
@@ -13183,7 +13213,8 @@ function TargetFooter() {
   const viewMode = useStore((s) => selectTab(s).viewMode);
   const fitScale2 = useStore((s) => selectTab(s).fitScale);
   const dsf = useStore(selectDeviceScaleFactor);
-  const size = mode === "image" && image ? `${image.width}×${image.height}` : `${viewport.width}×${viewport.height}${dsf > 1 ? ` @${dsf}x` : ""}`;
+  const shape = useStore(selectScreenShape);
+  const size = mode === "image" && image ? `${image.width}×${image.height}` : `${viewport.width}×${viewport.height}${dsf > 1 ? ` @${dsf}x` : ""} ${shape}`;
   const depth = params.levels <= 63 ? "6-bit" : "8-bit";
   const magnification = viewMode === "fit" && fitScale2 !== null ? [`fit ×${fitScale2.toFixed(2)}`, "not pixel-exact"] : [`×${scale.toFixed(2)}`];
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -13526,6 +13557,7 @@ function SettingsPanel() {
   const update = useStore((s) => s.update);
   const history = useStore((s) => s.history);
   const custom = useStore(useShallow((s) => selectTab(s).custom));
+  const orientation = useStore((s) => selectTab(s).orientation);
   const viewport = useStore(useShallow(selectViewport));
   const scale = useStore(selectScale);
   const fallback = useStore(selectScaleIsFallback);
@@ -13598,6 +13630,15 @@ function SettingsPanel() {
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "Custom screen" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "Editing these selects the Custom preset." }),
+    orientation === "landscape" && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "muted custom-rotated", children: [
+      "Rotated, so these render transposed:",
+      " ",
+      (() => {
+        const r = applyOrientation({ ...custom }, orientation);
+        return `${r.width}×${r.height}`;
+      })(),
+      "."
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       NumberField,
       {
@@ -14698,53 +14739,73 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [
+const __iconNode$a = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$8);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$a);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$9 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$7);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$9);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$6);
+const __iconNode$8 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$8);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$7 = [
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
   ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
   ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
 ];
-const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$5);
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$7);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$6 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$4);
+const Plus = createLucideIcon("plus", __iconNode$6);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$5 = [
+  ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }]
+];
+const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$5);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [
+  ["rect", { width: "12", height: "20", x: "6", y: "2", rx: "2", key: "1oxtiu" }]
+];
+const RectangleVertical = createLucideIcon("rectangle-vertical", __iconNode$4);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
@@ -14811,7 +14872,12 @@ const ICONS = {
   sliders: SlidersHorizontal,
   gear: Settings,
   chevron: ChevronDown,
-  plus: Plus
+  plus: Plus,
+  // The rotate control's two shapes. A plain outline of the screen you get is
+  // the whole affordance — no arrow, no device silhouette: the target may be a
+  // monitor as readily as a phone.
+  portrait: RectangleVertical,
+  landscape: RectangleHorizontal
 };
 function Icon({ name, size = 16 }) {
   const Glyph = ICONS[name];
@@ -14994,6 +15060,9 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
   const setUrl = useStore((s) => s.setUrl);
   const setMode = useStore((s) => s.setMode);
   const setPreset = useStore((s) => s.setPreset);
+  const orientation = useStore((s) => selectTab(s).orientation);
+  const orientationShapes = useStore(useShallow(selectOrientationShapes));
+  const setOrientation = useStore((s) => s.setOrientation);
   const setProfile = useStore((s) => s.setProfile);
   const setPixelExact = useStore((s) => s.setPixelExact);
   const setError = useStore((s) => s.setError);
@@ -15266,6 +15335,23 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
           ]
         }
       ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "orientation-control", role: "group", "aria-label": "Screen orientation", children: ORIENTATIONS.map((value, i) => {
+        const shape = orientationShapes[i] ?? value;
+        const name = shape === "landscape" ? "Landscape" : "Portrait";
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: `orient-${shape}`,
+            title: `${name} — ${value === orientation ? "showing" : "rotate the screen"}`,
+            "aria-label": name,
+            "aria-pressed": orientation === value,
+            onClick: () => setOrientation(value),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: shape })
+          },
+          value
+        );
+      }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Segmented,
         {
@@ -15342,6 +15428,7 @@ function App() {
   const deviceScaleFactor = useStore(selectDeviceScaleFactor);
   const presetId = useStore((s) => selectTab(s).presetId);
   const profileId = useStore((s) => selectTab(s).profileId);
+  const orientation = useStore((s) => selectTab(s).orientation);
   const viewMode = useStore((s) => selectTab(s).viewMode);
   const activeId = useStore((s) => s.activeId);
   const tabOrder = useStore((s) => s.tabOrder);
@@ -15422,13 +15509,14 @@ function App() {
   }, []);
   reactExports.useEffect(() => {
     if (!tabsKnown) return;
-    window.obsrv.reportUiState({ tabId: activeId, presetId, profileId, viewMode, panes, mode, targetBounds, canvasBounds });
-  }, [tabsKnown, activeId, presetId, profileId, viewMode, panes, mode, targetBounds, canvasBounds]);
+    window.obsrv.reportUiState({ tabId: activeId, presetId, profileId, orientation, viewMode, panes, mode, targetBounds, canvasBounds });
+  }, [tabsKnown, activeId, presetId, profileId, orientation, viewMode, panes, mode, targetBounds, canvasBounds]);
   reactExports.useEffect(() => {
     return window.obsrv.onAgentApply((patch) => {
       const s = useStore.getState();
       if (patch.presetId !== void 0) s.setPreset(patch.presetId);
       if (patch.profileId !== void 0) s.setProfile(patch.profileId);
+      if (patch.orientation !== void 0) s.setOrientation(patch.orientation);
       if (patch.viewMode !== void 0) s.setViewMode(patch.viewMode);
       if (patch.panes !== void 0) s.setPanes(patch.panes);
       if (patch.pixelExact !== void 0) s.setPixelExact(patch.pixelExact);

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

@@ -639,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-gYDbIgqJ.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-DvwDBeho.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))
@@ -245,5 +268,40 @@ function parseControlStatus(raw) {
     const tabIndex = raw.tabIndex ?? 0;
     if (typeof tabIndex !== 'number' || !Number.isInteger(tabIndex) || tabIndex < 0)
         return null;
-    return { version, url, presetId, profileId, viewMode, panes, mode, tabId, tabIndex };
+    // 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,6 +5,7 @@ exports.parseRect = parseRect;
 exports.parseInputEvent = parseInputEvent;
 exports.parseDeviceScaleFactor = parseDeviceScaleFactor;
 exports.parseSettings = parseSettings;
+exports.parseOrientation = parseOrientation;
 exports.parseMode = parseMode;
 exports.parseTabId = parseTabId;
 exports.parseUiState = parseUiState;
@@ -142,6 +143,15 @@ function parseSettings(raw) {
         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;
 }
@@ -197,12 +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.MAX_TABS_MAX = exports.MAX_TABS_MIN = 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;
@@ -22,6 +23,15 @@ exports.DEFAULT_SETTINGS = {
     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/package.json

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