getobsrv 0.10.0 → 0.12.0

package/out/renderer/assets/{index-CQVE5hF3.js → index-gYDbIgqJ.js}

@@ -12688,12 +12688,19 @@ const createImpl = (createState) => {
 };
 const create = ((createState) => createImpl);
 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.
@@ -12757,6 +12764,27 @@ function profileToParams(p, hostNits) {
     dither: p.frc
   };
 }
+function closeTab(tabs, closeId, activeId) {
+  const index = tabs.findIndex((t) => t.id === closeId);
+  if (index === -1) return { tabs, activeId };
+  const next = tabs.filter((t) => t.id !== closeId);
+  if (next.length === 0) return { tabs: next, activeId: null };
+  if (closeId !== activeId) return { tabs: next, activeId };
+  const neighbour = next[Math.min(index, next.length - 1)];
+  return { tabs: next, activeId: neighbour.id };
+}
+function canAddTab(count, max) {
+  return count < max;
+}
+function tabTitle(url, pageTitle) {
+  if (pageTitle.trim() !== "") return pageTitle;
+  if (url.trim() === "" || url.trim() === "about:blank") return "New tab";
+  try {
+    return new URL(url).host || url;
+  } catch {
+    return url;
+  }
+}
 const CUSTOM_PRESET_ID = "custom";
 const FALLBACK_SCALE = 2;
 function sameError(a, b) {
@@ -12764,81 +12792,175 @@ function sameError(a, b) {
   if (a === null || b === null) return false;
   return a.code === b.code && a.url === b.url && a.description === b.description;
 }
-const useStore = create()((set) => ({
-  mode: "url",
-  url: "",
-  lastUrl: "",
-  presetId: "1080p-24",
-  custom: { width: 1920, height: 1080, diagonalInches: 24 },
-  pixelExact: false,
-  profileId: PANEL_PROFILES[0].id,
-  profileOverride: null,
+function blankTab() {
+  return {
+    mode: "url",
+    url: "",
+    title: "",
+    lastUrl: "",
+    presetId: "1080p-24",
+    custom: { width: 1920, height: 1080, diagonalInches: 24 },
+    pixelExact: false,
+    profileId: PANEL_PROFILES[0].id,
+    profileOverride: null,
+    targetLoading: false,
+    error: null,
+    image: null,
+    // 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",
+    fitScale: null,
+    agentPan: null,
+    agentHighlight: null
+  };
+}
+let nextTabId = 0;
+function newTabId() {
+  nextTabId += 1;
+  return `local-${nextTabId}`;
+}
+const patchActiveWith = (f) => (s) => {
+  const active = s.tabs[s.activeId];
+  const patch = f(active);
+  return patch === null ? {} : { tabs: { ...s.tabs, [s.activeId]: { ...active, ...patch } } };
+};
+const patchActive = (patch) => patchActiveWith(() => patch);
+const patchTabWith = (id, f) => (s) => {
+  const t = s.tabs[id];
+  if (!t) return {};
+  const patch = f(t);
+  return patch === null ? {} : { tabs: { ...s.tabs, [id]: { ...t, ...patch } } };
+};
+const FIRST_TAB = newTabId();
+const useStore = create()((set, get) => ({
+  tabs: { [FIRST_TAB]: blankTab() },
+  tabOrder: [FIRST_TAB],
+  activeId: FIRST_TAB,
   settings: { ...DEFAULT_SETTINGS },
   // Zeroes until the first `getHostInfo`; `selectScale` falls back meanwhile.
   host: { physicalWidth: 0, physicalHeight: 0, scaleFactor: 0 },
-  targetLoading: false,
-  error: null,
   toast: null,
   update: null,
-  image: null,
+  history: [],
   surround: "graphite",
-  // 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,
-  agentHighlight: null,
   // Does not clear `error`: a failed load navigates to Chromium's error page,
   // so clearing here would wipe the toolbar badge the moment it appeared.
   // Does clear the agent highlight: it marked pixels of the page that was
   // showing, and a committed navigation (a reload included) replaces them.
-  setUrl: (url) => set({ url, agentHighlight: null }),
+  setUrl: (url) => set((s) => patchTabWith(s.activeId, () => ({ url, agentHighlight: null }))(s)),
+  setTabUrl: (id, url) => set(patchTabWith(id, () => ({ url, agentHighlight: null }))),
+  setTabTitle: (id, title) => set(patchTabWith(id, (t) => t.title === title ? null : { title })),
+  // Both panes report the same failure; see `setError`.
+  setTabError: (id, error) => set(patchTabWith(id, (t) => sameError(t.error, error) ? null : { error })),
+  setTabLoading: (id, targetLoading) => set(patchTabWith(id, () => ({ targetLoading }))),
   // A screen change re-rasters the target, so a highlight's target-pixel rect
   // no longer marks what it marked; the same for the custom fields below.
-  setPreset: (presetId) => set({ presetId, agentHighlight: null }),
-  setCustom: (c) => set((s) => ({ custom: { ...s.custom, ...c }, presetId: CUSTOM_PRESET_ID, agentHighlight: null })),
-  setPixelExact: (pixelExact) => set({ pixelExact }),
+  setPreset: (presetId) => set(patchActive({ presetId, agentHighlight: null })),
+  setCustom: (c) => set(patchActiveWith((t) => ({ custom: { ...t.custom, ...c }, presetId: CUSTOM_PRESET_ID, agentHighlight: null }))),
+  setPixelExact: (pixelExact) => set(patchActive({ pixelExact })),
   // Picking a profile drops any hand-tuned slider values.
-  setProfile: (profileId) => set({ profileId, profileOverride: null }),
-  setProfileOverride: (profileOverride) => set({ profileOverride }),
+  setProfile: (profileId) => set(patchActive({ profileId, profileOverride: null })),
+  setProfileOverride: (profileOverride) => set(patchActive({ profileOverride })),
   setSettings: (settings) => set({ settings }),
   setHost: (host) => set({ host }),
-  setTargetLoading: (targetLoading) => set({ targetLoading }),
+  setTargetLoading: (targetLoading) => set(patchActive({ targetLoading })),
   // Both panes report the same `loadError` for one failed navigation; the
   // duplicate must not replace the object and re-render everything twice.
-  setError: (error) => set((s) => sameError(s.error, error) ? {} : { error }),
+  setError: (error) => set(patchActiveWith((t) => sameError(t.error, error) ? null : { error })),
   setUpdate: (update) => set({ update }),
+  setHistory: (history) => set({ history }),
   setToast: (toast) => set({ toast }),
-  setImage: (image) => set({ image }),
+  setImage: (image) => set(patchActive({ image })),
   setSurround: (surround) => set({ surround }),
-  setViewMode: (viewMode) => set({ viewMode }),
+  setViewMode: (viewMode) => set(patchActive({ viewMode })),
   // No `agentHighlight: null` here, unlike setPreset: hiding a pane does not
   // re-raster the target, so the highlight still marks the pixels it marked.
   setPanes: (panes) => set({ panes }),
-  setFitScale: (fitScale2) => set({ fitScale: fitScale2 }),
-  requestAgentPan: (p) => set((s) => ({ agentPan: { ...p, seq: (s.agentPan?.seq ?? 0) + 1 } })),
-  clearAgentPan: () => set({ agentPan: null }),
-  showAgentHighlight: (h) => set((s) => ({ agentHighlight: { ...h, seq: (s.agentHighlight?.seq ?? 0) + 1 } })),
-  clearAgentHighlight: (seq) => set((s) => seq === void 0 || s.agentHighlight?.seq === seq ? { agentHighlight: null } : {}),
+  setFitScale: (fitScale2) => set(patchActive({ fitScale: fitScale2 })),
+  requestAgentPan: (p) => set(patchActiveWith((t) => ({ agentPan: { ...p, seq: (t.agentPan?.seq ?? 0) + 1 } }))),
+  clearAgentPan: () => set(patchActive({ agentPan: null })),
+  showAgentHighlight: (h) => set(patchActiveWith((t) => ({ agentHighlight: { ...h, seq: (t.agentHighlight?.seq ?? 0) + 1 } }))),
+  clearAgentHighlight: (seq) => set(patchActiveWith((t) => seq === void 0 || t.agentHighlight?.seq === seq ? { agentHighlight: null } : null)),
   // Spec §7: leaving image mode restores the URL that was showing before.
   // Either direction swaps what the target pane shows, so a highlight over
   // the old content is dropped with it.
   setMode: (mode) => set(
-    (s) => mode === s.mode ? {} : mode === "image" ? { mode, lastUrl: s.url, agentHighlight: null } : { mode, url: s.lastUrl, image: null, agentHighlight: null }
-  )
+    patchActiveWith(
+      (t) => mode === t.mode ? null : mode === "image" ? { mode, lastUrl: t.url, agentHighlight: null } : { mode, url: t.lastUrl, image: null, agentHighlight: null }
+    )
+  ),
+  syncTabs: (snap) => set((s) => {
+    if (snap.tabs.length === 0) return {};
+    const tabs = {};
+    for (const info of snap.tabs) {
+      const existing = s.tabs[info.id];
+      tabs[info.id] = existing ? (
+        // url and title are main's to know — it is what every tab's panes
+        // report to — so the snapshot is authoritative for those two and
+        // for nothing else.
+        existing.url === info.url && existing.title === info.title ? existing : { ...existing, url: info.url, title: info.title }
+      ) : (
+        // A tab the renderer has never seen. Its screen comes from the
+        // snapshot rather than from `blankTab`'s defaults, because main
+        // may have restored it from disk with a preset chosen in a
+        // previous launch — and for a tab genuinely opened just now, the
+        // session's own defaults are those same defaults.
+        {
+          ...blankTab(),
+          url: info.url,
+          title: info.title,
+          presetId: info.presetId,
+          profileId: info.profileId
+        }
+      );
+    }
+    const tabOrder = snap.tabs.map((t) => t.id);
+    return { tabs, tabOrder, activeId: tabs[snap.activeId] ? snap.activeId : tabOrder[0] };
+  }),
+  addTab: (id) => {
+    const s = get();
+    if (!canAddTab(s.tabOrder.length, s.settings.maxTabs)) return null;
+    const next = id ?? newTabId();
+    if (s.tabs[next]) {
+      set({ activeId: next });
+      return next;
+    }
+    set({ tabs: { ...s.tabs, [next]: blankTab() }, tabOrder: [...s.tabOrder, next], activeId: next });
+    return next;
+  },
+  closeTab: (id) => set((s) => {
+    if (!s.tabs[id]) return {};
+    const result = closeTab(
+      s.tabOrder.map((tabId) => ({ id: tabId })),
+      id,
+      s.activeId
+    );
+    if (result.activeId === null) {
+      const fresh = newTabId();
+      return { tabs: { [fresh]: blankTab() }, tabOrder: [fresh], activeId: fresh };
+    }
+    const tabs = { ...s.tabs };
+    delete tabs[id];
+    return { tabs, tabOrder: result.tabs.map((t) => t.id), activeId: result.activeId };
+  }),
+  activateTab: (id) => set((s) => s.tabs[id] ? { activeId: id } : {})
 }));
+function selectTab(s) {
+  return s.tabs[s.activeId];
+}
 function selectScreen(s) {
-  const preset = SCREEN_PRESETS.find((p) => p.id === s.presetId);
+  const tab = selectTab(s);
+  const preset = SCREEN_PRESETS.find((p) => p.id === tab.presetId);
   return preset ? {
     width: preset.width,
     height: preset.height,
     diagonalInches: preset.diagonalInches,
     deviceScaleFactor: preset.deviceScaleFactor
-  } : s.custom;
+  } : tab.custom;
 }
 function selectDeviceScaleFactor(s) {
   return selectScreen(s).deviceScaleFactor ?? 1;
@@ -12858,7 +12980,7 @@ function calibratedScale(s) {
     diagonalInches: s.settings.hostDiagonalInches,
     scaleFactor: s.host.scaleFactor
   };
-  const scale = computeScale(host, screen, s.pixelExact);
+  const scale = computeScale(host, screen, selectTab(s).pixelExact);
   return Number.isFinite(scale) && scale > 0 ? scale : null;
 }
 function selectScale(s) {
@@ -12871,13 +12993,15 @@ function selectHostNits(s) {
   return s.settings.hostNits > 0 ? s.settings.hostNits : DEFAULT_SETTINGS.hostNits;
 }
 function selectProfile(s) {
-  return s.profileOverride ?? findProfile(s.profileId);
+  const tab = selectTab(s);
+  return tab.profileOverride ?? findProfile(tab.profileId);
 }
 function selectPanelParams(s) {
   return profileToParams(selectProfile(s), selectHostNits(s));
 }
 function selectUrlBarText(s) {
-  return s.mode === "image" ? s.image?.name ?? "" : s.url;
+  const tab = selectTab(s);
+  return tab.mode === "image" ? tab.image?.name ?? "" : tab.url;
 }
 const SCALES = [1, 2, 3];
 const DEFAULT_SCALE = 2;
@@ -13054,10 +13178,10 @@ function TargetFooter() {
   const params = useStore(useShallow(selectPanelParams));
   const scale = useStore(selectScale);
   const profile = useStore(selectProfile);
-  const image = useStore((s) => s.image);
-  const mode = useStore((s) => s.mode);
-  const viewMode = useStore((s) => s.viewMode);
-  const fitScale2 = useStore((s) => s.fitScale);
+  const image = useStore((s) => selectTab(s).image);
+  const mode = useStore((s) => selectTab(s).mode);
+  const viewMode = useStore((s) => selectTab(s).viewMode);
+  const fitScale2 = useStore((s) => selectTab(s).fitScale);
   const dsf = useStore(selectDeviceScaleFactor);
   const size = mode === "image" && image ? `${image.width}×${image.height}` : `${viewport.width}×${viewport.height}${dsf > 1 ? ` @${dsf}x` : ""}`;
   const depth = params.levels <= 63 ? "6-bit" : "8-bit";
@@ -13115,6 +13239,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) {
@@ -13308,7 +13524,8 @@ function SettingsPanel() {
   const host = useStore(useShallow((s) => s.host));
   const settings = useStore(useShallow((s) => s.settings));
   const update = useStore((s) => s.update);
-  const custom = useStore(useShallow((s) => s.custom));
+  const history = useStore((s) => s.history);
+  const custom = useStore(useShallow((s) => selectTab(s).custom));
   const viewport = useStore(useShallow(selectViewport));
   const scale = useStore(selectScale);
   const fallback = useStore(selectScaleIsFallback);
@@ -13464,7 +13681,52 @@ 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: "Tabs" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      NumberField,
+      {
+        className: "max-tabs",
+        label: "Maximum tabs",
+        unit: "tabs",
+        value: settings.maxTabs,
+        min: MAX_TABS_MIN,
+        step: 1,
+        onCommit: (v) => commit({
+          ...useStore.getState().settings,
+          maxTabs: Math.min(MAX_TABS_MAX, Math.max(MAX_TABS_MIN, Math.round(v)))
+        }),
+        onInvalid: setHostError
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "Each tab is two Chromium renderers — a live pane and an offscreen render — plus the GPU and utility processes they pull in: twelve empty tabs measured 27 child processes and about 2.5 GB. A real page costs more. The cap is a memory decision, not a preference. Lowering it never closes a tab that is already open; it only stops new ones." }),
+    /* @__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
@@ -13910,10 +14172,11 @@ function TargetCanvas({ onFatal, imageFrame }) {
   const params = useStore(useShallow(selectPanelParams));
   const dsf = useStore(selectDeviceScaleFactor);
   const requestedScale = useStore(selectScale);
-  const mode = useStore((s) => s.mode);
-  const viewMode = useStore((s) => s.viewMode);
+  const mode = useStore((s) => selectTab(s).mode);
+  const viewMode = useStore((s) => selectTab(s).viewMode);
   const setViewMode = useStore((s) => s.setViewMode);
   const setFitScale = useStore((s) => s.setFitScale);
+  const activeId = useStore((s) => s.activeId);
   const [stalled, setStalled] = reactExports.useState(false);
   const stallTimer = reactExports.useRef(0);
   const armedOnce = reactExports.useRef(false);
@@ -13945,7 +14208,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
   const smooth = fit || scale < 1;
   reactExports.useEffect(() => {
     setFitScale(fit ? scale : null);
-  }, [fit, scale, setFitScale]);
+  }, [fit, scale, activeId, setFitScale]);
   reactExports.useEffect(() => () => setFitScale(null), [setFitScale]);
   const draw = reactExports.useRef({ scale, params, smooth, dsf });
   const imageRef = reactExports.useRef(imageFrame);
@@ -13984,7 +14247,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
       offFrame = window.obsrv.onFrame((m) => {
         disarm();
         if (!gl) return;
-        if (useStore.getState().mode !== "url") return;
+        if (selectTab(useStore.getState()).mode !== "url") return;
         gl.resizeSource(m.frameWidth, m.frameHeight);
         gl.uploadSlice(m.frame);
         schedule();
@@ -14012,7 +14275,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
     const onWheel = (e) => {
       if (e.altKey) {
         e.preventDefault();
-        if (useStore.getState().viewMode !== "1:1") return;
+        if (selectTab(useStore.getState()).viewMode !== "1:1") return;
         const body = canvas.closest(".pane-body");
         if (body instanceof HTMLElement) {
           body.scrollLeft += e.deltaX;
@@ -14020,7 +14283,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
         }
         return;
       }
-      if (useStore.getState().mode !== "url") return;
+      if (selectTab(useStore.getState()).mode !== "url") return;
       e.preventDefault();
       const r = canvas.getBoundingClientRect();
       const cssPerTarget = draw.current.scale * draw.current.dsf / (window.devicePixelRatio || 1);
@@ -14029,7 +14292,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
     };
     canvas.addEventListener("wheel", onWheel, { passive: false });
     const onWindowUp = (e) => {
-      if (useStore.getState().mode !== "url") return;
+      if (selectTab(useStore.getState()).mode !== "url") return;
       if (panRef.current || e.button === 1) return;
       if (e.altKey && !forwardDrag.current) return;
       if (e.target === canvas) return;
@@ -14052,8 +14315,10 @@ function TargetCanvas({ onFatal, imageFrame }) {
     };
   }, [onFatal, disarm]);
   reactExports.useEffect(
-    () => window.obsrv.onTargetNavigating(() => {
-      if (useStore.getState().mode === "url") arm();
+    () => window.obsrv.onTargetNavigating(({ tabId }) => {
+      const s = useStore.getState();
+      if (tabId !== s.activeId) return;
+      if (selectTab(s).mode === "url") arm();
     }),
     [arm]
   );
@@ -14167,7 +14432,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
     );
     setViewMode("1:1");
   };
-  const agentPan = useStore((s) => s.agentPan);
+  const agentPan = useStore((s) => selectTab(s).agentPan);
   const clearAgentPan = useStore((s) => s.clearAgentPan);
   reactExports.useEffect(() => {
     if (!agentPan) return;
@@ -14184,7 +14449,7 @@ function TargetCanvas({ onFatal, imageFrame }) {
       body.scrollTop = jump.top;
     }
   }, [agentPan]);
-  const agentHighlight = useStore((s) => s.agentHighlight);
+  const agentHighlight = useStore((s) => selectTab(s).agentHighlight);
   const clearAgentHighlight = useStore((s) => s.clearAgentHighlight);
   reactExports.useEffect(() => {
     if (!agentHighlight) return;
@@ -14279,6 +14544,33 @@ 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));
+}
+const AGENT_ACTIVITY_MS = 3e3;
+function useAgentActivity() {
+  const [active, setActive] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    let timer;
+    const off = window.obsrv.onAgentActivity(() => {
+      setActive(true);
+      clearTimeout(timer);
+      timer = setTimeout(() => setActive(false), AGENT_ACTIVITY_MS);
+    });
+    return () => {
+      clearTimeout(timer);
+      off();
+    };
+  }, []);
+  return active;
+}
 /**
  * @license lucide-react v1.34.0 - ISC
  *
@@ -14406,42 +14698,53 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$7);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$8);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$6);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$7);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$5);
+const __iconNode$6 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$6);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$5 = [
   ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
   ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
   ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
 ];
-const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$4);
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$5);
+/**
+ * @license lucide-react v1.34.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon("plus", __iconNode$4);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
@@ -14507,7 +14810,8 @@ const ICONS = {
   close: X,
   sliders: SlidersHorizontal,
   gear: Settings,
-  chevron: ChevronDown
+  chevron: ChevronDown,
+  plus: Plus
 };
 function Icon({ name, size = 16 }) {
   const Glyph = ICONS[name];
@@ -14578,6 +14882,77 @@ function Segmented({
     o.id
   )) });
 }
+function TabBar() {
+  const tabOrder = useStore(useShallow((s) => s.tabOrder));
+  const activeId = useStore((s) => s.activeId);
+  const maxTabs = useStore((s) => s.settings.maxTabs);
+  const driving = useStore((s) => s.settings.agentControl);
+  const agentActive = useAgentActivity();
+  const canAdd = canAddTab(tabOrder.length, maxTabs);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chrome-row chrome-tabs", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "tabs", role: "tablist", "aria-label": "Open tabs", children: tabOrder.map((id) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Tab,
+      {
+        id,
+        active: id === activeId,
+        driven: driving && id === activeId,
+        busy: agentActive
+      },
+      id
+    )) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        className: "tab-new",
+        type: "button",
+        "aria-label": "New tab",
+        disabled: !canAdd,
+        title: canAdd ? "New tab" : `${maxTabs} tabs is the limit — each one is two Chromium renderers, and twelve tabs cost about 2.5 GB. Raise it in Settings.`,
+        onClick: () => {
+          void window.obsrv.addTab();
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "plus", size: 14 })
+      }
+    )
+  ] });
+}
+function Tab({
+  id,
+  active,
+  driven,
+  busy
+}) {
+  const label = useStore((s) => {
+    const t = s.tabs[id];
+    return t ? tabTitle(t.url, t.title) : "";
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `tab${driven ? " driven" : ""}${driven && busy ? " busy" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        className: "tab-label",
+        type: "button",
+        role: "tab",
+        "aria-selected": active,
+        title: driven ? `${label}
+Agent control is driving this tab` : label,
+        onClick: () => window.obsrv.activateTab(id),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        className: "tab-close",
+        type: "button",
+        "aria-label": `Close ${label}`,
+        title: "Close tab",
+        onClick: () => window.obsrv.closeTab(id),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: "close", size: 12 })
+      }
+    )
+  ] });
+}
 function Select({ className, value, label, ariaLabel, onChange, children }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "select-shell", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "select-label", "aria-hidden": "true", children: label }),
@@ -14608,12 +14983,12 @@ const PANES = [
   { id: "target", label: "Target", title: "The target render alone, full width" }
 ];
 function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
-  const mode = useStore((s) => s.mode);
-  const presetId = useStore((s) => s.presetId);
-  const profileId = useStore((s) => s.profileId);
-  const pixelExact = useStore((s) => s.pixelExact);
-  const error = useStore((s) => s.error);
-  const loading = useStore((s) => s.targetLoading);
+  const mode = useStore((s) => selectTab(s).mode);
+  const presetId = useStore((s) => selectTab(s).presetId);
+  const profileId = useStore((s) => selectTab(s).profileId);
+  const pixelExact = useStore((s) => selectTab(s).pixelExact);
+  const error = useStore((s) => selectTab(s).error);
+  const loading = useStore((s) => selectTab(s).targetLoading);
   const barText = useStore(selectUrlBarText);
   const viewport = useStore(useShallow(selectViewport));
   const setUrl = useStore((s) => s.setUrl);
@@ -14625,27 +15000,25 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
   const surround = useStore((s) => s.surround);
   const update = useStore((s) => s.update);
   const setSurround = useStore((s) => s.setSurround);
-  const viewMode = useStore((s) => s.viewMode);
+  const viewMode = useStore((s) => selectTab(s).viewMode);
   const setViewMode = useStore((s) => s.setViewMode);
   const panes = useStore((s) => s.panes);
   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 [agentActive, setAgentActive] = reactExports.useState(false);
-  reactExports.useEffect(() => {
-    let timer;
-    const off = window.obsrv.onAgentActivity(() => {
-      setAgentActive(true);
-      clearTimeout(timer);
-      timer = setTimeout(() => setAgentActive(false), 3e3);
-    });
-    return () => {
-      clearTimeout(timer);
-      off();
-    };
-  }, []);
+  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 = useAgentActivity();
   const toggleAgent = () => {
     const current = useStore.getState().settings;
     const next = { ...current, agentControl: !current.agentControl };
@@ -14665,17 +15038,54 @@ 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: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TabBar, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "chrome-row chrome-browse", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "button",
@@ -14710,20 +15120,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",
@@ -14878,50 +15317,71 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
 function App() {
   const [fatal, setFatal] = reactExports.useState(null);
   const [drawer, setDrawer] = reactExports.useState("none");
-  const [image, setImage] = reactExports.useState(null);
+  const [images, setImages] = reactExports.useState({});
   const dropToken = reactExports.useRef(0);
   const targetPaneRef = reactExports.useRef(null);
   const [targetBounds, setTargetBounds] = reactExports.useState(null);
   const [canvasBounds, setCanvasBounds] = reactExports.useState(null);
+  const [tabsKnown, setTabsKnown] = reactExports.useState(false);
   const toggle = (which) => () => setDrawer((d) => d === which ? "none" : which);
   const setHost = useStore((s) => s.setHost);
   const setSettings = useStore((s) => s.setSettings);
-  const setUrl = useStore((s) => s.setUrl);
-  const setError = useStore((s) => s.setError);
-  const setTargetLoading = useStore((s) => s.setTargetLoading);
+  const setTabUrl = useStore((s) => s.setTabUrl);
+  const setTabTitle = useStore((s) => s.setTabTitle);
+  const setTabError = useStore((s) => s.setTabError);
+  const setTabLoading = useStore((s) => s.setTabLoading);
+  const syncTabs = useStore((s) => s.syncTabs);
   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);
-  const mode = useStore((s) => s.mode);
+  const mode = useStore((s) => selectTab(s).mode);
   const surround = useStore((s) => s.surround);
   const viewport = useStore(useShallow(selectViewport));
   const deviceScaleFactor = useStore(selectDeviceScaleFactor);
-  const presetId = useStore((s) => s.presetId);
-  const profileId = useStore((s) => s.profileId);
-  const viewMode = useStore((s) => s.viewMode);
+  const presetId = useStore((s) => selectTab(s).presetId);
+  const profileId = useStore((s) => selectTab(s).profileId);
+  const viewMode = useStore((s) => selectTab(s).viewMode);
+  const activeId = useStore((s) => s.activeId);
+  const tabOrder = useStore((s) => s.tabOrder);
   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));
+    window.obsrv.getTabs().then(syncTabs, (e) => console.warn("obsrv: getTabs failed", e)).finally(() => setTabsKnown(true));
     const offs = [
       window.obsrv.onHostChanged(setHost),
+      // Every one of these names its tab, so a background tab keeps its own
+      // strip entry current without rewriting the address bar of the tab in
+      // front — which is what an unnamed report from a background tab did, and
+      // why main used to gate them on the tab being in front at all.
+      //
       // 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.
-      window.obsrv.onUrlChanged((url) => {
-        setError(null);
-        setUrl(url);
+      // that tab's 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(({ tabId, url }) => {
+        setTabError(tabId, null);
+        setTabUrl(tabId, url);
       }),
-      window.obsrv.onLoadError(setError),
-      window.obsrv.onTargetLoading(setTargetLoading),
-      window.obsrv.onUpdateStatus(setUpdate)
+      window.obsrv.onTitleChanged(({ tabId, title }) => setTabTitle(tabId, title)),
+      window.obsrv.onLoadError(({ tabId, error }) => setTabError(tabId, error)),
+      window.obsrv.onTargetLoading(({ tabId, loading }) => setTabLoading(tabId, loading)),
+      window.obsrv.onTabsChanged(syncTabs),
+      window.obsrv.onUpdateStatus(setUpdate),
+      window.obsrv.onHistoryChanged(setHistory)
     ];
     return () => {
       for (const off of offs) off();
     };
-  }, [setHost, setSettings, setUrl, setError, setTargetLoading, setUpdate]);
+  }, [setHost, setSettings, setTabUrl, setTabTitle, setTabError, setTabLoading, syncTabs, setUpdate, setHistory]);
   reactExports.useEffect(() => {
     void window.obsrv.setViewport(viewport.width, viewport.height, deviceScaleFactor);
   }, [viewport.width, viewport.height, deviceScaleFactor]);
@@ -14961,8 +15421,9 @@ function App() {
     };
   }, []);
   reactExports.useEffect(() => {
-    window.obsrv.reportUiState({ presetId, profileId, viewMode, panes, mode, targetBounds, canvasBounds });
-  }, [presetId, profileId, viewMode, panes, mode, targetBounds, canvasBounds]);
+    if (!tabsKnown) return;
+    window.obsrv.reportUiState({ tabId: activeId, presetId, profileId, viewMode, panes, mode, targetBounds, canvasBounds });
+  }, [tabsKnown, activeId, presetId, profileId, viewMode, panes, mode, targetBounds, canvasBounds]);
   reactExports.useEffect(() => {
     return window.obsrv.onAgentApply((patch) => {
       const s = useStore.getState();
@@ -14978,21 +15439,24 @@ function App() {
   reactExports.useEffect(() => {
     document.documentElement.dataset.surround = surround;
   }, [surround]);
+  const image = images[activeId] ?? null;
   const onImage = async (file, exportScale) => {
     const token = ++dropToken.current;
+    const tabId = activeId;
     try {
       const limits = {
         ...DEFAULT_IMAGE_LIMITS,
         maxDimension: Math.min(DEFAULT_IMAGE_LIMITS.maxDimension, probeMaxTextureSize())
       };
       const loaded = await loadImage(file, exportScale, limits);
-      if (token !== dropToken.current) {
+      if (token !== dropToken.current || useStore.getState().activeId !== tabId) {
         URL.revokeObjectURL(loaded.objectUrl);
         return;
       }
-      setImage((previous) => {
-        if (previous) URL.revokeObjectURL(previous.objectUrl);
-        return loaded;
+      setImages((previous) => {
+        const stale = previous[tabId];
+        if (stale) URL.revokeObjectURL(stale.objectUrl);
+        return { ...previous, [tabId]: loaded };
       });
       setImageMeta({
         name: file.name,
@@ -15011,11 +15475,28 @@ function App() {
   };
   reactExports.useEffect(() => {
     if (mode === "image") return;
-    setImage((previous) => {
-      if (previous) URL.revokeObjectURL(previous.objectUrl);
-      return null;
+    setImages((previous) => {
+      const going = previous[activeId];
+      if (!going) return previous;
+      URL.revokeObjectURL(going.objectUrl);
+      const next = { ...previous };
+      delete next[activeId];
+      return next;
     });
-  }, [mode]);
+  }, [mode, activeId]);
+  reactExports.useEffect(() => {
+    setImages((previous) => {
+      const open = new Set(tabOrder);
+      const gone = Object.keys(previous).filter((id) => !open.has(id));
+      if (gone.length === 0) return previous;
+      const next = { ...previous };
+      for (const id of gone) {
+        URL.revokeObjectURL(next[id].objectUrl);
+        delete next[id];
+      }
+      return next;
+    });
+  }, [tabOrder]);
   const imageFrame = reactExports.useMemo(() => {
     if (mode !== "image" || !image) return null;
     return {
@@ -15031,29 +15512,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: [