getobsrv 0.9.0 → 0.11.0

package/README.md

@@ -73,11 +73,16 @@ the advanced sliders. Enter your own monitor's diagonal in Settings once so the
 pane renders at true physical size. Drop a 2x/3x PNG or JPG export to check a design
 before it's built.
 
-The target pane opens at 1:1, which usually overflows the pane: pan with a
-middle-button drag, Option+drag or Option+wheel, or switch the toolbar's
-`1:1 / Fit` control to a fit-to-pane overview (smoothly minified, so not
-pixel-exact — the footer says so) and click anywhere in it to jump back to 1:1
-at that spot.
+The target pane opens in **Fit**, a fit-to-pane view of the whole render. Fit
+never enlarges past 1:1, so a render that already fits is shown at true size;
+a larger one is smoothly minified to fit, which is not pixel-exact — the footer
+says so, and names the magnification. Fit is fully interactive: clicks, drags,
+the wheel and the keyboard all reach the page.
+
+Switch the toolbar's `1:1 / Fit` control to **1:1** for true magnification,
+which usually overflows the pane: pan with a middle-button drag, Option+drag or
+Option+wheel. From fit, **Option+click** jumps straight to 1:1 with the clicked
+spot centred (plain clicks belong to the page).
 
 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

package/out/main/cli.js

@@ -3,7 +3,7 @@ const electron = require("electron");
 const node_fs = require("node:fs");
 const node_os = require("node:os");
 const node_path = require("node:path");
-const targetSource = require("./targetSource-CbJwfugi.js");
+const targetSource = require("./targetSource-nbfc-Fe6.js");
 function boxDownsample(src, factor) {
   if (!Number.isInteger(factor) || factor < 1) throw new RangeError("factor must be an integer >= 1");
   const width = Math.floor(src.width / factor);

package/out/main/index.js

@@ -4,7 +4,7 @@ const node_fs = require("node:fs");
 const promises = require("node:fs/promises");
 const node_path = require("node:path");
 const node_crypto = require("node:crypto");
-const targetSource = require("./targetSource-CbJwfugi.js");
+const targetSource = require("./targetSource-nbfc-Fe6.js");
 const node_http = require("node:http");
 const node_url = require("node:url");
 const IPC = {
@@ -41,7 +41,10 @@ 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"
 };
 function attachFrameBus(target, win) {
   let ready = false;
@@ -79,9 +82,9 @@ const MAX_SCROLL_SELECTOR = 512;
 const MAX_RECT = 16384;
 const MAX_SCROLL_WARNINGS = 4;
 const isFiniteNumber = (v) => typeof v === "number" && Number.isFinite(v);
-const isRecord$1 = (v) => typeof v === "object" && v !== null;
+const isRecord$2 = (v) => typeof v === "object" && v !== null;
 function parseRect(raw) {
-  if (!isRecord$1(raw)) return null;
+  if (!isRecord$2(raw)) return null;
   const { x, y, width, height } = raw;
   if (!isFiniteNumber(x) || !isFiniteNumber(y) || !isFiniteNumber(width) || !isFiniteNumber(height)) return null;
   const r = { x: Math.round(x), y: Math.round(y), width: Math.round(width), height: Math.round(height) };
@@ -103,7 +106,7 @@ function parseModifiers(raw) {
   return raw.filter((m) => typeof m === "string" && MODIFIERS.has(m));
 }
 function parseInputEvent(raw) {
-  if (!isRecord$1(raw)) return null;
+  if (!isRecord$2(raw)) return null;
   const modifiers = parseModifiers(raw.modifiers);
   switch (raw.type) {
     case "mouseDown":
@@ -136,7 +139,7 @@ function parseDeviceScaleFactor(raw) {
   return raw;
 }
 function parseSettings(raw) {
-  if (!isRecord$1(raw)) return null;
+  if (!isRecord$2(raw)) return null;
   const { hostDiagonalInches, hostNits } = raw;
   if (!isFiniteNumber(hostDiagonalInches) || hostDiagonalInches <= 0) return null;
   if (!isFiniteNumber(hostNits) || hostNits <= 0) return null;
@@ -146,14 +149,18 @@ function parseSettings(raw) {
   if (typeof updateCheck !== "boolean") return null;
   const lastUpdateCheck = raw.lastUpdateCheck ?? 0;
   if (!isFiniteNumber(lastUpdateCheck) || lastUpdateCheck < 0) return null;
-  return { hostDiagonalInches, hostNits, agentControl, updateCheck, lastUpdateCheck };
+  const recordHistory = raw.recordHistory ?? true;
+  if (typeof recordHistory !== "boolean") return null;
+  const split = raw.split ?? targetSource.DEFAULT_SETTINGS.split;
+  if (!isFiniteNumber(split) || split < targetSource.SPLIT_MIN || split > targetSource.SPLIT_MAX) return null;
+  return { hostDiagonalInches, hostNits, agentControl, updateCheck, lastUpdateCheck, recordHistory, split };
 }
 function parseMode(raw) {
   return raw === "url" || raw === "image" ? raw : null;
 }
 const MAX_UI_ID = 64;
 function parseUiState(raw) {
-  if (!isRecord$1(raw)) return null;
+  if (!isRecord$2(raw)) return null;
   const { presetId, profileId, viewMode, mode } = raw;
   if (typeof presetId !== "string" || presetId.length === 0 || presetId.length > MAX_UI_ID) return null;
   if (typeof profileId !== "string" || profileId.length === 0 || profileId.length > MAX_UI_ID) return null;
@@ -172,7 +179,7 @@ function parseUiState(raw) {
   };
 }
 function parseScrollPos(raw) {
-  if (!isRecord$1(raw)) return null;
+  if (!isRecord$2(raw)) return null;
   const { x, y } = raw;
   if (!isFiniteNumber(x) || !isFiniteNumber(y) || x < 0 || y < 0) return null;
   return { x, y };
@@ -189,7 +196,7 @@ function parseScrollRequest(raw) {
   return { ...pos, selector: trimmed };
 }
 function parseScrollReport(raw) {
-  if (!isRecord$1(raw)) return null;
+  if (!isRecord$2(raw)) return null;
   const { id, x, y, scroller } = raw;
   if (!isFiniteNumber(id)) return null;
   if (!isFiniteNumber(x) || !isFiniteNumber(y)) return null;
@@ -222,7 +229,7 @@ const CONTROL_COMMANDS = [
 function isControlCommand(v) {
   return typeof v === "string" && CONTROL_COMMANDS.includes(v);
 }
-const isRecord = (v) => typeof v === "object" && v !== null;
+const isRecord$1 = (v) => typeof v === "object" && v !== null;
 function tokenEqual(expected, provided) {
   if (typeof provided !== "string") return false;
   const a = node_crypto.createHash("sha256").update(expected).digest();
@@ -258,7 +265,7 @@ function pixelExactApplyError(v) {
 }
 function parseClick(raw, viewport) {
   const shape = "click payload must be { x, y, button? } with finite CSS-pixel coordinates";
-  if (!isRecord(raw)) return shape;
+  if (!isRecord$1(raw)) return shape;
   const { x, y } = raw;
   if (typeof x !== "number" || !Number.isFinite(x) || typeof y !== "number" || !Number.isFinite(y)) return shape;
   if (x < 0 || y < 0 || x >= viewport.width || y >= viewport.height) {
@@ -285,8 +292,71 @@ function parseHighlight(raw) {
     durationMs: Math.min(Math.max(Math.round(d), HIGHLIGHT_DURATION_MIN_MS), HIGHLIGHT_DURATION_MAX_MS)
   };
 }
+const HISTORY_MAX = 500;
+const MAX_URL_LENGTH = 2048;
+const isRecord = (v) => typeof v === "object" && v !== null;
+const isCount = (v) => typeof v === "number" && Number.isInteger(v) && v >= 1;
+const isStamp$1 = (v) => typeof v === "number" && Number.isFinite(v) && v >= 0;
+function isStorableUrl(v) {
+  if (typeof v !== "string" || v === "" || v.length > MAX_URL_LENGTH) return false;
+  try {
+    return targetSource.ALLOWED_URL_SCHEMES.includes(new URL(v).protocol);
+  } catch {
+    return false;
+  }
+}
+function byRank(a, b) {
+  if (a.lastVisit !== b.lastVisit) return b.lastVisit - a.lastVisit;
+  if (a.visits !== b.visits) return b.visits - a.visits;
+  return a.url < b.url ? -1 : a.url > b.url ? 1 : 0;
+}
+function recordVisit(entries, url, now) {
+  if (!isStorableUrl(url) || !isStamp$1(now)) return entries;
+  const previous = entries.find((e) => e.url === url);
+  const next = {
+    url,
+    visits: previous ? previous.visits + 1 : 1,
+    lastVisit: now
+  };
+  return [next, ...entries.filter((e) => e.url !== url)].sort(byRank).slice(0, HISTORY_MAX);
+}
+function loadHistory(file) {
+  try {
+    const raw = JSON.parse(node_fs.readFileSync(file, "utf8"));
+    if (!Array.isArray(raw)) return [];
+    const seen = /* @__PURE__ */ new Set();
+    const out = [];
+    for (const item of raw) {
+      if (!isRecord(item)) continue;
+      if (!isStorableUrl(item.url) || seen.has(item.url)) continue;
+      seen.add(item.url);
+      out.push({
+        url: item.url,
+        // These two do fall back: a row whose counter got mangled is still a
+        // page that was visited, and losing its rank beats losing the row.
+        visits: isCount(item.visits) ? item.visits : 1,
+        lastVisit: isStamp$1(item.lastVisit) ? item.lastVisit : 0
+      });
+    }
+    return out.sort(byRank).slice(0, HISTORY_MAX);
+  } catch {
+    return [];
+  }
+}
+function saveHistory(file, entries) {
+  if (!Array.isArray(entries)) throw new RangeError("history must be an array");
+  if (entries.length > HISTORY_MAX) throw new RangeError(`history must hold at most ${HISTORY_MAX} entries`);
+  for (const e of entries) {
+    if (!isRecord(e) || !isStorableUrl(e.url)) throw new RangeError("history entries need a loadable url");
+    if (!isCount(e.visits)) throw new RangeError("visits must be an integer >= 1");
+    if (!isStamp$1(e.lastVisit)) throw new RangeError("lastVisit must be a finite epoch ms >= 0");
+  }
+  node_fs.mkdirSync(node_path.dirname(file), { recursive: true });
+  node_fs.writeFileSync(file, JSON.stringify(entries, null, 2));
+}
 const isPositive = (v) => typeof v === "number" && Number.isFinite(v) && v > 0;
 const isStamp = (v) => typeof v === "number" && Number.isFinite(v) && v >= 0;
+const isRatio = (v) => typeof v === "number" && Number.isFinite(v) && v >= targetSource.SPLIT_MIN && v <= targetSource.SPLIT_MAX;
 function loadSettings(file) {
   try {
     const raw = JSON.parse(node_fs.readFileSync(file, "utf8"));
@@ -299,7 +369,16 @@ function loadSettings(file) {
       // The opposite default: only a literal false turns the update check off,
       // so a file from before this feature keeps it on.
       updateCheck: raw.updateCheck !== false,
-      lastUpdateCheck: isStamp(raw.lastUpdateCheck) ? raw.lastUpdateCheck : 0
+      lastUpdateCheck: isStamp(raw.lastUpdateCheck) ? raw.lastUpdateCheck : 0,
+      // Same default as `updateCheck`, for the same reason: a file written
+      // before this feature existed has no key, and history is on by default.
+      recordHistory: raw.recordHistory !== false,
+      // A ratio outside 0.1–0.9 is treated as absent, not rejected: unlike a
+      // nits or diagonal figure it is a layout preference, and a file that
+      // was hand-edited to 0.97 means "I want the target tiny", not "refuse
+      // to start". Falling back to an even split loses one preference; the
+      // panes stay usable, which is the point of the band.
+      split: isRatio(raw.split) ? raw.split : targetSource.DEFAULT_SETTINGS.split
     };
   } catch {
     return { ...targetSource.DEFAULT_SETTINGS };
@@ -310,6 +389,8 @@ function saveSettings(file, s) {
   if (typeof s.agentControl !== "boolean") throw new RangeError("agentControl must be a boolean");
   if (typeof s.updateCheck !== "boolean") throw new RangeError("updateCheck must be a boolean");
   if (!isStamp(s.lastUpdateCheck)) throw new RangeError("lastUpdateCheck must be a finite epoch ms >= 0");
+  if (typeof s.recordHistory !== "boolean") throw new RangeError("recordHistory must be a boolean");
+  if (!isRatio(s.split)) throw new RangeError(`split must be a finite ratio in ${targetSource.SPLIT_MIN}..${targetSource.SPLIT_MAX}`);
   node_fs.mkdirSync(node_path.dirname(file), { recursive: true });
   node_fs.writeFileSync(file, JSON.stringify(s, null, 2));
 }
@@ -792,7 +873,7 @@ function registerIpc(ctx) {
     settings = s;
     if (s.agentControl !== wasEnabled) applyAgentControl(s.agentControl);
   });
-  const uiState = { presetId: "1080p-24", profileId: "reference", viewMode: "1:1", panes: "both", mode: "url" };
+  const uiState = { presetId: "1080p-24", profileId: "reference", viewMode: "fit", panes: "both", mode: "url" };
   let targetBounds = null;
   let canvasBounds = null;
   const MAX_PENDING_APPLIES = 32;
@@ -904,6 +985,35 @@ function registerIpc(ctx) {
     await electron.shell.openExternal(releaseUrl);
     return true;
   });
+  const historyFile = node_path.join(electron.app.getPath("userData"), "history.json");
+  let history = loadHistory(historyFile);
+  const publishHistory = () => {
+    if (!win.isDestroyed()) win.webContents.send(IPC.historyChanged, history);
+  };
+  const commitHistory = (next) => {
+    try {
+      saveHistory(historyFile, next);
+    } catch (e) {
+      console.warn("obsrv: could not write history.json", e);
+      return;
+    }
+    history = next;
+    publishHistory();
+  };
+  native.webContents.on("did-navigate", (_e, url) => {
+    if (!settings.recordHistory) return;
+    const next = recordVisit(history, url, Date.now());
+    if (next === history) return;
+    commitHistory(next);
+  });
+  electron.ipcMain.handle(IPC.getHistory, (e) => {
+    assertRenderer(e);
+    return history;
+  });
+  electron.ipcMain.handle(IPC.clearHistory, (e) => {
+    assertRenderer(e);
+    commitHistory([]);
+  });
   const bootCheckAllowed = process.env.OBSRV_TEST !== "1" || process.env.OBSRV_RELEASES_API !== void 0;
   if (bootCheckAllowed && settings.updateCheck && isCheckDue(settings.lastUpdateCheck, Date.now())) {
     void runUpdateCheck();

package/out/main/{targetSource-CbJwfugi.js → targetSource-nbfc-Fe6.js}

@@ -3,12 +3,16 @@ 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 DEFAULT_SETTINGS = {
   hostDiagonalInches: 27,
   hostNits: 500,
   agentControl: false,
   updateCheck: true,
-  lastUpdateCheck: 0
+  lastUpdateCheck: 0,
+  recordHistory: true,
+  split: 0.5
 };
 const SCREEN_PRESETS = [
   // Laptops — ordered largest to smallest panel, then the denser 1080p outlier.
@@ -365,10 +369,13 @@ 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.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/preload/app.js

@@ -31,7 +31,10 @@ 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"
 };
 function subscribe(channel, cb) {
   const listener = (_e, v) => cb(v);
@@ -112,6 +115,9 @@ 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)
 };
 electron.contextBridge.exposeInMainWorld("obsrv", api);

package/out/renderer/assets/{index-CasW01OP.css → index-B61fbgqt.css}

@@ -129,7 +129,43 @@
 :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; }
@@ -148,6 +184,10 @@ 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; }
 
@@ -168,7 +208,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 +227,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 +435,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 +511,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 +569,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 +591,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);
@@ -551,6 +715,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; }
 
@@ -598,8 +783,10 @@ html, body, #root { margin: 0; height: 100%; background: var(--chrome-0); color:
    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; }
@@ -641,7 +828,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;
@@ -651,3 +839,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; }

package/out/renderer/assets/{index-CpeTWcl6.js → index-BlbBg6lm.js}

@@ -12688,12 +12688,16 @@ const createImpl = (createState) => {
 };
 const create = ((createState) => createImpl);
 const MAX_VIEWPORT = 4096;
+const SPLIT_MIN = 0.1;
+const SPLIT_MAX = 0.9;
 const DEFAULT_SETTINGS = {
   hostDiagonalInches: 27,
   hostNits: 500,
   agentControl: false,
   updateCheck: true,
-  lastUpdateCheck: 0
+  lastUpdateCheck: 0,
+  recordHistory: true,
+  split: 0.5
 };
 const SCREEN_PRESETS = [
   // Laptops — ordered largest to smallest panel, then the denser 1080p outlier.
@@ -12780,9 +12784,15 @@ const useStore = create()((set) => ({
   error: null,
   toast: null,
   update: null,
+  history: [],
   image: null,
   surround: "graphite",
-  viewMode: "1:1",
+  // Fit, not 1:1: fit never enlarges past 1:1, so a render that already fits
+  // its pane opens at true magnification anyway, while one that does not is
+  // shown whole instead of as its top-left corner. Fit is interactive, so
+  // this costs nothing — and the footer names the actual magnification
+  // whenever fit is minifying.
+  viewMode: "fit",
   panes: "both",
   fitScale: null,
   agentPan: null,
@@ -12807,6 +12817,7 @@ const useStore = create()((set) => ({
   // duplicate must not replace the object and re-render everything twice.
   setError: (error) => set((s) => sameError(s.error, error) ? {} : { error }),
   setUpdate: (update) => set({ update }),
+  setHistory: (history) => set({ history }),
   setToast: (toast) => set({ toast }),
   setImage: (image) => set({ image }),
   setSurround: (surround) => set({ surround }),
@@ -13110,6 +13121,98 @@ function NativeSlot() {
     /* @__PURE__ */ jsxRuntimeExports.jsx(NativeFooter, { width: size.width, height: size.height })
   ] });
 }
+const MIN_PANE_PX = 240;
+const KEY_STEP = 0.02;
+const KEY_STEP_COARSE = 0.1;
+function PaneDivider() {
+  const split = useStore((s) => s.settings.split);
+  const ref = reactExports.useRef(null);
+  const drag = reactExports.useRef(null);
+  const geometry = () => {
+    const el = ref.current;
+    const row = el?.parentElement;
+    if (!el || !row) return { left: 0, usable: 1, min: 0.5, max: 0.5 };
+    const r = row.getBoundingClientRect();
+    const usable2 = Math.max(1, r.width - el.getBoundingClientRect().width);
+    const floor = MIN_PANE_PX / usable2;
+    return {
+      left: r.left,
+      usable: usable2,
+      min: Math.min(Math.max(SPLIT_MIN, floor), 0.5),
+      max: Math.max(Math.min(SPLIT_MAX, 1 - floor), 0.5)
+    };
+  };
+  const clamp = (ratio) => {
+    const g = geometry();
+    return Math.min(Math.max(ratio, g.min), g.max);
+  };
+  const preview = (ratio) => {
+    const s = useStore.getState();
+    const next = clamp(ratio);
+    if (next === s.settings.split) return;
+    s.setSettings({ ...s.settings, split: next });
+  };
+  const persist = (before) => {
+    const now = useStore.getState().settings;
+    if (now.split === before.split) return;
+    window.obsrv.setSettings(now).catch(() => useStore.getState().setSettings(before));
+  };
+  const commit = (ratio) => {
+    const before = useStore.getState().settings;
+    preview(ratio);
+    persist(before);
+  };
+  const onPointerDown = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    const el = e.currentTarget;
+    el.setPointerCapture(e.pointerId);
+    drag.current = {
+      before: useStore.getState().settings,
+      grab: e.clientX - el.getBoundingClientRect().left
+    };
+  };
+  const onPointerMove = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    const g = geometry();
+    preview((e.clientX - d.grab - g.left) / g.usable);
+  };
+  const onPointerUp = (e) => {
+    const d = drag.current;
+    if (!d) return;
+    drag.current = null;
+    e.currentTarget.releasePointerCapture(e.pointerId);
+    persist(d.before);
+  };
+  const onKeyDown = (e) => {
+    const step = e.shiftKey ? KEY_STEP_COARSE : KEY_STEP;
+    const delta = e.key === "ArrowLeft" ? -step : e.key === "ArrowRight" ? step : 0;
+    if (!delta) return;
+    e.preventDefault();
+    commit(useStore.getState().settings.split + delta);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref,
+      className: "pane-divider",
+      role: "separator",
+      "aria-orientation": "vertical",
+      "aria-label": "Pane split",
+      tabIndex: 0,
+      "aria-valuenow": Math.round(split * 100),
+      "aria-valuemin": Math.round(SPLIT_MIN * 100),
+      "aria-valuemax": Math.round(SPLIT_MAX * 100),
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      onDoubleClick: () => commit(0.5),
+      onKeyDown
+    }
+  );
+}
 const CONTRAST_MAX = 3e3;
 const CUSTOM_PROFILE_ID = "custom";
 function profileToControls(p, hostNits) {
@@ -13303,6 +13406,7 @@ function SettingsPanel() {
   const host = useStore(useShallow((s) => s.host));
   const settings = useStore(useShallow((s) => s.settings));
   const update = useStore((s) => s.update);
+  const history = useStore((s) => s.history);
   const custom = useStore(useShallow((s) => s.custom));
   const viewport = useStore(useShallow(selectViewport));
   const scale = useStore(selectScale);
@@ -13459,7 +13563,34 @@ function SettingsPanel() {
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Check for updates automatically" })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: "check-now", onClick: () => void window.obsrv.checkUpdate(), children: "Check now" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "One unauthenticated request to GitHub, at most once a day. No identifiers are sent." })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "One unauthenticated request to GitHub, at most once a day. No identifiers are sent." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "History" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "control inline record-history-toggle", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: settings.recordHistory,
+          onChange: (e) => commit({ ...settings, recordHistory: e.target.checked })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Remember visited addresses" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        type: "button",
+        className: "clear-history",
+        disabled: history.length === 0,
+        onClick: () => void window.obsrv.clearHistory(),
+        children: "Clear history"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "readout", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "history-count num", children: history.length }),
+      history.length === 1 ? " address remembered" : " addresses remembered"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "Typed into the URL bar as suggestions and nowhere else. Turning this off stops recording and keeps what is stored; Clear erases it." })
   ] });
 }
 const VERT_SRC = `#version 300 es
@@ -14025,7 +14156,6 @@ function TargetCanvas({ onFatal, imageFrame }) {
     canvas.addEventListener("wheel", onWheel, { passive: false });
     const onWindowUp = (e) => {
       if (useStore.getState().mode !== "url") return;
-      if (useStore.getState().viewMode !== "1:1") return;
       if (panRef.current || e.button === 1) return;
       if (e.altKey && !forwardDrag.current) return;
       if (e.target === canvas) return;
@@ -14099,7 +14229,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
     return body instanceof HTMLElement ? body : null;
   };
   const startPan = (e) => {
-    if (viewMode !== "1:1") return;
+    if (fit) return;
     if (!(e.button === 1 || e.button === 0 && e.altKey)) return;
     const body = paneBody();
     if (!body) return;
@@ -14148,7 +14278,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
     pendingJump.current = null;
   }, [viewMode]);
   const jumpTo1x = (e) => {
-    if (viewMode !== "fit") return;
+    if (!fit || !e.altKey) return;
     const r = e.currentTarget.getBoundingClientRect();
     pendingJump.current = jumpScroll(
       e.clientX - r.left,
@@ -14189,7 +14319,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
   }, [agentHighlight, clearAgentHighlight]);
   const send = (type) => (e) => {
     if (mode !== "url") return;
-    if (viewMode !== "1:1" || panRef.current || e.button === 1) return;
+    if (panRef.current || e.button === 1) return;
     if (e.altKey && !forwardDrag.current) return;
     const out = mouseEvent(type, e, e.currentTarget.getBoundingClientRect(), scale * dsf / dpr);
     if (out) {
@@ -14220,7 +14350,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
         "canvas",
         {
           ref: canvasRef,
-          className: `target-canvas${fit ? " fit" : panning ? " panning" : altHeld ? " pan-ready" : ""}`,
+          className: `target-canvas${panning ? " panning" : altHeld ? fit ? " fit" : " pan-ready" : ""}`,
           tabIndex: 0,
           style: { width: `${cssW}px`, height: `${cssH}px` },
           onClick: jumpTo1x,
@@ -14232,12 +14362,12 @@ function TargetCanvas({ onFatal, imageFrame }) {
           onMouseUp: send("mouseUp"),
           onMouseMove: send("mouseMove"),
           onKeyDown: (e) => {
-            if (mode !== "url" || viewMode !== "1:1") return;
+            if (mode !== "url") return;
             if (!e.metaKey && !e.ctrlKey) e.preventDefault();
             for (const ev of keyDownEvents(e)) window.obsrv.sendInput(ev);
           },
           onKeyUp: (e) => {
-            if (mode !== "url" || viewMode !== "1:1") return;
+            if (mode !== "url") return;
             const ev = keyUpEvent(e);
             if (ev) window.obsrv.sendInput(ev);
           }
@@ -14275,6 +14405,16 @@ function Toast() {
   if (!toast) return null;
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "toast", role: "status", children: toast });
 }
+const HISTORY_SUGGESTIONS = 6;
+function byRank(a, b) {
+  if (a.lastVisit !== b.lastVisit) return b.lastVisit - a.lastVisit;
+  if (a.visits !== b.visits) return b.visits - a.visits;
+  return a.url < b.url ? -1 : a.url > b.url ? 1 : 0;
+}
+function matchHistory(entries, query, limit = HISTORY_SUGGESTIONS) {
+  const needle = query.trim().toLowerCase();
+  return entries.filter((e) => e.url.toLowerCase().includes(needle)).sort(byRank).slice(0, Math.max(0, limit));
+}
 /**
  * @license lucide-react v1.34.0 - ISC
  *
@@ -14627,8 +14767,18 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
   const setPanes = useStore((s) => s.setPanes);
   const agentControl = useStore((s) => s.settings.agentControl);
   const setSettings = useStore((s) => s.setSettings);
+  const history = useStore((s) => s.history);
   const inputRef = reactExports.useRef(null);
   const [draft, setDraft] = reactExports.useState(barText);
+  const [open, setOpen] = reactExports.useState(false);
+  const [highlight, setHighlight] = reactExports.useState(-1);
+  const matches = reactExports.useMemo(() => open ? matchHistory(history, draft) : [], [open, history, draft]);
+  const listOpen = open && matches.length > 0;
+  const closeList = () => {
+    setOpen(false);
+    setHighlight(-1);
+  };
+  const picked = highlight >= 0 && highlight < matches.length ? matches[highlight] : null;
   const [agentActive, setAgentActive] = reactExports.useState(false);
   reactExports.useEffect(() => {
     let timer;
@@ -14661,14 +14811,50 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
     });
   }, []);
   const readOnly = mode === "image";
-  const submit = async (e) => {
-    e.preventDefault();
-    if (readOnly || draft.trim() === "") return;
+  reactExports.useEffect(() => {
+    if (readOnly) closeList();
+  }, [readOnly]);
+  const go = async (url) => {
+    closeList();
     setError(null);
-    const applied = await window.obsrv.navigate(draft);
+    const applied = await window.obsrv.navigate(url);
     setUrl(applied);
     setDraft(applied);
   };
+  const submit = (e) => {
+    e.preventDefault();
+    if (readOnly || draft.trim() === "") return;
+    void go(draft);
+  };
+  const onKeyDown = (e) => {
+    if (readOnly) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        setHighlight(0);
+        return;
+      }
+      setHighlight((h) => h + 1 >= matches.length ? -1 : h + 1);
+      return;
+    }
+    if (e.key === "ArrowUp" && listOpen) {
+      e.preventDefault();
+      setHighlight((h) => h <= -1 ? matches.length - 1 : h - 1);
+      return;
+    }
+    if (e.key === "Enter" && picked) {
+      e.preventDefault();
+      void go(picked.url);
+      return;
+    }
+    if (e.key === "Escape") {
+      const dismissed = listOpen;
+      closeList();
+      if (dismissed) return;
+      setDraft(barText);
+    }
+  };
   const presetLabel = SCREEN_PRESETS.find((p) => p.id === presetId)?.label ?? "Custom";
   const profileLabel = PANEL_PROFILES.find((p) => p.id === profileId)?.label ?? profileId;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chrome", children: [
@@ -14706,20 +14892,49 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
           children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "reload" })
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("form", { className: "url-form", onSubmit: submit, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          ref: inputRef,
-          value: draft,
-          readOnly,
-          spellCheck: false,
-          placeholder: "Enter a URL, or drop a PNG",
-          onChange: (e) => setDraft(e.target.value),
-          onKeyDown: (e) => {
-            if (e.key === "Escape") setDraft(barText);
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { className: "url-form", onSubmit: submit, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            ref: inputRef,
+            value: draft,
+            readOnly,
+            spellCheck: false,
+            placeholder: "Enter a URL, or drop a PNG",
+            role: "combobox",
+            "aria-expanded": listOpen,
+            "aria-controls": "url-history",
+            "aria-autocomplete": "list",
+            "aria-activedescendant": picked ? `url-history-${highlight}` : void 0,
+            onChange: (e) => {
+              setDraft(e.target.value);
+              setOpen(true);
+              setHighlight(-1);
+            },
+            onKeyDown,
+            onBlur: closeList
           }
-        }
-      ) }),
+        ),
+        listOpen && /* @__PURE__ */ jsxRuntimeExports.jsx("ul", { className: "url-history", id: "url-history", role: "listbox", "aria-label": "Visited addresses", children: matches.map((m, i) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "li",
+          {
+            id: `url-history-${i}`,
+            className: `url-history-row${i === highlight ? " active" : ""}`,
+            role: "option",
+            "aria-selected": i === highlight,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              void go(m.url);
+            },
+            onMouseEnter: () => setHighlight(i),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "url-history-url", children: /* @__PURE__ */ jsxRuntimeExports.jsx("bdi", { children: m.url }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "url-history-age", children: formatAge(m.lastVisit, Date.now()) })
+            ]
+          },
+          m.url
+        )) })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "status-cluster", children: [
         mode === "image" && /* @__PURE__ */ jsxRuntimeExports.jsx(
           "button",
@@ -14886,6 +15101,7 @@ function App() {
   const setError = useStore((s) => s.setError);
   const setTargetLoading = useStore((s) => s.setTargetLoading);
   const setUpdate = useStore((s) => s.setUpdate);
+  const setHistory = useStore((s) => s.setHistory);
   const setImageMeta = useStore((s) => s.setImage);
   const setMode = useStore((s) => s.setMode);
   const setToast = useStore((s) => s.setToast);
@@ -14897,27 +15113,34 @@ function App() {
   const profileId = useStore((s) => s.profileId);
   const viewMode = useStore((s) => s.viewMode);
   const panes = useStore((s) => s.panes);
+  const split = useStore((s) => s.settings.split);
   reactExports.useEffect(() => {
     window.obsrv.getHostInfo().then(setHost, (e) => console.warn("obsrv: getHostInfo failed", e));
     window.obsrv.getSettings().then(setSettings, (e) => console.warn("obsrv: getSettings failed", e));
     window.obsrv.getUpdate().then(setUpdate, (e) => console.warn("obsrv: getUpdate failed", e));
+    window.obsrv.getHistory().then(setHistory, (e) => console.warn("obsrv: getHistory failed", e));
     const offs = [
       window.obsrv.onHostChanged(setHost),
       // A committed navigation — back, forward, reload, a link — supersedes
-      // the last load failure. A *failed* load commits Chromium's error page
-      // first and reports its error after, so the badge still lands last.
+      // the last load failure, and only a committed one: Chromium commits its
+      // error page without emitting `did-navigate`, so a failed load reports
+      // no URL at all (measured on Electron 43; a bad host, a refused
+      // connection, a missing file and a Back onto an error page all fire
+      // `did-fail-load` alone). The badge therefore lands last by having
+      // nothing race it.
       window.obsrv.onUrlChanged((url) => {
         setError(null);
         setUrl(url);
       }),
       window.obsrv.onLoadError(setError),
       window.obsrv.onTargetLoading(setTargetLoading),
-      window.obsrv.onUpdateStatus(setUpdate)
+      window.obsrv.onUpdateStatus(setUpdate),
+      window.obsrv.onHistoryChanged(setHistory)
     ];
     return () => {
       for (const off of offs) off();
     };
-  }, [setHost, setSettings, setUrl, setError, setTargetLoading, setUpdate]);
+  }, [setHost, setSettings, setUrl, setError, setTargetLoading, setUpdate, setHistory]);
   reactExports.useEffect(() => {
     void window.obsrv.setViewport(viewport.width, viewport.height, deviceScaleFactor);
   }, [viewport.width, viewport.height, deviceScaleFactor]);
@@ -15027,29 +15250,46 @@ function App() {
     };
   }, [mode, image]);
   if (fatal) return /* @__PURE__ */ jsxRuntimeExports.jsx(Fatal, { message: fatal });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "app", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Toolbar, { drawer, onTogglePanel: toggle("panel"), onToggleSettings: toggle("settings") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DropZone, { onImage }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "body", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "panes", "data-panes": panes, children: [
-        panes === "both" && (mode === "image" && image ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ImagePane,
-          {
-            src: image.objectUrl,
-            width: image.natural.width,
-            height: image.natural.height
-          }
-        ) : /* @__PURE__ */ jsxRuntimeExports.jsx(NativeSlot, {})),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pane target-pane", ref: targetPaneRef, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pane-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TargetCanvas, { onFatal: setFatal, imageFrame }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TargetFooter, {})
-        ] })
-      ] }),
-      drawer === "panel" && /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "drawer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PanelControls, {}) }),
-      drawer === "settings" && /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "drawer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel, {}) })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Toast, {})
-  ] });
+  return (
+    // The split and the panes mode are published here rather than on `.panes`
+    // because the chrome needs them too: the URL bar's history dropdown is
+    // clamped to the native pane's right edge, and a custom property set on
+    // `.panes` reaches nothing above it. Everything below still inherits them.
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "app",
+        "data-panes": panes,
+        style: { "--split": split, "--pane-min": `${MIN_PANE_PX}px` },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Toolbar, { drawer, onTogglePanel: toggle("panel"), onToggleSettings: toggle("settings") }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(DropZone, { onImage }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "body", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "panes", children: [
+              panes === "both" && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                mode === "image" && image ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ImagePane,
+                  {
+                    src: image.objectUrl,
+                    width: image.natural.width,
+                    height: image.natural.height
+                  }
+                ) : /* @__PURE__ */ jsxRuntimeExports.jsx(NativeSlot, {}),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(PaneDivider, {})
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pane target-pane", ref: targetPaneRef, children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pane-body", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TargetCanvas, { onFatal: setFatal, imageFrame }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(TargetFooter, {})
+              ] })
+            ] }),
+            drawer === "panel" && /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "drawer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(PanelControls, {}) }),
+            drawer === "settings" && /* @__PURE__ */ jsxRuntimeExports.jsx("aside", { className: "drawer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsPanel, {}) })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Toast, {})
+        ]
+      }
+    )
+  );
 }
 function BrowserNotice() {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "browser-notice", role: "note", children: [

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-CpeTWcl6.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-CasW01OP.css">
+    <script type="module" crossorigin src="./assets/index-BlbBg6lm.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-B61fbgqt.css">
   </head>
   <body>
     <div id="root"></div>

package/out/shared/history.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isStamp = exports.isCount = exports.isRecord = exports.MAX_URL_LENGTH = exports.HISTORY_SUGGESTIONS = exports.HISTORY_MAX = void 0;
+exports.isStorableUrl = isStorableUrl;
+exports.byRank = byRank;
+exports.recordVisit = recordVisit;
+exports.matchHistory = matchHistory;
+const url_1 = require("./url");
+/**
+ * The file is read and written whole, so it needs a bound. 500 is far beyond
+ * what this app's usage produces — a handful of dev and staging addresses
+ * returned to over and over — and small enough to parse instantly.
+ */
+exports.HISTORY_MAX = 500;
+/** Rows the URL bar offers. Past six, a longer list is a worse tool than a better query. */
+exports.HISTORY_SUGGESTIONS = 6;
+/**
+ * The other half of the bound: 500 entries of unbounded length is not a
+ * bounded file. Far longer than any address this tool is pointed at, and
+ * short enough that the whole file stays trivial to parse.
+ */
+exports.MAX_URL_LENGTH = 2048;
+const isRecord = (v) => typeof v === 'object' && v !== null;
+exports.isRecord = isRecord;
+const isCount = (v) => typeof v === 'number' && Number.isInteger(v) && v >= 1;
+exports.isCount = isCount;
+const isStamp = (v) => typeof v === 'number' && Number.isFinite(v) && v >= 0;
+exports.isStamp = isStamp;
+/**
+ * Is this an address worth remembering? Only the schemes the app can load
+ * back (`shared/url.ts`), so `about:blank` — which the native pane commits on
+ * every launch — never becomes a suggestion, and a scheme the URL bar would
+ * refuse can never be offered by it.
+ */
+function isStorableUrl(v) {
+    if (typeof v !== 'string' || v === '' || v.length > exports.MAX_URL_LENGTH)
+        return false;
+    try {
+        return url_1.ALLOWED_URL_SCHEMES.includes(new URL(v).protocol);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Most recent first, visit count breaking ties — so the address used
+ * constantly stays at the top without a stale favourite outranking what was
+ * on screen ten minutes ago. URL breaks the remaining tie only to keep the
+ * order stable across reloads of the same file.
+ */
+function byRank(a, b) {
+    if (a.lastVisit !== b.lastVisit)
+        return b.lastVisit - a.lastVisit;
+    if (a.visits !== b.visits)
+        return b.visits - a.visits;
+    return a.url < b.url ? -1 : a.url > b.url ? 1 : 0;
+}
+/**
+ * The list after a committed navigation to `url`. Returns `entries`
+ * *unchanged* — the same reference — when the URL is not one we store, which
+ * is what lets the caller write the file only when something actually
+ * changed.
+ *
+ * Eviction is by rank, so the least recently visited entry is the one that
+ * goes; a busy day cannot push out the address visited an hour ago in favour
+ * of one visited last year.
+ */
+function recordVisit(entries, url, now) {
+    if (!isStorableUrl(url) || !(0, exports.isStamp)(now))
+        return entries;
+    const previous = entries.find(e => e.url === url);
+    const next = {
+        url,
+        visits: previous ? previous.visits + 1 : 1,
+        lastVisit: now,
+    };
+    return [next, ...entries.filter(e => e.url !== url)].sort(byRank).slice(0, exports.HISTORY_MAX);
+}
+/**
+ * The rows to offer for what has been typed: case-insensitive substring
+ * against the whole URL, in rank order. An empty query matches everything,
+ * so pressing Down in an empty field offers the most recent addresses.
+ */
+function matchHistory(entries, query, limit = exports.HISTORY_SUGGESTIONS) {
+    const needle = query.trim().toLowerCase();
+    return entries
+        .filter(e => e.url.toLowerCase().includes(needle))
+        .sort(byRank)
+        .slice(0, Math.max(0, limit));
+}

package/out/shared/ipcPayloads.js

@@ -10,6 +10,7 @@ exports.parseUiState = parseUiState;
 exports.parseScrollPos = parseScrollPos;
 exports.parseScrollRequest = parseScrollRequest;
 exports.parseScrollReport = parseScrollReport;
+const presets_1 = require("./presets");
 const types_1 = require("./types");
 /**
  * Parsers for everything the renderer sends main over IPC. Each returns a
@@ -99,7 +100,7 @@ function parseDeviceScaleFactor(raw) {
     return raw;
 }
 /**
- * Copies exactly the five known keys; the numbers must be finite and
+ * Copies exactly the known keys; the numbers must be finite and
  * positive. A missing `agentControl` means false and a missing `updateCheck`
  * means true (the pre-feature wire shapes); any non-boolean value is refused,
  * never coerced.
@@ -121,7 +122,17 @@ function parseSettings(raw) {
     const lastUpdateCheck = raw.lastUpdateCheck ?? 0;
     if (!isFiniteNumber(lastUpdateCheck) || lastUpdateCheck < 0)
         return null;
-    return { hostDiagonalInches, hostNits, agentControl, updateCheck, lastUpdateCheck };
+    const recordHistory = raw.recordHistory ?? true;
+    if (typeof recordHistory !== 'boolean')
+        return null;
+    // A missing `split` is the pre-feature wire shape and means the default.
+    // Out of band it is refused rather than clamped: `loadSettings` forgives a
+    // hand-edited file because it must, but the renderer clamps before it
+    // sends, so a bad ratio arriving here is a bug worth surfacing.
+    const split = raw.split ?? presets_1.DEFAULT_SETTINGS.split;
+    if (!isFiniteNumber(split) || split < presets_1.SPLIT_MIN || split > presets_1.SPLIT_MAX)
+        return null;
+    return { hostDiagonalInches, hostNits, agentControl, updateCheck, lastUpdateCheck, recordHistory, split };
 }
 function parseMode(raw) {
     return raw === 'url' || raw === 'image' ? raw : null;

package/out/shared/presets.js

@@ -1,15 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PANEL_PROFILES = exports.SCREEN_PRESETS = exports.DEFAULT_SETTINGS = exports.MAX_VIEWPORT = void 0;
+exports.PANEL_PROFILES = exports.SCREEN_PRESETS = exports.DEFAULT_SETTINGS = exports.SPLIT_MAX = exports.SPLIT_MIN = exports.MAX_VIEWPORT = void 0;
 exports.findPreset = findPreset;
 exports.findProfile = findProfile;
 exports.MAX_VIEWPORT = 4096;
+/** The loose sanity band for `Settings.split`; the clamp that matters is the
+ *  drag's 240px-a-side floor, which only the renderer knows the pixels for. */
+exports.SPLIT_MIN = 0.1;
+exports.SPLIT_MAX = 0.9;
 exports.DEFAULT_SETTINGS = {
     hostDiagonalInches: 27,
     hostNits: 500,
     agentControl: false,
     updateCheck: true,
     lastUpdateCheck: 0,
+    recordHistory: true,
+    split: 0.5,
 };
 exports.SCREEN_PRESETS = [
     // Laptops — ordered largest to smallest panel, then the denser 1080p outlier.

package/package.json

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