getobsrv 0.11.0 → 0.13.0

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

@@ -12690,6 +12690,8 @@ 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,
@@ -12697,8 +12699,10 @@ const DEFAULT_SETTINGS = {
   updateCheck: true,
   lastUpdateCheck: 0,
   recordHistory: true,
-  split: 0.5
+  split: 0.5,
+  maxTabs: 12
 };
+const DEFAULT_ORIENTATION = "portrait";
 const SCREEN_PRESETS = [
   // Laptops — ordered largest to smallest panel, then the denser 1080p outlier.
   { id: "laptop-768", label: '1366×768 15.6"', width: 1366, height: 768, diagonalInches: 15.6, deviceScaleFactor: 1, group: "laptop" },
@@ -12732,6 +12736,13 @@ function findProfile(id) {
   if (!p) throw new Error(`unknown profile: ${id}`);
   return p;
 }
+function applyOrientation(screen, orientation) {
+  if (orientation !== "landscape") return screen;
+  return { ...screen, width: screen.height, height: screen.width };
+}
+function screenShape(width, height) {
+  return width > height ? "landscape" : "portrait";
+}
 function ppi(width, height, diagonalInches) {
   if (!(diagonalInches > 0)) throw new RangeError("diagonalInches must be > 0");
   return Math.hypot(width, height) / diagonalInches;
@@ -12761,6 +12772,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) {
@@ -12768,83 +12800,197 @@ 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",
+    orientation: DEFAULT_ORIENTATION,
+    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,
   history: [],
-  image: null,
   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 })),
+  // A rotation re-rasters the target exactly as a preset change does, so a
+  // highlight's target-pixel rect no longer marks what it marked. Setting the
+  // orientation already in force writes nothing, so a re-report from an agent
+  // (or a click on the pressed half of the control) costs no re-render.
+  setOrientation: (orientation) => set(patchActiveWith((t) => t.orientation === orientation ? null : { orientation, 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,
+          orientation: info.orientation
+        }
+      );
+    }
+    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 selectScreen(s) {
-  const preset = SCREEN_PRESETS.find((p) => p.id === s.presetId);
+function selectTab(s) {
+  return s.tabs[s.activeId];
+}
+function naturalScreen(s) {
+  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 selectScreen(s) {
+  return applyOrientation(naturalScreen(s), selectTab(s).orientation);
+}
+function selectScreenShape(s) {
+  const screen = selectScreen(s);
+  return screenShape(screen.width, screen.height);
+}
+const ORIENTATIONS = ["portrait", "landscape"];
+function selectOrientationShapes(s) {
+  const natural = naturalScreen(s);
+  return ORIENTATIONS.map((value) => {
+    const r = applyOrientation(natural, value);
+    return screenShape(r.width, r.height);
+  });
 }
 function selectDeviceScaleFactor(s) {
   return selectScreen(s).deviceScaleFactor ?? 1;
@@ -12864,7 +13010,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) {
@@ -12877,13 +13023,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;
@@ -13060,12 +13208,13 @@ 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 shape = useStore(selectScreenShape);
+  const size = mode === "image" && image ? `${image.width}×${image.height}` : `${viewport.width}×${viewport.height}${dsf > 1 ? ` @${dsf}x` : ""} ${shape}`;
   const depth = params.levels <= 63 ? "6-bit" : "8-bit";
   const magnification = viewMode === "fit" && fitScale2 !== null ? [`fit ×${fitScale2.toFixed(2)}`, "not pixel-exact"] : [`×${scale.toFixed(2)}`];
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -13407,7 +13556,8 @@ function SettingsPanel() {
   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 custom = useStore(useShallow((s) => selectTab(s).custom));
+  const orientation = useStore((s) => selectTab(s).orientation);
   const viewport = useStore(useShallow(selectViewport));
   const scale = useStore(selectScale);
   const fallback = useStore(selectScaleIsFallback);
@@ -13480,6 +13630,15 @@ function SettingsPanel() {
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: "Custom screen" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "muted", children: "Editing these selects the Custom preset." }),
+    orientation === "landscape" && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "muted custom-rotated", children: [
+      "Rotated, so these render transposed:",
+      " ",
+      (() => {
+        const r = applyOrientation({ ...custom }, orientation);
+        return `${r.width}×${r.height}`;
+      })(),
+      "."
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       NumberField,
       {
@@ -13564,6 +13723,24 @@ function SettingsPanel() {
     ] }),
     /* @__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("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(
@@ -14036,10 +14213,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);
@@ -14071,7 +14249,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);
@@ -14110,7 +14288,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();
@@ -14138,7 +14316,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;
@@ -14146,7 +14324,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);
@@ -14155,7 +14333,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;
@@ -14178,8 +14356,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]
   );
@@ -14293,7 +14473,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;
@@ -14310,7 +14490,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;
@@ -14415,6 +14595,23 @@ 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
  *
@@ -14542,42 +14739,73 @@ 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$a = [
   ["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$a);
 /**
  * @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$9 = [
   ["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$9);
 /**
  * @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$8 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __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$4 = [
+const __iconNode$7 = [
   ["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$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$6 = [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+];
+const Plus = createLucideIcon("plus", __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$5 = [
+  ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }]
+];
+const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __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 = [
+  ["rect", { width: "12", height: "20", x: "6", y: "2", rx: "2", key: "1oxtiu" }]
+];
+const RectangleVertical = createLucideIcon("rectangle-vertical", __iconNode$4);
 /**
  * @license lucide-react v1.34.0 - ISC
  *
@@ -14643,7 +14871,13 @@ const ICONS = {
   close: X,
   sliders: SlidersHorizontal,
   gear: Settings,
-  chevron: ChevronDown
+  chevron: ChevronDown,
+  plus: Plus,
+  // The rotate control's two shapes. A plain outline of the screen you get is
+  // the whole affordance — no arrow, no device silhouette: the target may be a
+  // monitor as readily as a phone.
+  portrait: RectangleVertical,
+  landscape: RectangleHorizontal
 };
 function Icon({ name, size = 16 }) {
   const Glyph = ICONS[name];
@@ -14714,6 +14948,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 }),
@@ -14744,24 +15049,27 @@ 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);
   const setMode = useStore((s) => s.setMode);
   const setPreset = useStore((s) => s.setPreset);
+  const orientation = useStore((s) => selectTab(s).orientation);
+  const orientationShapes = useStore(useShallow(selectOrientationShapes));
+  const setOrientation = useStore((s) => s.setOrientation);
   const setProfile = useStore((s) => s.setProfile);
   const setPixelExact = useStore((s) => s.setPixelExact);
   const setError = useStore((s) => s.setError);
   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);
@@ -14779,19 +15087,7 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
     setHighlight(-1);
   };
   const picked = highlight >= 0 && highlight < matches.length ? matches[highlight] : null;
-  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 agentActive = useAgentActivity();
   const toggleAgent = () => {
     const current = useStore.getState().settings;
     const next = { ...current, agentControl: !current.agentControl };
@@ -14858,6 +15154,7 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
   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",
@@ -15038,6 +15335,23 @@ function Toolbar({ drawer, onTogglePanel, onToggleSettings }) {
           ]
         }
       ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "orientation-control", role: "group", "aria-label": "Screen orientation", children: ORIENTATIONS.map((value, i) => {
+        const shape = orientationShapes[i] ?? value;
+        const name = shape === "landscape" ? "Landscape" : "Portrait";
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: `orient-${shape}`,
+            title: `${name} — ${value === orientation ? "showing" : "rotate the screen"}`,
+            "aria-label": name,
+            "aria-pressed": orientation === value,
+            onClick: () => setOrientation(value),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { name: shape })
+          },
+          value
+        );
+      }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Segmented,
         {
@@ -15089,29 +15403,35 @@ 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 orientation = useStore((s) => selectTab(s).orientation);
+  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(() => {
@@ -15119,28 +15439,36 @@ function App() {
     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, 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
+      // 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((url) => {
-        setError(null);
-        setUrl(url);
+      window.obsrv.onUrlChanged(({ tabId, url }) => {
+        setTabError(tabId, null);
+        setTabUrl(tabId, url);
       }),
-      window.obsrv.onLoadError(setError),
-      window.obsrv.onTargetLoading(setTargetLoading),
+      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, setHistory]);
+  }, [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]);
@@ -15180,13 +15508,15 @@ 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, orientation, viewMode, panes, mode, targetBounds, canvasBounds });
+  }, [tabsKnown, activeId, presetId, profileId, orientation, viewMode, panes, mode, targetBounds, canvasBounds]);
   reactExports.useEffect(() => {
     return window.obsrv.onAgentApply((patch) => {
       const s = useStore.getState();
       if (patch.presetId !== void 0) s.setPreset(patch.presetId);
       if (patch.profileId !== void 0) s.setProfile(patch.profileId);
+      if (patch.orientation !== void 0) s.setOrientation(patch.orientation);
       if (patch.viewMode !== void 0) s.setViewMode(patch.viewMode);
       if (patch.panes !== void 0) s.setPanes(patch.panes);
       if (patch.pixelExact !== void 0) s.setPixelExact(patch.pixelExact);
@@ -15197,21 +15527,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,
@@ -15230,11 +15563,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 {