openclacky 1.5.19 → 1.5.21

data/lib/clacky/web/features/workspace/view.js

@@ -33,6 +33,14 @@ const WorkspaceView = (() => {
   const ICON_PANEL_LEFT = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>';
   const ICON_ARROW_LEFT = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>';
   const ICON_COLUMNS = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>';
+  const ICON_COPY_REL_PATH = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/><path d="M12 19l3-3"/></svg>';
+  const ICON_CLOSE_MD = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>';
+  const ICON_CLOSE_OTHERS = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h8"/><path d="M3 17h8"/><path d="m20 8-5 5"/><path d="m15 8 5 5"/></svg>';
+  const ICON_CLOSE_RIGHT = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4v16"/><path d="m20 8-6 6"/><path d="m14 8 6 6"/></svg>';
+  const ICON_CLOSE_ALL = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 9 6 6"/><path d="m15 9-6 6"/></svg>';
+  const ICON_ZOOM_IN  = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.6-3.6"/><path d="M11 8v6"/><path d="M8 11h6"/></svg>';
+  const ICON_ZOOM_OUT = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.6-3.6"/><path d="M8 11h6"/></svg>';
+  const ICON_ZOOM_FIT = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M16 3h3a2 2 0 0 1 2 2v3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/><path d="M8 21H5a2 2 0 0 1-2-2v-3"/></svg>';
 
   function el(tag, cls) {
     const d = document.createElement(tag);
@@ -135,6 +143,15 @@ const WorkspaceView = (() => {
     '<path fill="#c3ccd4" d="M9.7 1.5v3.3H13z"/>'
   );
 
+  const ICON_VIDEO = svgWrap(
+    '<rect x="1.5" y="3" width="13" height="10" rx="2" fill="#5c8ee6"/>' +
+    '<path d="m6.5 5.8 4 2.2-4 2.2z" fill="#fff"/>'
+  );
+
+  const ICON_AUDIO = svgWrap(
+    '<path d="M6.5 3.5v7.2a2.4 2.4 0 1 1-1.2-2.1V5l6-1.5v5.7a2.4 2.4 0 1 1-1.2-2.1V2z" fill="#38a6a5"/>'
+  );
+
   function extOf(name) {
     const n = name.toLowerCase();
     if (n.startsWith(".git")) return "gitfile";
@@ -167,6 +184,8 @@ const WorkspaceView = (() => {
     svg: imgIcon("#ffb13b"),
     png: imgIcon("#a074c4"), jpg: imgIcon("#a074c4"), jpeg: imgIcon("#a074c4"),
     gif: imgIcon("#a074c4"), webp: imgIcon("#a074c4"), ico: imgIcon("#a074c4"), bmp: imgIcon("#a074c4"),
+    mp4: ICON_VIDEO, webm: ICON_VIDEO, mov: ICON_VIDEO,
+    mp3: ICON_AUDIO, wav: ICON_AUDIO, ogg: ICON_AUDIO, aac: ICON_AUDIO, flac: ICON_AUDIO, m4a: ICON_AUDIO,
     pdf: boxIcon("P", "#e04b4b"),
     zip: boxIcon("Z", "#dba15d"), tar: boxIcon("Z", "#dba15d"), gz: boxIcon("Z", "#dba15d"),
     "7z": boxIcon("Z", "#dba15d"), rar: boxIcon("Z", "#dba15d"), dmg: boxIcon("Z", "#dba15d"), iso: boxIcon("Z", "#dba15d"),
@@ -307,8 +326,6 @@ const WorkspaceView = (() => {
   function showContextMenu(e, entry) {
     closeContextMenu();
 
-    const iconRelPath  = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/><path d="M12 19l3-3"/></svg>';
-
     const downloadItem = entry.type === "file" ? `
       <div class="session-actions-menu-item" data-action="download">
         <span class="session-actions-menu-icon">${ICON_DOWNLOAD}</span>
@@ -334,7 +351,7 @@ const WorkspaceView = (() => {
         <span class="session-actions-menu-label">${t("workspace.copyPath")}</span>
       </div>
       <div class="session-actions-menu-item" data-action="copyrelpath">
-        <span class="session-actions-menu-icon">${iconRelPath}</span>
+        <span class="session-actions-menu-icon">${ICON_COPY_REL_PATH}</span>
         <span class="session-actions-menu-label">${t("workspace.copyRelPath")}</span>
       </div>
       ${downloadItem}
@@ -663,6 +680,52 @@ const WorkspaceView = (() => {
 
   const VIEWER_ASIDE_WIDTH = 700;
 
+  // Image zoom is expressed against the picture's own pixels, so 100% always
+  // means "one screen pixel per image pixel" whatever the pane is doing.
+  const IMAGE_MIN_ZOOM = 0.1;
+  const IMAGE_MAX_ZOOM = 8;
+  const IMAGE_ZOOM_STEP = 1.25;
+
+  // Open files outlive a reload: the strip is rebuilt from a per-session record
+  // in localStorage, so refreshing the page (or coming back to a session) lands
+  // on the same files. Paths only — every tab body is fetched from disk again.
+  const OPEN_TABS_KEY = "clacky.workspace.openTabs";
+  const OPEN_TABS_MAX_SESSIONS = 12;
+
+  function readOpenTabs() {
+    try {
+      const raw = localStorage.getItem(OPEN_TABS_KEY);
+      const data = raw ? JSON.parse(raw) : null;
+      return data && typeof data === "object" ? data : {};
+    } catch (_e) {
+      return {};
+    }
+  }
+
+  // Least-recently-used sessions are dropped so a long-lived browser does not
+  // keep a list for every session it has ever opened.
+  function writeOpenTabs(data) {
+    const ids = Object.keys(data);
+    if (ids.length > OPEN_TABS_MAX_SESSIONS) {
+      ids.sort((a, b) => ((data[b] && data[b].ts) || 0) - ((data[a] && data[a].ts) || 0));
+      ids.slice(OPEN_TABS_MAX_SESSIONS).forEach((id) => { delete data[id]; });
+    }
+    try { localStorage.setItem(OPEN_TABS_KEY, JSON.stringify(data)); } catch (_e) { /* quota / private mode */ }
+  }
+
+  // Reopen what this session had on screen before the reload. A path that no
+  // longer opens is skipped without a message: the record is a convenience, not
+  // a promise that the file is still there.
+  async function restoreOpenTabs(viewer) {
+    const sessionId = Workspace.state.sessionId;
+    const saved = sessionId ? readOpenTabs()[sessionId] : null;
+    if (!saved || !Array.isArray(saved.tabs)) return;
+    for (const path of saved.tabs) {
+      if (typeof path === "string" && path) await viewer.openTab(toEntry(path), { silent: true });
+    }
+    if (saved.active) viewer.activate(saved.active);
+  }
+
   // Active viewer instance (one per mounted Files tab). Kept at module level
   // so openFile() — called from chat file:// link clicks — can reach the
   // viewer without waiting for a DOM query or a custom event round-trip.
@@ -695,7 +758,32 @@ const WorkspaceView = (() => {
     const tabs = [];
     let activeId = null;
     let releaseAsideWidth = null;
-    const notify = () => { if (onTabsChanged) onTabsChanged({ count: tabs.length, activeId }); };
+    const notify = () => {
+      if (onTabsChanged) onTabsChanged({ count: tabs.length, activeId });
+      persistTabs();
+    };
+
+    // Derived from the strip rather than patched in place, so closing the last
+    // tab forgets the session instead of leaving a stale list behind. Binary
+    // tabs stay out: reopening one is a request to launch an external
+    // application, which a page reload must not do on its own.
+    function persistTabs() {
+      const sessionId = Workspace.state.sessionId;
+      if (!sessionId) return;
+      const data = readOpenTabs();
+      const paths = tabs.filter((x) => x.kind !== "binary").map((x) => x.entry.path);
+      if (!paths.length) {
+        delete data[sessionId];
+      } else {
+        const active = tabs.find((x) => x.id === activeId);
+        data[sessionId] = {
+          tabs: paths,
+          active: active && active.kind !== "binary" ? active.entry.path : paths[paths.length - 1],
+          ts: Date.now(),
+        };
+      }
+      writeOpenTabs(data);
+    }
 
     function ensureAsideWidth() {
       if (releaseAsideWidth || !window.Clacky || !Clacky.Aside || !Clacky.Aside.requestWidth) return;
@@ -833,6 +921,10 @@ const WorkspaceView = (() => {
         btn.addEventListener("auxclick", (e) => {
           if (e.button === 1) closeTab(tab.id);
         });
+        btn.addEventListener("contextmenu", (e) => {
+          e.preventDefault();
+          showTabContextMenu(e, tab);
+        });
 
         tabsEl.appendChild(btn);
       });
@@ -876,8 +968,15 @@ const WorkspaceView = (() => {
     }
 
     function activate(id) {
+      // A restored record can name a file that never opened; dropping the id
+      // keeps the strip from going fully inactive.
+      if (id != null && !tabs.some((x) => x.id === id)) return;
       activeId = id;
-      tabs.forEach((tab) => tab.el.classList.toggle("active", tab.id === id));
+      tabs.forEach((tab) => {
+        const active = tab.id === id;
+        tab.el.classList.toggle("active", active);
+        if (!active && tab.mediaEl) tab.mediaEl.pause();
+      });
       rebuildTabbar();
       updateActions();
       notify();
@@ -890,6 +989,18 @@ const WorkspaceView = (() => {
       }
     }
 
+    function disposeTab(tab) {
+      if (tab.editor) tab.editor.destroy();
+      if (tab.zoomObserver) tab.zoomObserver.disconnect();
+      if (tab.imageUrl) URL.revokeObjectURL(tab.imageUrl);
+      if (tab.mediaEl) {
+        tab.mediaEl.pause();
+        tab.mediaEl.removeAttribute("src");
+        tab.mediaEl.load();
+      }
+      tab.el.remove();
+    }
+
     async function closeTab(id) {
       const idx = tabs.findIndex((x) => x.id === id);
       if (idx < 0) return;
@@ -898,9 +1009,7 @@ const WorkspaceView = (() => {
         const ok = await Modal.confirm(t("workspace.dirtyCloseConfirm"));
         if (!ok) return;
       }
-      if (tab.editor) tab.editor.destroy();
-      if (tab.imageUrl) URL.revokeObjectURL(tab.imageUrl);
-      tab.el.remove();
+      disposeTab(tab);
       tabs.splice(idx, 1);
       if (activeId === id) {
         const next = tabs[Math.min(idx, tabs.length - 1)];
@@ -912,6 +1021,125 @@ const WorkspaceView = (() => {
       notify();
     }
 
+    // Closing several tabs at once is one gesture, so ask once for the whole
+    // batch instead of once per unsaved file. The active tab only moves when it
+    // was part of the batch.
+    async function closeTabs(doomed) {
+      if (!doomed.length) return;
+      const dirtyCount = doomed.filter((x) => x.dirty).length;
+      if (dirtyCount > 0) {
+        const ok = await Modal.confirm(t("workspace.dirtyCloseBatchConfirm", { count: dirtyCount }));
+        if (!ok) return;
+      }
+      const doomedIds = doomed.map((x) => x.id);
+      doomed.forEach(disposeTab);
+      for (let i = tabs.length - 1; i >= 0; i--) {
+        if (doomedIds.indexOf(tabs[i].id) >= 0) tabs.splice(i, 1);
+      }
+      const nextId = doomedIds.indexOf(activeId) >= 0
+        ? (tabs.length ? tabs[tabs.length - 1].id : null)
+        : activeId;
+      activate(nextId);
+      if (tabs.length === 0) restoreAsideWidth();
+    }
+
+    function closeAllTabs() {
+      return closeTabs(tabs.slice());
+    }
+
+    function closeOtherTabs(tab) {
+      return closeTabs(tabs.filter((x) => x.id !== tab.id));
+    }
+
+    function closeTabsToTheRight(tab) {
+      return closeTabs(tabs.slice(tabs.findIndex((x) => x.id === tab.id) + 1));
+    }
+
+    // Right-click on a tab. The file actions are the ones the tree already
+    // offers for the same entry; closing is the tab's own, so the menu is the
+    // only place it can also act on tabs the pointer is not hovering.
+    function showTabContextMenu(e, tab) {
+      closeContextMenu();
+      const entry = tab.entry;
+      // "Close to the Right" has nothing to act on when the tab is the last one;
+      // keep the entry in place so the menu does not shift, but grey it out.
+      const hasTabsToTheRight = tabs.indexOf(tab) < tabs.length - 1;
+
+      const menu = document.createElement("div");
+      menu.className = "wt-context-menu session-context-menu";
+      menu.innerHTML = `
+        <div class="session-actions-menu-item" data-action="closetab">
+          <span class="session-actions-menu-icon">${ICON_CLOSE_MD}</span>
+          <span class="session-actions-menu-label">${t("workspace.closeTab")}</span>
+        </div>
+        <div class="session-actions-menu-item" data-action="closeothers">
+          <span class="session-actions-menu-icon">${ICON_CLOSE_OTHERS}</span>
+          <span class="session-actions-menu-label">${t("workspace.closeOthers")}</span>
+        </div>
+        <div class="session-actions-menu-item${hasTabsToTheRight ? "" : " session-actions-menu-item--disabled"}" data-action="closeright">
+          <span class="session-actions-menu-icon">${ICON_CLOSE_RIGHT}</span>
+          <span class="session-actions-menu-label">${t("workspace.closeToTheRight")}</span>
+        </div>
+        <div class="session-actions-menu-item" data-action="closealltabs">
+          <span class="session-actions-menu-icon">${ICON_CLOSE_ALL}</span>
+          <span class="session-actions-menu-label">${t("workspace.closeAllTabs")}</span>
+        </div>
+        <div class="wv-menu-separator"></div>
+        <div class="session-actions-menu-item" data-action="addtochat">
+          <span class="session-actions-menu-icon">${ICON_ADD_TO_CHAT}</span>
+          <span class="session-actions-menu-label">${t("workspace.addToChat")}</span>
+        </div>
+        <div class="session-actions-menu-item" data-action="reveal">
+          <span class="session-actions-menu-icon">${ICON_FOLDER}</span>
+          <span class="session-actions-menu-label">${t("workspace.revealInFinder")}</span>
+        </div>
+        <div class="session-actions-menu-item" data-action="copypath">
+          <span class="session-actions-menu-icon">${ICON_COPY}</span>
+          <span class="session-actions-menu-label">${t("workspace.copyPath")}</span>
+        </div>
+        <div class="session-actions-menu-item" data-action="copyrelpath">
+          <span class="session-actions-menu-icon">${ICON_COPY_REL_PATH}</span>
+          <span class="session-actions-menu-label">${t("workspace.copyRelPath")}</span>
+        </div>
+        <div class="session-actions-menu-item" data-action="download">
+          <span class="session-actions-menu-icon">${ICON_DOWNLOAD}</span>
+          <span class="session-actions-menu-label">${t("workspace.download")}</span>
+        </div>
+      `;
+
+      document.body.appendChild(menu);
+      menu.addEventListener("contextmenu", (ev) => ev.preventDefault());
+      menu.style.position = "fixed";
+      menu.style.top = e.clientY + "px";
+      menu.style.left = e.clientX + "px";
+      requestAnimationFrame(() => {
+        const r = menu.getBoundingClientRect();
+        if (r.right > window.innerWidth)   menu.style.left = (window.innerWidth - r.width - 8) + "px";
+        if (r.bottom > window.innerHeight) menu.style.top  = (window.innerHeight - r.height - 8) + "px";
+      });
+
+      menu.addEventListener("click", async (ev) => {
+        const item = ev.target.closest(".session-actions-menu-item");
+        if (!item) return;
+        closeContextMenu();
+        if (item.classList.contains("session-actions-menu-item--disabled")) return;
+        const action = item.dataset.action;
+        if (action === "closetab")     await closeTab(tab.id);
+        if (action === "closeothers")  await closeOtherTabs(tab);
+        if (action === "closeright")   await closeTabsToTheRight(tab);
+        if (action === "closealltabs") await closeAllTabs();
+        if (action === "reveal")       await revealFile(entry);
+        if (action === "download")     await downloadFile(entry);
+        if (action === "copypath")     copyPath(entry);
+        if (action === "copyrelpath")  copyRelPath(entry);
+        if (action === "addtochat")    addToChat(entry);
+      });
+
+      setTimeout(() => {
+        document.addEventListener("click", closeContextMenu, { once: true });
+      }, 0);
+    }
+
     function syncDirty(tab) {
       rebuildTabbar();
       updateActions();
@@ -1001,10 +1229,148 @@ const WorkspaceView = (() => {
 
     function buildImageTab(entry, url) {
       const pane = el("div", "wv-pane wv-pane--image");
+      const viewport = el("div", "wv-zoom");
       const img = document.createElement("img");
       img.alt = entry.name;
       img.src = url;
-      pane.appendChild(img);
+      img.draggable = false;
+      viewport.appendChild(img);
+
+      const bar = el("div", "wv-zoom-bar");
+      const outBtn = actionBtn(ICON_ZOOM_OUT, t("workspace.zoomOut"), "wv-zoom-btn");
+      const level = el("span", "wv-zoom-level");
+      const inBtn = actionBtn(ICON_ZOOM_IN, t("workspace.zoomIn"), "wv-zoom-btn");
+      const fitBtn = actionBtn(ICON_ZOOM_FIT, t("workspace.zoomFit"), "wv-zoom-btn");
+      bar.append(outBtn, level, inBtn, fitBtn);
+      pane.append(viewport, bar);
+
+      // The picture keeps its natural size and is scaled by transform, so the
+      // number in the bar is a pixel ratio rather than a share of the pane.
+      // `fit` is the scale that shows all of it; the buttons, the wheel and the
+      // double click all move away from there.
+      let scale = 1;
+      let fit = 1;
+      let x = 0;
+      let y = 0;
+
+      function fitScale() {
+        const vw = viewport.clientWidth;
+        const vh = viewport.clientHeight;
+        // A pane inside a hidden tab measures as zero, and a zero ratio would
+        // park the picture at an invisible size — stay neutral until it is real.
+        if (!vw || !vh) return 1;
+        const nw = img.naturalWidth || vw;
+        const nh = img.naturalHeight || vh;
+        return Math.min(1, vw / nw, vh / nh);
+      }
+
+      function pan(offsetX, offsetY) {
+        // Nothing to reveal beyond the edges, so an image narrower than the
+        // pane stays centred instead of being dragged off into a corner.
+        const maxX = Math.max(0, (img.naturalWidth * scale - viewport.clientWidth) / 2);
+        const maxY = Math.max(0, (img.naturalHeight * scale - viewport.clientHeight) / 2);
+        x = Math.max(-maxX, Math.min(maxX, offsetX));
+        y = Math.max(-maxY, Math.min(maxY, offsetY));
+      }
+
+      function render() {
+        pan(x, y);
+        img.style.transform = "translate(" + x + "px, " + y + "px) scale(" + scale + ")";
+        level.textContent = Math.round(scale * 100) + "%";
+        outBtn.disabled = scale <= IMAGE_MIN_ZOOM + 1e-6;
+        inBtn.disabled = scale >= IMAGE_MAX_ZOOM - 1e-6;
+      }
+
+      // Zoom around a point (pane centre by default) so the pixels under the
+      // cursor stay put instead of the picture drifting toward a corner.
+      function zoomAt(target, px, py) {
+        const next = Math.max(IMAGE_MIN_ZOOM, Math.min(IMAGE_MAX_ZOOM, target));
+        if (next === scale) return;
+        const k = next / scale;
+        x = px - k * (px - x);
+        y = py - k * (py - y);
+        scale = next;
+        render();
+      }
+
+      function anchorOf(ev) {
+        const rect = viewport.getBoundingClientRect();
+        return [ev.clientX - (rect.left + rect.width / 2), ev.clientY - (rect.top + rect.height / 2)];
+      }
+
+      function reset() {
+        fit = fitScale();
+        scale = fit;
+        x = 0;
+        y = 0;
+        render();
+      }
+
+      const atFit = () => Math.abs(scale - fit) < 1e-6;
+
+      // A double click is the shortcut for "show me the real pixels" — or, for a
+      // picture that already fits, for "closer than that".
+      const closerTarget = () => (fit < 1 ? 1 : fit * 2);
+
+      inBtn.addEventListener("click", () => zoomAt(scale * IMAGE_ZOOM_STEP, 0, 0));
+      outBtn.addEventListener("click", () => zoomAt(scale / IMAGE_ZOOM_STEP, 0, 0));
+      fitBtn.addEventListener("click", reset);
+
+      // A picture has nothing to scroll, so the wheel belongs to the zoom —
+      // including the pinch gesture a trackpad reports as ctrl+wheel. The
+      // damping keeps one mouse notch (±100) near a quarter turn while the many
+      // small deltas a trackpad sends add up to a glide instead of a jump.
+      viewport.addEventListener("wheel", (ev) => {
+        ev.preventDefault();
+        const anchor = anchorOf(ev);
+        zoomAt(scale * Math.exp(-ev.deltaY * 0.002), anchor[0], anchor[1]);
+      }, { passive: false });
+
+      viewport.addEventListener("dblclick", (ev) => {
+        ev.preventDefault();
+        if (atFit()) {
+          const anchor = anchorOf(ev);
+          zoomAt(closerTarget(), anchor[0], anchor[1]);
+        } else {
+          reset();
+        }
+      });
+
+      let drag = null;
+      viewport.addEventListener("pointerdown", (ev) => {
+        if (ev.button) return;
+        drag = { id: ev.pointerId, x: ev.clientX, y: ev.clientY };
+        viewport.classList.add("is-panning");
+        viewport.setPointerCapture(ev.pointerId);
+        ev.preventDefault();
+      });
+      viewport.addEventListener("pointermove", (ev) => {
+        if (!drag || ev.pointerId !== drag.id) return;
+        pan(x + ev.clientX - drag.x, y + ev.clientY - drag.y);
+        drag.x = ev.clientX;
+        drag.y = ev.clientY;
+        img.style.transform = "translate(" + x + "px, " + y + "px) scale(" + scale + ")";
+      });
+      const endDrag = (ev) => {
+        if (!drag || ev.pointerId !== drag.id) return;
+        drag = null;
+        viewport.classList.remove("is-panning");
+      };
+      viewport.addEventListener("pointerup", endDrag);
+      viewport.addEventListener("pointercancel", endDrag);
+
+      img.addEventListener("load", reset);
+      if (img.complete) reset();
+      render();
+
+      // Dragging the aside or the window changes the fit ratio, and a tab that
+      // was opened in the background only finds its real size once it is shown —
+      // so refit on every new size, but leave a deliberate zoom alone.
+      const observer = typeof ResizeObserver === "function"
+        ? new ResizeObserver(() => { if (atFit()) reset(); })
+        : null;
+      if (observer) observer.observe(viewport);
+
       return {
         id: entry.path,
         entry,
@@ -1016,6 +1382,7 @@ const WorkspaceView = (() => {
         previewEl: null,
         editor: null,
         imageUrl: url,
+        zoomObserver: observer,
       };
     }
 
@@ -1039,6 +1406,36 @@ const WorkspaceView = (() => {
       };
     }
 
+    function buildMediaTab(entry, kind, url) {
+      const pane = el("div", "wv-pane wv-pane--media wv-pane--" + kind);
+      const media = document.createElement(kind);
+      media.className = "wv-media-player wv-media-player--" + kind;
+      media.controls = true;
+      media.preload = "metadata";
+      media.src = url;
+      media.setAttribute("aria-label", entry.name);
+      if (kind === "video") media.playsInline = true;
+
+      const error = el("div", "wv-media-error");
+      error.textContent = t("workspace.previewUnsupported");
+      media.addEventListener("error", () => pane.classList.add("is-error"));
+      pane.append(media, error);
+
+      return {
+        id: entry.path,
+        entry,
+        kind,
+        el: pane,
+        dirty: false,
+        isMd: false,
+        previewMode: false,
+        previewEl: null,
+        editor: null,
+        imageUrl: null,
+        mediaEl: media,
+      };
+    }
+
     async function buildFallbackTab(entry) {
       const pane = el("div", "wv-pane wv-pane--fallback");
 
@@ -1103,7 +1500,8 @@ const WorkspaceView = (() => {
       };
     }
 
-    async function openTab(entry) {
+    async function openTab(entry, opts) {
+      const silent = !!(opts && opts.silent);
       const existing = tabs.find((x) => x.id === entry.path);
       if (existing) {
         activate(existing.id);
@@ -1126,6 +1524,8 @@ const WorkspaceView = (() => {
           tab = buildImageTab(entry, URL.createObjectURL(blob));
         } else if (kind === "pdf") {
           tab = buildPdfTab(entry, "/api/local-image?path=" + encodeURIComponent(Workspace.absPath(entry.path)));
+        } else if (kind === "video" || kind === "audio") {
+          tab = buildMediaTab(entry, kind, "/api/local-image?path=" + encodeURIComponent(Workspace.absPath(entry.path)));
         } else if (kind === "binary") {
           // The extension already says the browser cannot render this, so the
           // OS application the user was going to pick is launched below without
@@ -1143,7 +1543,14 @@ const WorkspaceView = (() => {
         }
       } catch (err) {
         console.error("preview failed:", err);
-        Modal.toast(t("workspace.previewFailed") + ": " + err.message, "error");
+        if (silent) {
+          // Only a restore asks for silence, and its failures are files that no
+          // longer open — rewriting the record keeps later reloads from
+          // retrying them.
+          persistTabs();
+        } else {
+          Modal.toast(t("workspace.previewFailed") + ": " + err.message, "error");
+        }
         return;
       }
       if (tabs.length === 0) ensureAsideWidth();
@@ -1185,15 +1592,12 @@ const WorkspaceView = (() => {
 
     function destroy() {
       restoreAsideWidth();
-      tabs.forEach((tab) => {
-        if (tab.editor) tab.editor.destroy();
-        if (tab.imageUrl) URL.revokeObjectURL(tab.imageUrl);
-      });
+      tabs.forEach(disposeTab);
       tabs.length = 0;
       activeId = null;
     }
 
-    return { root, openTab, destroy };
+    return { root, openTab, activate, destroy };
   }
 
   // Draggable split between the file tree and the viewer. The tree width is a
@@ -1451,6 +1855,7 @@ const WorkspaceView = (() => {
     }
 
     reloadTree({ reset: true });
+    restoreOpenTabs(viewer);
 
     // The tree is otherwise loaded only once per mount. Reload it when the
     // working directory changes (status-bar dir switch) and when the agent