getobsrv 0.12.0 → 0.14.0

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-DvwDBeho.css → index-BpvyvKfD.css}

@@ -190,7 +190,14 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
    starts at the window's left edge (the row's only border is at the bottom),
    which is the frame `--native-right` is expressed in. */
 .chrome-browse { position: relative; }
-.chrome-screen { height: 38px; background: var(--chrome-0); }
+/* The screen controls sit centred: they describe the render, and the render is
+   what the two panes flank, so the middle is the shortest reach from either
+   side. The AGENT chip is taken out of flow rather than balanced against a
+   spacer — otherwise the group would shift sideways the moment agent control
+   was switched on, and a control that moves when an unrelated setting changes
+   is worse than one slightly off-centre. */
+.chrome-screen { height: 38px; background: var(--chrome-0); justify-content: center; position: relative; }
+.chrome-screen .agent-activity { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
 .chrome-spacer { flex: 1 1 auto; }
 
 /* The tab strip. Ground is the darkest chrome step so an inactive tab (one
@@ -239,18 +246,19 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .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); }
+   and `.surround-control` already use to mark a choice, on the leading edge so
+   it never competes with the selected fill underneath it.
+
+   It wears the warn hue for as long as an agent holds the tab, selected or
+   not, so a background tab being worked on is visible without switching to it.
+   Hue is tolerable here because the tab strip is the row furthest from the
+   panes — and nowhere nearer them. No blur: a glow beside a render would spill
+   light onto the pixels being measured. */
+.tab.driven { box-shadow: inset 2px 0 0 var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--chrome-1)); }
+.tab.driven:has(> .tab-label[aria-selected='true']) { background: color-mix(in srgb, var(--warn) 22%, var(--chrome-3)); }
+.tab.driven > .tab-label { color: var(--text-0); }
+/* An arriving command: the rule brightens to the full hue for ~3s. */
+.tab.driven.busy { box-shadow: inset 3px 0 0 var(--warn); }
 
 .tab-close {
   flex: 0 0 auto;
@@ -600,13 +608,32 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
   inset: 0 -2.5px;
 }
 .pane-divider:hover, .pane-divider:focus-visible { background: var(--text-1); }
+/* Under the pointer the seam lights up its full height rather than growing a
+   handle. Every split-pane tool worth copying does it this way — VS Code,
+   Framer, Retool, Rive all leave the divider a hairline and let the cursor and
+   the widened hit area carry the affordance. Nothing floats over the pane
+   pixels this app exists to show. Painted as an overlay, so no layout moves
+   and the target pane is never re-rendered for a mouse-over. */
+.pane-divider::after {
+  content: '';
+  position: absolute;
+  inset: 0 -1px;
+  background: var(--text-1);
+  opacity: 0;
+}
+.pane-divider:hover::after, .pane-divider:focus-visible::after { opacity: 1; }
 /* The hairline is the affordance; a ring around a 1px element would be a box
    floating on the seam. Same reasoning as `.target-canvas:focus`. */
 .pane-divider:focus-visible { outline: none; }
 /* Square corners, no shadow, no blur: a rounded or blurred pane edge would
    destroy the very corner pixels the user opened this app to inspect. */
 .pane-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
-.native-slot { width: 100%; height: 100%; }
+/* One pixel short of the seam. The native view is an OS-composited layer sized
+   to exactly this rect, so anything the renderer paints inside it is hidden
+   underneath — without the inset, the divider's hover band would appear on the
+   target side only, since that side is the renderer's own canvas. The view
+   still sits exactly over the slot; the slot is simply 1px narrower. */
+.native-slot { width: calc(100% - 1px); height: 100%; }
 /* The backing store is already at device resolution; this only guards against
    a fractional CSS size introducing a resample. */
 .target-canvas { display: block; image-rendering: pixelated; }
@@ -639,6 +666,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
@@ -676,18 +738,23 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
 
 /* Agent control opens a loopback server, so the chip persists while it is
-   enabled; recent activity is a brighter text weight, not a colour. */
+   enabled. Something else driving the app is exactly the "attention, never
+   decoration" case the palette reserves --warn for: the user must be able to
+   tell at a glance that the window is not only theirs. Standing state is the
+   warn hue outlined; an arriving command fills it. No blur — a glow beside the
+   panes would spill light onto the pixels being measured, which is the one
+   thing this chrome may never do. */
 .agent-activity {
   flex: 0 0 auto;
-  color: var(--text-1);
-  border: 1px solid var(--line);
+  color: var(--warn);
+  border: 1px solid var(--warn);
   border-radius: 4px;
   padding: 2px 7px;
   font-size: 10px;
   letter-spacing: 0.08em;
   white-space: nowrap;
 }
-.agent-activity.active { color: var(--text-0); border-color: var(--text-0); }
+.agent-activity.active { color: var(--chrome-0); background: var(--warn); border-color: var(--warn); }
 
 /* Drawers sit beside the panes, never over them: the native WebContentsView is
    an OS-level overlay and would cover anything painted on top of it. */
@@ -944,3 +1011,66 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 }
 /* Nothing to erase: the button says so rather than pretending to act. */
 .clear-history:disabled { color: var(--text-1); cursor: default; }
+
+/* --- empty state ---------------------------------------------------------- */
+/* Shown when a tab has no page. It covers the target canvas rather than
+   replacing it: the canvas keeps its GL context and frame subscription, so the
+   first navigation does not pay for a context restore, and the native slot
+   keeps reporting its bounds. `--surround` is the pane field, so the state sits
+   on the same ground the render will. */
+.empty-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 24px;
+  background: var(--surround);
+  /* Above `.pane-divider`, which is itself raised to 1: the seam would
+     otherwise draw its hairline straight through the illustration. Covering it
+     must not disarm it, though — the split is still adjustable on a blank tab —
+     so everything here is transparent to the pointer except the form. */
+  z-index: 2;
+  pointer-events: none;
+}
+.empty-form { pointer-events: auto; }
+.panes { position: relative; }
+.empty-state svg { width: 244px; max-width: 100%; height: auto; }
+.empty-lede {
+  margin: 0;
+  color: var(--text-1);
+  text-align: center;
+  max-width: 34ch;
+}
+.empty-form { display: flex; gap: 8px; width: 100%; max-width: 420px; }
+.empty-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 30px;
+  padding: 0 10px;
+  color: var(--text-0);
+  background: var(--field);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  font: inherit;
+  font-family: var(--mono);
+}
+.empty-input:focus-visible { outline: none; border-color: var(--text-1); }
+.empty-go {
+  height: 30px;
+  padding: 0 14px;
+  color: var(--text-0);
+  background: var(--chrome-2);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  font: inherit;
+}
+.empty-go:hover:not(:disabled) { background: var(--chrome-3); }
+.empty-go:disabled { color: var(--text-1); opacity: 0.6; }
+.empty-error { margin: 0; color: var(--error); }
+/* The readouts stay legible through the empty state: they still name the screen
+   being simulated, which is the one fact that survives having no page. Stacking
+   rather than insetting the overlay, so nothing depends on the footer's height. */
+.pane-footer { position: relative; z-index: 3; }