getobsrv 0.8.0 → 0.9.0

package/README.md

@@ -79,6 +79,12 @@ middle-button drag, Option+drag or Option+wheel, or switch the toolbar's
 pixel-exact — the footer says so) and click anywhere in it to jump back to 1:1
 at that spot.
 
+The `Both / Target` control beside it hides the native pane so the target render
+takes the whole window — useful for a small mobile preset that would otherwise
+sit in half a window, and for agent captures. The native pane stays loaded while
+hidden, so the URL bar, back/forward and link clicks keep working exactly as
+they do side by side.
+
 ## Agent & CI use
 
 The same rendering pipeline runs headless — no window, JSON on stdout, humans
@@ -116,7 +122,9 @@ raster density — the PNG comes back as an inline image up to 1.5 MiB),
 If the desktop app is open with the toolbar's **Agent control** toggle on,
 `obsrv_snap` drives the *visible* window instead: you watch the URL load and
 the preset flip, and the agent gets back a capture of the app exactly as you
-see it (plus `obsrv_drive` to flip URL/preset/profile directly). Agents can
+see it (plus `obsrv_drive` to flip URL/preset/profile/panes directly — `panes:
+'target'` gives the target render the whole window, which is usually what you
+want before a capture). Agents can
 also scroll, click, pan and highlight while you watch — a drive session works
 as a guided demo. A `scroll` reports the offset it actually reached
 (`scrolled` / `scroller`), finds the inner scroll container on pages whose

package/out/main/index.js

@@ -14,6 +14,7 @@ const IPC = {
   forward: "obsrv:forward",
   setViewport: "obsrv:set-viewport",
   setNativeBounds: "obsrv:set-native-bounds",
+  setNativeVisible: "obsrv:set-native-visible",
   setMode: "obsrv:set-mode",
   sendInput: "obsrv:send-input",
   getHostInfo: "obsrv:get-host-info",
@@ -26,6 +27,7 @@ const IPC = {
   hostChanged: "obsrv:host-changed",
   targetLoading: "obsrv:target-loading",
   targetNavigating: "obsrv:target-navigating",
+  nativeFocused: "obsrv:native-focused",
   syncScroll: "obsrv:sync-scroll",
   applyScroll: "obsrv:apply-scroll",
   scrollResult: "obsrv:scroll-result",
@@ -157,10 +159,13 @@ function parseUiState(raw) {
   if (typeof profileId !== "string" || profileId.length === 0 || profileId.length > MAX_UI_ID) return null;
   if (viewMode !== "1:1" && viewMode !== "fit") return null;
   if (mode !== "url" && mode !== "image") return null;
+  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)
@@ -200,6 +205,7 @@ const CONTROL_COMMANDS = [
   "setPreset",
   "setProfile",
   "setViewMode",
+  "setPanes",
   "captureVisible",
   // v0.5 drive controls (spec §14 "Drive controls").
   "scroll",
@@ -244,6 +250,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 }";
 }
@@ -466,6 +475,12 @@ class ControlServer {
         const mode = payload.mode;
         return this.applyAndConfirm({ viewMode: mode }, (s) => s.viewMode === mode);
       }
+      case "setPanes": {
+        const err = panesApplyError(payload.panes);
+        if (err) return reply(400, { error: err });
+        const panes = payload.panes;
+        return this.applyAndConfirm({ panes }, (s) => s.panes === panes);
+      }
       case "captureVisible": {
         const capture = await this.deps.captureVisible();
         return reply(200, { ok: true, ...capture });
@@ -603,7 +618,7 @@ async function checkForUpdate(current, now) {
     request.end();
   });
 }
-const TOOLBAR_H = 44;
+const TOOLBAR_H = 82;
 const MAX_IMAGE_FILE_BYTES = 64 * 1024 * 1024;
 const SCROLL_REPLY_TIMEOUT_MS = 1e3;
 function hostInfo(win) {
@@ -675,13 +690,24 @@ function registerIpc(ctx) {
     } catch {
     }
   });
+  let modeIsLive = true;
+  let panesShowNative = true;
+  const applyNativeVisibility = () => {
+    native.setVisible(modeIsLive && panesShowNative);
+  };
   electron.ipcMain.on(IPC.setMode, (e, raw) => {
     if (!fromRenderer(e)) return;
     const mode = parseMode(raw);
     if (!mode) return;
-    const live = mode === "url";
-    native.setVisible(live);
-    bus.setEnabled(live);
+    modeIsLive = mode === "url";
+    applyNativeVisibility();
+    bus.setEnabled(modeIsLive);
+  });
+  electron.ipcMain.on(IPC.setNativeVisible, (e, raw) => {
+    if (!fromRenderer(e)) return;
+    if (typeof raw !== "boolean") return;
+    panesShowNative = raw;
+    applyNativeVisibility();
   });
   let rendererDrivesLayout = false;
   const fallbackLayout = () => {
@@ -766,7 +792,7 @@ function registerIpc(ctx) {
     settings = s;
     if (s.agentControl !== wasEnabled) applyAgentControl(s.agentControl);
   });
-  const uiState = { presetId: "1080p-24", profileId: "reference", viewMode: "1:1", mode: "url" };
+  const uiState = { presetId: "1080p-24", profileId: "reference", viewMode: "1:1", panes: "both", mode: "url" };
   let targetBounds = null;
   let canvasBounds = null;
   const MAX_PENDING_APPLIES = 32;
@@ -1213,6 +1239,9 @@ function boot() {
       if (!win.isDestroyed()) win.webContents.send(IPC.openImagePath, path);
     }
   });
+  native.webContents.on("focus", () => {
+    if (!win.isDestroyed()) win.webContents.send(IPC.nativeFocused);
+  });
   const target = new targetSource.TargetSource();
   target.on("load-error", (err) => {
     if (!win.isDestroyed()) win.webContents.send(IPC.loadError, err);
@@ -1227,7 +1256,7 @@ function boot() {
   const sync = attachSyncBus(native, target, (url) => {
     if (!win.isDestroyed()) win.webContents.send(IPC.urlChanged, url);
   });
-  const ctx = { win, native, target, bus, sync };
+  const ctx = { win, native, target, bus, sync, toolbarH: TOOLBAR_H };
   registerIpc(ctx);
   installMenu(ctx);
   win.on("close", () => {

package/out/mcp/server.js

@@ -160,6 +160,7 @@ const snapOutputShape = {
     presetId: zod_1.z.string().optional().describe('Live only: the screen preset selected in the app.'),
     profileId: zod_1.z.string().optional().describe('Live only: the panel profile selected in the app.'),
     viewMode: zod_1.z.string().optional().describe("Live only: the app's target-pane view (1:1 or fit)."),
+    panes: zod_1.z.string().optional().describe("Live only: 'both' (native pane beside the target) or 'target' (the target render has the whole window)."),
     width: zod_1.z
         .number()
         .optional()
@@ -245,6 +246,10 @@ const driveInputShape = {
     preset: zod_1.z.enum(PRESET_IDS).optional().describe('Apply this screen preset, exactly as clicking the toolbar would.'),
     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
+        .enum(['both', 'target'])
+        .optional()
+        .describe("Show both panes, or give the target render the whole window ('target'). Solo target is usually what you want before a capture."),
     pixelExact: zod_1.z.boolean().optional().describe("Toggle the toolbar's pixel-exact checkbox (pins the magnification to the host scale)."),
     focus: zod_1.z.boolean().optional().describe('true: bring the Obsrv window to the front first, so the user sees what follows.'),
     reload: zod_1.z.boolean().optional().describe('true: reload both panes (the same action as the toolbar reload).'),
@@ -303,6 +308,7 @@ const driveOutputShape = {
     presetId: zod_1.z.string(),
     profileId: zod_1.z.string(),
     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)."),
     scrolled: zod_1.z
         .object({ x: zod_1.z.number(), y: zod_1.z.number() })
@@ -475,6 +481,7 @@ async function liveSnap(app, input, notes) {
         presetId: status.presetId,
         profileId: status.profileId,
         viewMode: status.viewMode,
+        panes: status.panes,
         width,
         height,
         settled,
@@ -620,7 +627,7 @@ server.registerTool('obsrv_drive', {
         `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 → pixelExact → reload → back → forward → scroll → panTo → click → highlight → ` +
+        `preset → 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 ` +
         `click that navigates is reflected in that status — the call waits briefly (up to 2 s) for the commit. A ` +
@@ -664,6 +671,9 @@ server.registerTool('obsrv_drive', {
         if (input.viewMode !== undefined) {
             await (0, control_2.controlCall)(live.info, 'setViewMode', { mode: input.viewMode }, LIVE_APPLY_TIMEOUT_MS);
         }
+        if (input.panes !== undefined) {
+            await (0, control_2.controlCall)(live.info, 'setPanes', { panes: input.panes }, LIVE_APPLY_TIMEOUT_MS);
+        }
         if (input.pixelExact !== undefined) {
             await (0, control_2.controlCall)(live.info, 'setPixelExact', { on: input.pixelExact }, LIVE_APPLY_TIMEOUT_MS);
         }

package/out/preload/app.js

@@ -7,6 +7,7 @@ const IPC = {
   forward: "obsrv:forward",
   setViewport: "obsrv:set-viewport",
   setNativeBounds: "obsrv:set-native-bounds",
+  setNativeVisible: "obsrv:set-native-visible",
   setMode: "obsrv:set-mode",
   sendInput: "obsrv:send-input",
   getHostInfo: "obsrv:get-host-info",
@@ -19,6 +20,7 @@ const IPC = {
   hostChanged: "obsrv:host-changed",
   targetLoading: "obsrv:target-loading",
   targetNavigating: "obsrv:target-navigating",
+  nativeFocused: "obsrv:native-focused",
   openImage: "obsrv:open-image",
   focusUrl: "obsrv:focus-url",
   openImagePath: "obsrv:open-image-path",
@@ -57,6 +59,7 @@ const api = {
   forward: () => electron.ipcRenderer.send(IPC.forward),
   setViewport: (width, height, deviceScaleFactor) => electron.ipcRenderer.invoke(IPC.setViewport, width, height, deviceScaleFactor),
   setNativeBounds: (rect) => electron.ipcRenderer.send(IPC.setNativeBounds, rect),
+  setNativeVisible: (visible) => electron.ipcRenderer.send(IPC.setNativeVisible, visible),
   setMode: (mode) => electron.ipcRenderer.send(IPC.setMode, mode),
   sendInput: (ev) => electron.ipcRenderer.send(IPC.sendInput, ev),
   getHostInfo: () => electron.ipcRenderer.invoke(IPC.getHostInfo),
@@ -67,6 +70,13 @@ const api = {
   onLoadError: (cb) => subscribe(IPC.loadError, cb),
   onHostChanged: (cb) => subscribe(IPC.hostChanged, cb),
   onTargetLoading: (cb) => subscribe(IPC.targetLoading, cb),
+  onNativeFocused: (cb) => {
+    const listener = () => cb();
+    electron.ipcRenderer.on(IPC.nativeFocused, listener);
+    return () => {
+      electron.ipcRenderer.removeListener(IPC.nativeFocused, listener);
+    };
+  },
   onTargetNavigating: (cb) => {
     const listener = () => cb();
     electron.ipcRenderer.on(IPC.targetNavigating, listener);

package/out/renderer/assets/{index-BeroS4wv.css → index-CasW01OP.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;
 }
-.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); }
+/* 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); }
 
-/* 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 {
+/* 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;
+}
+
+/* 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; }
@@ -438,25 +593,10 @@ 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
@@ -478,18 +618,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;