getobsrv 0.8.0 → 0.10.0

package/out/renderer/assets/{index-BeroS4wv.css → index-CZUlXhEb.css}

@@ -106,6 +106,7 @@
   --chrome-0: #141414;
   --chrome-1: #1c1c1c;
   --chrome-2: #262626;
+  --chrome-3: #3a3a3a;
   --line: #333333;
   --text-0: #ededed;
   --text-1: #8a8a8a;
@@ -131,66 +132,206 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .app { height: 100%; display: flex; flex-direction: column; }
 .muted { color: var(--text-1); }
 .warn { color: var(--warn); }
-.toolbar .warn { white-space: nowrap; }
-
-/* 44px matches TOOLBAR_H in src/main/ipc.ts, used until NativeSlot reports. */
-.toolbar {
-  flex: 0 0 44px;
+.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. */
+.chrome { flex: 0 0 auto; }
+.chrome-row {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 10px;
-  background: var(--chrome-1);
   border-bottom: 1px solid var(--line);
 }
-.toolbar button {
+.chrome-browse { height: 44px; background: var(--chrome-1); }
+.chrome-screen { height: 38px; background: var(--chrome-0); }
+.chrome-spacer { flex: 1 1 auto; }
+
+/* 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. */
+.icon-button {
+  flex: 0 0 auto;
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   background: var(--chrome-2);
   color: var(--text-0);
   border: 1px solid var(--line);
-  border-radius: 4px;
-  width: 26px;
-  height: 24px;
+  border-radius: 5px;
   cursor: pointer;
 }
-.toolbar select {
-  background: var(--chrome-2);
-  color: var(--text-0);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  height: 24px;
-}
-.url-form { flex: 1 1 auto; min-width: 120px; }
+
+.url-form { flex: 1 1 auto; min-width: 160px; }
 .url-form input {
   width: 100%;
-  height: 24px;
+  height: 30px;
   box-sizing: border-box;
-  padding: 0 8px;
+  padding: 0 10px;
+  font-size: 12.5px;
   background: var(--field);
   color: var(--text-0);
   border: 1px solid var(--line);
-  border-radius: 4px;
+  border-radius: 5px;
 }
 .url-form input[readonly] { color: var(--text-1); }
+
+.status-cluster { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 10px; }
 .badge-error {
   color: var(--error);
   border: 1px solid var(--error);
   border-radius: 4px;
-  padding: 1px 6px;
+  padding: 2px 6px;
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+}
+/* An update is neither a warning nor an error, so it carries no colour. */
+.update-button {
+  flex: 0 0 auto;
+  height: 30px;
+  padding: 0 10px;
+  white-space: nowrap;
+  font-family: var(--mono);
+  font-size: 11.5px;
   font-variant-numeric: tabular-nums;
+  background: var(--chrome-2);
+  color: var(--text-0);
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+/* Our surface, the platform's popup: the real select sits transparent on
+   top, keeping the native menu, keyboard handling and Playwright's
+   `selectOption` working unchanged. */
+.select-shell {
+  position: relative;
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  height: 30px;
+  box-sizing: border-box;
+  padding: 0 26px 0 9px;
+  font-size: 11.5px;
+  white-space: nowrap;
+  background: var(--chrome-2);
+  color: var(--text-0);
+  border: 1px solid var(--line);
+  border-radius: 5px;
+}
+.select-shell select {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  appearance: none;
+  cursor: pointer;
+}
+.select-shell .select-chevron {
+  position: absolute;
+  right: 7px;
+  display: flex;
+  color: var(--text-1);
+  pointer-events: none;
+}
+
+/* Segmented groups. Pressed is a fill step and weight, never hue. */
+.segmented {
+  flex: 0 0 auto;
+  display: inline-flex;
+  height: 30px;
+  /* A `div`, unlike a `button`, does not get the UA's border-box: without
+     this the 1px border makes the group 32px and it sits 1px proud of every
+     other 30px control in the row. */
+  box-sizing: border-box;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  overflow: hidden;
+}
+.segmented button {
+  height: 100%;
+  padding: 0 11px;
+  font-size: 11.5px;
+  background: var(--chrome-2);
+  color: var(--text-1);
+  border: 0;
+  border-right: 1px solid var(--line);
+  border-radius: 0;
+  cursor: pointer;
+}
+.segmented button:last-child { border-right: 0; }
+.segmented button[aria-pressed='true'] { background: var(--chrome-3); color: var(--text-0); }
+
+/* Right-aligned deliberately: the native pane is an OS-level WebContentsView
+   that covers renderer paint, so a menu reaching the left half of the window
+   would be invisible. 200px against a 900px minWidth always fits the target
+   pane. */
+.overflow { position: relative; flex: 0 0 auto; }
+.overflow-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 10;
+  width: 200px;
+  padding: 5px 0;
+  font-size: 11.5px;
+  background: var(--chrome-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+.menu-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 30px;
+  padding: 0 11px;
+  text-align: left;
+  background: none;
+  color: var(--text-0);
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+}
+.menu-row:hover { background: var(--chrome-3); }
+/* Which drawer is open. The fill step is the chrome's one pressed idiom,
+   shared with `.segmented`; `:hover` is the same fill, so the pressed row also
+   carries a 2px inset rule down its leading edge. That marker is the part that
+   survives hover — hovering any row fills it, but only the open drawer's row
+   keeps the rule — and it is the same neutral weight the surround control uses
+   to mark its selection. No hue, here or anywhere else in the chrome. */
+.menu-row[aria-pressed='true'] {
+  background: var(--chrome-3);
+  box-shadow: inset 2px 0 0 var(--text-0);
+}
+.menu-sep { height: 1px; margin: 5px 0; background: var(--line); }
+/* Sized to the 16px icons the other rows lead with, and stripped of the UA's
+   own margins, so every label in the menu starts at the same x — a checkbox
+   row and an icon row otherwise indent differently. */
+.overflow-menu input[type='checkbox'] {
+  accent-color: var(--text-0);
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  margin: 0;
 }
-.pixel-exact { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
-/* The checked state would otherwise take the OS accent colour. */
-.toolbar input[type='checkbox'] { accent-color: var(--text-0); }
 
-/* Focus is a 1px inset neutral ring (the style spec's "weight and a 1px
-   inset ring"), never Chromium's accent-coloured outline. Pointer focus on
-   buttons and selects shows nothing; keyboard focus (and any focus in a
-   text field) shows the ring. */
-.toolbar :is(button, select, input):focus { outline: none; }
-.toolbar :is(button, select, input):focus-visible {
+/* Focus is a 1px inset neutral ring, never Chromium's accent outline. */
+.chrome :is(button, select, input):focus { outline: none; }
+.chrome :is(button, select, input):focus-visible {
   outline: 1px solid var(--text-1);
   outline-offset: -1px;
 }
+/* The real select is transparent, so its ring must land on the shell. */
+.select-shell:has(select:focus-visible) { outline: 1px solid var(--text-1); outline-offset: -1px; }
 
 .panes { flex: 1 1 auto; display: flex; min-height: 0; }
 .pane {
@@ -232,11 +373,29 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 }
 .pane-footer .role { color: var(--text-0); letter-spacing: 0.08em; }
 
-/* Segmented surround control. Active state is weight and a border, not hue. */
-.surround-control { display: flex; border: 1px solid var(--line); border-radius: 4px; }
+/* 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
+   the UA, so the 1px border would otherwise push the group to 32px.
+
+   The swatch stays 12px: the swatch is the affordance, the button around it is
+   just the target. The pressed state stays an inset `--text-0` ring, and is
+   the one place the chrome does not use the `--chrome-3` fill step — a fill
+   ringing a 12px swatch competes with the swatch for the eye, and `--chrome-3`
+   lands two steps from the graphite swatch itself. This is the one control
+   whose whole job is judging a tint, so the marker stays off the tint. */
+.surround-control {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  display: inline-flex;
+  height: 30px;
+  border: 1px solid var(--line);
+  border-radius: 5px;
+  overflow: hidden;
+}
 .surround-control button {
-  width: 22px;
-  height: 22px;
+  width: 28px;
+  height: 100%;
   border: 0;
   border-right: 1px solid var(--line);
   border-radius: 0;
@@ -247,28 +406,25 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .surround-control button[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--text-0); }
 .surround-swatch { display: block; width: 12px; height: 12px; margin: 0 auto; }
 
+/* Nothing sits to the target pane's left in solo view, so the divider goes. */
+.panes[data-panes='target'] .target-pane { border-left: 0; }
+
 /* Numbers never jitter as a slider moves. */
 .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
 
-/* An open drawer's button: weight and a 1px border, not hue. */
-.toolbar :is(.toggle-panel, .toggle-settings, .agent-toggle)[aria-pressed='true'] {
-  border-color: var(--text-0);
-  background: var(--chrome-1);
-}
-
-/* Agent control: same neutral chrome as every other toggle; the activity
-   badge is text-weight only — an agent driving the window is a status, not
-   an alert. */
-.toolbar .agent-toggle { width: auto; padding: 0 8px; white-space: nowrap; }
+/* Agent control opens a loopback server, so the chip persists while it is
+   enabled; recent activity is a brighter text weight, not a colour. */
 .agent-activity {
+  flex: 0 0 auto;
   color: var(--text-1);
   border: 1px solid var(--line);
   border-radius: 4px;
-  padding: 1px 6px;
-  font-size: 11px;
-  letter-spacing: 0.5px;
+  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); }
 
 /* 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. */
@@ -363,7 +519,6 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 }
 .strip button:focus { outline: none; }
 .strip button:focus-visible { outline: 1px solid var(--text-1); outline-offset: 1px; }
-.toolbar .close-image { width: auto; padding: 0 8px; }
 /* `safe`: a file wider than the pane scrolls from its left edge instead of
    losing it off-screen. */
 .image-pane .pane-body { display: flex; align-items: flex-start; justify-content: safe center; }
@@ -396,6 +551,27 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
    `left: 0` holds while a wide canvas is scrolled horizontally. The fill is a
    neutral grey: only the rule under it is red, so the one chromatic thing on
    screen is the error itself. */
+/* At 1:1 the render usually overflows and the pane is a scroll box, so it
+   starts at the top-left and you pan around it. When it is *smaller* than the
+   pane — a small preset, fit mode, or solo target on a wide window — hugging
+   the corner leaves it stranded against the chrome with dead field to the
+   right. Centre it instead.
+
+   `safe` is what lets one rule serve both cases: it falls back to start
+   alignment the moment the content overflows, so the top-left of an oversized
+   render stays reachable by scrolling. Plain `center` would push it out of
+   reach. The image pane already centres this way. */
+.target-pane .pane-body {
+  display: flex;
+  flex-direction: column;
+  align-items: safe center;
+  justify-content: safe center;
+}
+/* The stall notice spans the pane, not the canvas: it is sticky at `left: 0`
+   and must stay pane-width while a wide canvas scrolls under it, so it opts
+   out of the centring its sibling wants. */
+.target-pane .pane-body > .stall { align-self: stretch; }
+
 /* position: relative anchors the agent highlight to the canvas origin. */
 .target-wrap { min-width: min-content; position: relative; }
 
@@ -438,28 +614,15 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .stall button:focus { outline: none; }
 .stall button:focus-visible { outline: 1px solid var(--text-1); outline-offset: 1px; }
 
-/* v1.1 fit & pan. The 1:1/Fit segmented control follows the surround
-   control's grammar: active state is weight and an inset ring, never hue. */
-.view-control { display: flex; border: 1px solid var(--line); border-radius: 4px; }
-.view-control button {
-  width: auto;
-  height: 22px;
-  padding: 0 8px;
-  border: 0;
-  border-right: 1px solid var(--line);
-  border-radius: 0;
-  background: var(--chrome-2);
-  font-variant-numeric: tabular-nums;
-  cursor: pointer;
-}
-.view-control button:last-child { border-right: 0; }
-.view-control button[aria-pressed='true'] {
-  box-shadow: inset 0 0 0 1px var(--text-0);
-  font-weight: 600;
-}
+/* v1.1 fit & pan. The 1:1/Fit control is a `Segmented`, so `.segmented` is
+   the whole of its styling — the old `.view-control button` rules lived here,
+   and being (0,1,1) and later in the file they beat `.segmented button` and
+   split the two groups apart. Nothing about 1:1/Fit is control-specific. */
 
-/* The overview invites the jump-to-1:1 click; the pan chords (middle drag,
-   Option+drag) show the grab affordances. Cursors only — no overlay may sit
+/* Option is what a view gesture needs, so Option is what the cursor answers:
+   the jump-to-1:1 zoom in fit, the grab affordances for the pan chords
+   (middle drag, Option+drag) at 1:1. Unmodified, both views are interactive
+   and the page's own cursors show through. Cursors only — no overlay may sit
    on the pixels under inspection. */
 .target-canvas.fit { cursor: zoom-in; }
 .target-canvas.pan-ready { cursor: grab; }
@@ -478,18 +641,6 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .browser-notice p { margin: 0.75rem 0 0; color: var(--text-1); }
 .browser-notice code { font-family: var(--mono); }
 
-/* An update is neither a warning nor an error, so it carries no colour: the
-   only chromatic pixels in this chrome stay reserved for real attention. */
-/* `.toolbar button` is (0,1,1) and pins every button to a 26px square, so this
-   needs two classes to outrank it — a bare `.update-button` renders as "v0.". */
-.toolbar .update-button {
-  font-family: var(--mono);
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  width: auto;
-  flex: 0 0 auto;
-  padding: 0 8px;
-}
 .version-block { margin: 8px 0; }
 .version-row {
   display: flex;

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-Cgx8iixu.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-BeroS4wv.css">
+    <script type="module" crossorigin src="./assets/index-CQVE5hF3.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-CZUlXhEb.css">
   </head>
   <body>
     <div id="root"></div>

package/out/shared/control.js

@@ -9,6 +9,7 @@ exports.defaultControlFilePath = defaultControlFilePath;
 exports.presetApplyError = presetApplyError;
 exports.profileApplyError = profileApplyError;
 exports.viewModeApplyError = viewModeApplyError;
+exports.panesApplyError = panesApplyError;
 exports.pixelExactApplyError = pixelExactApplyError;
 exports.parseClick = parseClick;
 exports.parseHighlight = parseHighlight;
@@ -48,6 +49,7 @@ exports.CONTROL_COMMANDS = [
     'setPreset',
     'setProfile',
     'setViewMode',
+    'setPanes',
     'captureVisible',
     // v0.5 drive controls (spec §14 "Drive controls").
     'scroll',
@@ -151,6 +153,9 @@ function profileApplyError(id) {
 function viewModeApplyError(v) {
     return v === '1:1' || v === 'fit' ? null : `setViewMode payload must be { mode: '1:1' | 'fit' }`;
 }
+function panesApplyError(v) {
+    return v === 'both' || v === 'target' ? null : `setPanes payload must be { panes: 'both' | 'target' }`;
+}
 function pixelExactApplyError(v) {
     return typeof v === 'boolean' ? null : 'setPixelExact payload must be { on: boolean }';
 }
@@ -222,5 +227,11 @@ function parseControlStatus(raw) {
         return null;
     if (mode !== 'url' && mode !== 'image')
         return null;
-    return { version, url, presetId, profileId, viewMode, mode };
+    // An app older than this field is common — the MCP server ships on npm and
+    // the app ships as a DMG, so they update independently. Absent defaults;
+    // present-but-wrong is still a malformed status.
+    const panes = raw.panes ?? 'both';
+    if (panes !== 'both' && panes !== 'target')
+        return null;
+    return { version, url, presetId, profileId, viewMode, panes, mode };
 }

package/out/shared/ipcPayloads.js

@@ -153,10 +153,17 @@ function parseUiState(raw) {
         return null;
     if (mode !== 'url' && mode !== 'image')
         return null;
+    // A renderer older than this field cannot exist (both ship in one app), but
+    // the report is validated like any other payload: absent defaults to both,
+    // present-but-wrong drops the whole report.
+    const panes = raw.panes ?? 'both';
+    if (panes !== 'both' && panes !== 'target')
+        return null;
     return {
         presetId,
         profileId,
         viewMode,
+        panes,
         mode,
         targetBounds: parseRect(raw.targetBounds),
         canvasBounds: parseRect(raw.canvasBounds),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "getobsrv",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "See your site the way 1x screens see it",
   "main": "./out/main/index.js",
   "bin": {
@@ -42,6 +42,7 @@
     "@vitest/browser": "^3.2.7",
     "electron-builder": "^26.15.3",
     "electron-vite": "^3.1.0",
+    "lucide-react": "^1.34.0",
     "playwright": "^1.62.1",
     "typescript": "^5.9.3",
     "vite": "^6.4.3",