getobsrv 0.10.0 → 0.12.0

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

@@ -3,12 +3,19 @@ const electron = require("electron");
 const node_events = require("node:events");
 const node_path = require("node:path");
 const MAX_VIEWPORT = 4096;
+const SPLIT_MIN = 0.1;
+const SPLIT_MAX = 0.9;
+const MAX_TABS_MIN = 2;
+const MAX_TABS_MAX = 32;
 const DEFAULT_SETTINGS = {
   hostDiagonalInches: 27,
   hostNits: 500,
   agentControl: false,
   updateCheck: true,
-  lastUpdateCheck: 0
+  lastUpdateCheck: 0,
+  recordHistory: true,
+  split: 0.5,
+  maxTabs: 12
 };
 const SCREEN_PRESETS = [
   // Laptops — ordered largest to smallest panel, then the denser 1080p outlier.
@@ -140,6 +147,12 @@ class TargetSource extends node_events.EventEmitter {
    */
   internal = false;
   disposed = false;
+  /**
+   * What the owner asked for, not what the current window happens to be doing.
+   * See `setPainting` — `recreate()` swaps in a fresh webContents that starts
+   * painting, so the wish has to outlive the window that was serving it.
+   */
+  paintingWanted = true;
   constructor(fps = DEFAULT_FPS, options = {}) {
     super();
     this.fps = fps;
@@ -167,6 +180,7 @@ class TargetSource extends node_events.EventEmitter {
     this.firstNavDone = false;
     const wc = win.webContents;
     wc.setFrameRate(this.fps);
+    if (!this.paintingWanted) wc.stopPainting();
     wc.setAudioMuted(true);
     this.defaultUserAgent ??= wc.getUserAgent();
     wc.setUserAgent(this.dsf > 1 && this.mobileEmulation ? MOBILE_USER_AGENT : this.defaultUserAgent);
@@ -241,6 +255,16 @@ class TargetSource extends node_events.EventEmitter {
       if (this.win === win) this.firstNavDone = true;
     });
   }
+  /**
+   * Resolves once this window's own initial `about:blank` has committed.
+   * A navigation issued before that lands is undone by it — the commit
+   * arrives late and `SyncBus` mirrors it into the native pane — so a caller
+   * that builds a source and immediately drives it waits here first. Follows
+   * the current window: a dsf change swaps in a fresh one with a fresh gate.
+   */
+  get ready() {
+    return this.firstNavigation;
+  }
   /**
    * Mobile viewport semantics for dsf > 1 (see class doc). Post-commit only:
    * enabling emulation before a window's first navigation commits segfaults
@@ -340,6 +364,26 @@ class TargetSource extends node_events.EventEmitter {
   getDeviceScaleFactor() {
     return this.dsf;
   }
+  /**
+   * Stops or resumes rasterisation without touching the page. Offscreen
+   * rendering runs at a fixed frame rate with `backgroundThrottling: false`,
+   * so a source nobody is looking at would otherwise paint a full viewport
+   * forever for nobody. The page keeps its DOM, timers, network and scroll —
+   * only pixel production stops.
+   */
+  setPainting(painting) {
+    if (this.paintingWanted === painting) return;
+    this.paintingWanted = painting;
+    if (this.win.isDestroyed()) return;
+    const wc = this.win.webContents;
+    if (wc.isDestroyed()) return;
+    if (painting) wc.startPainting();
+    else wc.stopPainting();
+  }
+  /** What was last asked of `setPainting`, not what the window is doing. */
+  get painting() {
+    return this.paintingWanted;
+  }
   /** Forces a full-frame repaint, e.g. after the renderer loses its texture. */
   invalidate() {
     if (!this.win.isDestroyed()) this.win.webContents.invalidate();
@@ -365,10 +409,15 @@ class TargetSource extends node_events.EventEmitter {
     if (!this.win.isDestroyed()) this.win.destroy();
   }
 }
+exports.ALLOWED_URL_SCHEMES = ALLOWED_URL_SCHEMES;
 exports.DEFAULT_SETTINGS = DEFAULT_SETTINGS;
 exports.IMAGE_EXTENSIONS = IMAGE_EXTENSIONS;
+exports.MAX_TABS_MAX = MAX_TABS_MAX;
+exports.MAX_TABS_MIN = MAX_TABS_MIN;
 exports.PANEL_PROFILES = PANEL_PROFILES;
 exports.SCREEN_PRESETS = SCREEN_PRESETS;
+exports.SPLIT_MAX = SPLIT_MAX;
+exports.SPLIT_MIN = SPLIT_MIN;
 exports.TargetSource = TargetSource;
 exports.classifyFileNavigation = classifyFileNavigation;
 exports.findPreset = findPreset;

package/out/mcp/server.js

@@ -161,6 +161,8 @@ const snapOutputShape = {
     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)."),
+    tabId: zod_1.z.string().optional().describe('Live only: which of the app\'s tabs was captured (the active one). Empty from an app older than tabs.'),
+    tabIndex: zod_1.z.number().optional().describe("Live only: that tab's 0-based position in the strip."),
     width: zod_1.z
         .number()
         .optional()
@@ -310,6 +312,12 @@ const driveOutputShape = {
     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)."),
+    tabId: zod_1.z
+        .string()
+        .describe('Which of the app\'s tabs this acted on. Every command resolves the active tab as it arrives, so a tabId ' +
+        'that changed between two calls means the user switched tabs under you. Empty string from an app older ' +
+        'than tabs, which has only one.'),
+    tabIndex: zod_1.z.number().describe('That tab\'s 0-based position in the strip.'),
     scrolled: zod_1.z
         .object({ x: zod_1.z.number(), y: zod_1.z.number() })
         .nullable()
@@ -482,6 +490,8 @@ async function liveSnap(app, input, notes) {
         profileId: status.profileId,
         viewMode: status.viewMode,
         panes: status.panes,
+        tabId: status.tabId,
+        tabIndex: status.tabIndex,
         width,
         height,
         settled,
@@ -520,7 +530,11 @@ server.registerTool('obsrv_snap', {
         `capture; that visible steering is the point of live mode.\n\n` +
         `A live snap only navigates when the app is showing a different URL; the result's \`navigated\` says which ` +
         `happened. Navigating is a fresh load, so it starts at the top of the page — to photograph a scrolled or ` +
-        `panned state, use obsrv_drive with \`capture\` instead, which never navigates unless you ask it to.`,
+        `panned state, use obsrv_drive with \`capture\` instead, which never navigates unless you ask it to.\n\n` +
+        `Tabs: the app can hold several sessions open as tabs, and a live snap acts on the one in front — which the ` +
+        `user can change at any moment. The result names it (\`tabId\`, \`tabIndex\`); compare across calls if you ` +
+        `need to know it did not move. There is no way to name a different tab, and no way to open, close or ` +
+        `switch tabs — those are the user's.`,
     inputSchema: snapInputShape,
     outputSchema: snapOutputShape,
     annotations: { readOnlyHint: true, destructiveHint: false, openWorldHint: true },
@@ -641,6 +655,12 @@ server.registerTool('obsrv_drive', {
         `pass \`url\`, so this is how you photograph a scrolled or panned state: scroll, then capture, in one call. ` +
         `obsrv_snap is the other way round — it points the app at a URL first, and pointing it somewhere new is a ` +
         `fresh load that starts at the top.\n\n` +
+        `Tabs: the app can hold several sessions open as tabs, each with its own URL, screen preset and page state. ` +
+        `Every command here acts on whichever tab is in front *when that command arrives* — nothing is bound to a ` +
+        `tab for the length of the call — and the returned status names it (\`tabId\`, \`tabIndex\`). A \`tabId\` ` +
+        `that changed between two calls means the user switched tabs under you; re-read the state before trusting ` +
+        `what you knew. You cannot name a different tab, nor open, close or switch tabs — those are the user's. An ` +
+        `empty \`tabId\` means an app older than tabs, which has only the one.\n\n` +
         `Requires the app to be open with its "Agent control" toolbar toggle on; errors otherwise. This tool ` +
         `mutates visible app state (it changes what the user's window shows, and a click can act on the live page).`,
     inputSchema: driveInputShape,

package/out/preload/app.js

@@ -16,6 +16,7 @@ const IPC = {
   frame: "obsrv:frame",
   frameSubscribe: "obsrv:frame-subscribe",
   urlChanged: "obsrv:url-changed",
+  titleChanged: "obsrv:title-changed",
   loadError: "obsrv:load-error",
   hostChanged: "obsrv:host-changed",
   targetLoading: "obsrv:target-loading",
@@ -31,7 +32,15 @@ const IPC = {
   getUpdate: "obsrv:get-update",
   checkUpdate: "obsrv:check-update",
   openRelease: "obsrv:open-release",
-  updateStatus: "obsrv:update-status"
+  updateStatus: "obsrv:update-status",
+  getHistory: "obsrv:get-history",
+  clearHistory: "obsrv:clear-history",
+  historyChanged: "obsrv:history-changed",
+  getTabs: "obsrv:get-tabs",
+  addTab: "obsrv:add-tab",
+  closeTab: "obsrv:close-tab",
+  activateTab: "obsrv:activate-tab",
+  tabsChanged: "obsrv:tabs-changed"
 };
 function subscribe(channel, cb) {
   const listener = (_e, v) => cb(v);
@@ -66,24 +75,16 @@ const api = {
   getSettings: () => electron.ipcRenderer.invoke(IPC.getSettings),
   setSettings: (s) => electron.ipcRenderer.invoke(IPC.setSettings, s),
   onFrame: subscribeFrames,
+  // Each of these names the tab it describes: main no longer gates them on the
+  // tab being in front, so a background tab keeps its own strip entry current
+  // without touching the address bar of the tab that is showing.
   onUrlChanged: (cb) => subscribe(IPC.urlChanged, cb),
+  onTitleChanged: (cb) => subscribe(IPC.titleChanged, cb),
   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);
-    return () => {
-      electron.ipcRenderer.removeListener(IPC.targetNavigating, listener);
-    };
-  },
+  onNativeFocused: (cb) => subscribe(IPC.nativeFocused, cb),
+  onTargetNavigating: (cb) => subscribe(IPC.targetNavigating, cb),
   onOpenImage: (cb) => {
     const listener = () => cb();
     electron.ipcRenderer.on(IPC.openImage, listener);
@@ -112,6 +113,14 @@ const api = {
   getUpdate: () => electron.ipcRenderer.invoke(IPC.getUpdate),
   checkUpdate: () => electron.ipcRenderer.invoke(IPC.checkUpdate),
   openRelease: () => electron.ipcRenderer.invoke(IPC.openRelease),
-  onUpdateStatus: (cb) => subscribe(IPC.updateStatus, cb)
+  onUpdateStatus: (cb) => subscribe(IPC.updateStatus, cb),
+  getHistory: () => electron.ipcRenderer.invoke(IPC.getHistory),
+  clearHistory: () => electron.ipcRenderer.invoke(IPC.clearHistory),
+  onHistoryChanged: (cb) => subscribe(IPC.historyChanged, cb),
+  getTabs: () => electron.ipcRenderer.invoke(IPC.getTabs),
+  addTab: () => electron.ipcRenderer.invoke(IPC.addTab),
+  closeTab: (id) => electron.ipcRenderer.send(IPC.closeTab, id),
+  activateTab: (id) => electron.ipcRenderer.send(IPC.activateTab, id),
+  onTabsChanged: (cb) => subscribe(IPC.tabsChanged, cb)
 };
 electron.contextBridge.exposeInMainWorld("obsrv", api);

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

@@ -129,15 +129,53 @@
 :root[data-surround='grey50'] { --surround: #808080; }
 
 html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color: var(--text-0); }
-.app { height: 100%; display: flex; flex-direction: column; }
+/* `--split` (the native pane's share), `--pane-min` and `--seam` live here
+   rather than on `.panes` because the chrome needs them too — see
+   `--native-right` below. `App` writes the first two inline; the fallbacks
+   keep the layout sane if either is ever missing. */
+.app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  --split: 0.5;
+  --pane-min: 240px;
+  --seam: 1px;
+  --drawer-w: 0px;
+}
+
+/* The drawer's whole box. Declared here so the panes row's width can be
+   derived from the window's without measuring either; `.drawer` sizes itself
+   from the same value, so the two cannot drift. */
+.app:has(.drawer) { --drawer-w: 309px; }
+
+/* Where the native pane's right edge falls, in window coordinates: the very
+   clamp `.panes > .pane:first-child` is laid out with, applied to the width
+   the row gets (the window, less whatever a drawer takes). A style rule, not
+   a measurement — the split is already a custom property, so nothing here
+   observes the layout it is describing.
+   Solo target has no native view, so the clamp collapses to zero. */
+.app[data-panes='both'] {
+  --native-right: round(
+    down,
+    clamp(
+      var(--pane-min),
+      calc((100vw - var(--drawer-w) - var(--seam)) * var(--split)),
+      calc(100vw - var(--drawer-w) - var(--seam) - var(--pane-min))
+    ),
+    1px
+  );
+}
+.app[data-panes='target'] { --native-right: 0px; }
 .muted { color: var(--text-1); }
 .warn { color: var(--warn); }
 .chrome .warn { white-space: nowrap; }
 
-/* Two strips. Browsing above; the controls that describe the simulated
-   screen below, on a darker ground so the rows read as separate registers.
-   44 + 38 = 82 must equal TOOLBAR_H in src/main/ipc.ts. Pinned heights also
-   keep a late reflow from resizing the panes under NativeSlot's observer. */
+/* Three strips. The tab strip on top — furthest from the panes, as every
+   browser puts it; browsing below it; the controls that describe the simulated
+   screen last, on a darker ground so the rows read as separate registers.
+   32 + 44 + 38 = 114 must equal TOOLBAR_H in src/main/ipc.ts. Pinned heights
+   also keep a late reflow from resizing the panes under NativeSlot's
+   observer. */
 .chrome { flex: 0 0 auto; }
 .chrome-row {
   box-sizing: border-box;
@@ -148,9 +186,114 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
   border-bottom: 1px solid var(--line);
 }
 .chrome-browse { height: 44px; background: var(--chrome-1); }
+/* The containing block the URL-history list falls back to. Its padding box
+   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); }
 .chrome-spacer { flex: 1 1 auto; }
 
+/* The tab strip. Ground is the darkest chrome step so an inactive tab (one
+   step up) already reads as a raised object, and the active one has somewhere
+   further to go. Neutral throughout: a coloured tab beside the panes would
+   shift the perceived hue of the render under test, which is the one thing
+   this chrome may never do. */
+.chrome-tabs { height: 32px; gap: 4px; padding: 0 6px; background: var(--chrome-0); }
+/* The tabs scroll rather than shrink past legibility; the new-tab button is
+   outside this box so it never scrolls away from the pointer. */
+.tabs { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+.tabs::-webkit-scrollbar { display: none; }
+
+.tab {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 180px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  background: var(--chrome-1);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+}
+.tab-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0 2px 0 8px;
+  background: none;
+  border: 0;
+  color: var(--text-1);
+  font: inherit;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+}
+.tab:hover { background: var(--chrome-2); }
+/* The chrome's one selected idiom: the `--chrome-3` fill step plus weight,
+   exactly as `.segmented button[aria-pressed]` and `.menu-row[aria-pressed]`
+   mark theirs. Selection is carried by the label button's `aria-selected`, so
+   the fill is derived from it rather than duplicated onto the wrapper. */
+.tab:has(> .tab-label[aria-selected='true']) { background: var(--chrome-3); border-color: var(--chrome-3); }
+.tab > .tab-label[aria-selected='true'] { color: var(--text-0); font-weight: 600; }
+
+/* The driven tab, while agent control is on. The 2px inset rule `.menu-row`
+   and `.surround-control` already use to mark a choice — the same idiom, in
+   the same direction, so it reads as "this one" and not as a new language.
+   It sits on the leading edge rather than surrounding the tab, so it never
+   competes with the selected fill underneath it (the driven tab is always the
+   selected one, and two full outlines on one control would be noise).
+
+   Neutral, and only neutral: --text-1 standing, --text-0 for ~3s after each
+   command, exactly the step the AGENT chip makes. No hue and no glow — a blur
+   here would be the first shadow in the app, and the rule against it is what
+   stops the chrome biasing the render below. */
+.tab.driven { box-shadow: inset 2px 0 0 var(--text-1); }
+.tab.driven.busy { box-shadow: inset 2px 0 0 var(--text-0); }
+
+.tab-close {
+  flex: 0 0 auto;
+  width: 18px;
+  height: 18px;
+  margin-right: 3px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: none;
+  border: 0;
+  border-radius: 3px;
+  color: var(--text-1);
+  cursor: pointer;
+}
+/* Only on hover of the tab: sixteen ✕ glyphs at rest is a busier strip than
+   the titles they sit beside, and the titles are the content here. */
+.tab-close { opacity: 0; }
+.tab:hover .tab-close,
+.tab:has(> .tab-label[aria-selected='true']) .tab-close,
+.tab-close:focus-visible { opacity: 1; }
+.tab-close:hover { background: var(--chrome-2); color: var(--text-0); }
+
+.tab-new {
+  flex: 0 0 auto;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: var(--chrome-2);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  color: var(--text-0);
+  cursor: pointer;
+}
+.tab-new:hover:not(:disabled) { background: var(--chrome-3); }
+/* At the cap. Dimmed rather than hidden, and the `title` says why and where to
+   raise it — a control that vanishes teaches nothing. */
+.tab-new:disabled { color: var(--text-1); background: var(--chrome-1); cursor: default; }
+
 /* No blanket `button` rule here, ever. The old `.toolbar button { width:
    26px }` was specificity (0,1,1) and silently clipped the update button to
    "v0."; every control now sizes itself. */
@@ -168,7 +311,12 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
   cursor: pointer;
 }
 
-.url-form { flex: 1 1 auto; min-width: 160px; }
+/* Static in Both, so the history list below resolves against `.chrome-browse`
+   and can be placed in window coordinates. In solo target there is no native
+   view to dodge and the list belongs under the field, so the form becomes the
+   containing block instead. */
+.url-form { position: static; flex: 1 1 auto; min-width: 160px; }
+.app[data-panes='target'] .url-form { position: relative; }
 .url-form input {
   width: 100%;
   height: 30px;
@@ -182,6 +330,61 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 }
 .url-form input[readonly] { color: var(--text-1); }
 
+/* Visited-URL type-ahead. Its left edge is clamped to the native pane's right
+   edge because that pane is an OS-level WebContentsView painting over
+   anything the renderer draws beneath it: a list anchored to the field, which
+   starts near x=120, would be entirely invisible. The cost is cosmetic — with
+   a wide native pane the list sits offset from the field it belongs to — and
+   it is the same constraint that pushed the overflow menu rightward.
+   `right` bounds it against the window so a very wide split cannot push it
+   off the edge; `max-width` keeps it from spanning a whole empty pane. */
+.url-history {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: var(--native-right, 0px);
+  right: 10px;
+  max-width: 560px;
+  z-index: 10;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  font-size: 11.5px;
+  background: var(--chrome-2);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+/* Solo target: the list is the field's own dropdown, so it tracks its width. */
+.app[data-panes='target'] .url-history { left: 0; right: 0; max-width: none; }
+.url-history-row {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  height: 26px;
+  padding: 0 11px;
+  cursor: pointer;
+}
+/* The chrome's one selected idiom, shared with `.menu-row[aria-pressed]`. */
+.url-history-row.active { background: var(--chrome-3); box-shadow: inset 2px 0 0 var(--text-0); }
+/* Truncated at the *start*, not the end. What distinguishes one of these
+   addresses from another is the tail — the port, the path, the filename —
+   and right-truncating a list of localhost URLs or file paths yields six
+   identical rows, which is what the first screenshot of this list showed.
+   `direction: rtl` puts the ellipsis on the leading edge; the `bdi` around
+   the URL keeps the characters themselves in left-to-right order. */
+.url-history-url {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  direction: rtl;
+  /* The box is right-to-left only to move the ellipsis; a URL short enough to
+     fit must still start at the left edge like every other row. */
+  text-align: left;
+  font-family: var(--mono);
+}
+.url-history-age { flex: 0 0 auto; color: var(--text-1); font-size: 10px; }
+
 .status-cluster { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 10px; }
 .badge-error {
   color: var(--error);
@@ -335,13 +538,71 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 
 .panes { flex: 1 1 auto; display: flex; min-height: 0; }
 .pane {
-  flex: 1 1 50%;
+  flex: 1 1 0;
   min-width: 0;
   display: flex;
   flex-direction: column;
   background: var(--surround);
 }
-.target-pane { border-left: 1px solid var(--line); }
+/* The native (or image) pane takes its share of everything the seam leaves;
+   the target pane grows into the rest, so the 1px divider comes out of the
+   row rather than out of one pane's half and skewing the ratio.
+
+   The `clamp()` is the *stored* ratio's floor, and the reason it lives in CSS
+   rather than in the drag: a ratio saved on a wide monitor and restored on a
+   narrow window is applied as close as 240px a side allows, without being
+   written back — grow the window and the preference returns on its own, with
+   no resize plumbing to keep in step. The drag enforces the same floor in JS,
+   where it also decides what to persist. */
+.app[data-panes='both'] .panes > .pane:first-child {
+  flex-grow: 0;
+  flex-shrink: 0;
+  /* Rounded to whole pixels, and this is load-bearing. `TargetCanvas`
+     measures its pane with `clientWidth`, which *rounds*: a 1129.5px pane
+     reads as 1130, fit sizes the canvas to 1130, and the render then
+     overflows its own pane by half a pixel — which quietly turns off the
+     `safe center` centring and leaves the pane scrollable. Whole-pixel panes
+     keep the measurement honest. (The old `flex: 1 1 50%` hit the same thing
+     on an odd-width window; taking the seam out of the row would have made
+     it every window.) */
+  flex-basis: round(
+    down,
+    clamp(
+      var(--pane-min),
+      calc((100% - var(--seam)) * var(--split)),
+      calc(100% - var(--seam) - var(--pane-min))
+    ),
+    1px
+  );
+}
+
+/* The seam. A flex item exactly one pixel wide — the hairline the target pane
+   used to draw as its own `border-left` — with the grab area straddling it as
+   an overflowing pseudo-element, so the handle is 6px to the pointer and 1px
+   to the eye. The style spec forbids decorating anything that touches a pane,
+   and a resize handle drawn as furniture would be decoration. */
+.pane-divider {
+  flex: 0 0 var(--seam);
+  /* Positioned *and* raised: `.target-wrap` next door is positioned too and
+     comes later in the DOM, so without a `z-index` the target pane's canvas
+     paints over the half of the grab area that overhangs it and swallows the
+     press. */
+  position: relative;
+  z-index: 1;
+  background: var(--line);
+  cursor: col-resize;
+  /* Or the drag scrolls the pane instead of moving the seam. */
+  touch-action: none;
+}
+.pane-divider::before {
+  content: '';
+  position: absolute;
+  inset: 0 -2.5px;
+}
+.pane-divider:hover, .pane-divider:focus-visible { background: var(--text-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; }
@@ -353,7 +614,12 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
    on the very pixels under inspection. Keyboard focus in the target pane is
    shown on the pane's own hairlines instead, which touch no page pixel. */
 .target-canvas:focus { outline: none; }
-.target-pane:has(.target-canvas:focus-visible) { border-left-color: var(--text-1); }
+/* The seam moved out of `.target-pane`'s border and into its own element, so
+   the focus signal reaches it from the row both panes share — `:has` on the
+   ancestor, since the divider is the canvas's *earlier* sibling's sibling and
+   no combinator walks backwards. The footer rule is unchanged, and carries
+   the whole signal on its own in solo target, where there is no seam. */
+.panes:has(.target-canvas:focus-visible) .pane-divider { background: var(--text-1); }
 .target-pane:has(.target-canvas:focus-visible) .pane-footer { border-top-color: var(--text-1); }
 
 /* Signature: each pane always states what it is showing, so a screenshot of
@@ -406,9 +672,6 @@ 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; }
 
@@ -431,7 +694,11 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
 .body { flex: 1 1 auto; display: flex; min-height: 0; }
 .panes { min-width: 0; }
 .drawer {
-  flex: 0 0 280px;
+  /* Border-box against `--drawer-w`: 309 - 28 padding - 1 border = the 280px
+     of content this has always had, now stated once for both this and the
+     URL-history clamp. */
+  box-sizing: border-box;
+  flex: 0 0 var(--drawer-w);
   overflow: auto;
   padding: 12px 14px;
   background: var(--chrome-1);
@@ -664,7 +931,8 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
   cursor: pointer;
   font: inherit;
 }
-.check-now {
+.check-now,
+.clear-history {
   width: 100%;
   height: 24px;
   margin-top: 8px;
@@ -674,3 +942,5 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
   border-radius: 4px;
   cursor: pointer;
 }
+/* Nothing to erase: the button says so rather than pretending to act. */
+.clear-history:disabled { color: var(--text-1); cursor: default; }