fix(ui): render PDFs with pdf.js instead of an iframe

On iOS the file viewer showed only the first page of a PDF, with no way
to scroll to the rest — the document had to be downloaded and opened in
another app. The cause was not ours: WebKit refuses to mount its PDF
viewer inside an <iframe>/<object>/<embed> and paints a static first-page
thumbnail instead. That hits Safari on iOS and every WKWebView, so the
native shell too. The full viewer only exists for a top-level navigation.

The desktop browsers do mount a viewer, but each mounts its own — Chrome's
toolbar, Safari's page-index sidebar — so the same document also looked
different on every machine.

Both are answered by drawing the pages ourselves. New <pdf-view>
(web/components/shared/pdf-view.js) renders a continuous scroll of canvas
pages on the vendored pdf.js, with a zoom control and a page counter, and
replaces the iframe for both native .pdf files and server-compiled LaTeX.

Three properties are load-bearing:

- pdf.js is imported lazily (~450 KB + a 1.2 MB worker), so a session that
  never opens a PDF never pays for it.
- Canvases are created and destroyed as pages scroll. iOS caps the total
  canvas backing store a page may hold and silently blanks canvases past
  it, so an eager render would come out empty on exactly the platform this
  was written for. Off-screen pages keep only a correctly-sized box, which
  is also what keeps the scrollbar honest.
- The text layer (selection, in-page find) is best-effort: it is
  transparent DOM over the pixels, so its failures are swallowed rather
  than surfaced.

Vendored from pdfjs-dist 6.2.108: pdf.min.mjs, pdf.worker.min.mjs, the
standard-font data (needed by PDFs that reference Helvetica/Times without
embedding them) and the .textLayer block of pdf_viewer.css. CJK cmaps are
deliberately left out. pdf.js 6 needs Safari/iOS 17.4+.

Verified in headless Chromium against both a synthetic 12-page PDF using
non-embedded Helvetica and a real 14-page paper with embedded fonts and
figures: all pages present, last page renders after scrolling, page 1
released off-screen, text layer populated, zoom re-renders at the new
scale, no JS errors.

docs/projects.md

@@ -40,6 +40,8 @@ A file explorer rooted at the project folder:
 - Click a **folder** to navigate into it.
 - The listing **updates by itself**: if another member or the assistant creates, renames or deletes a file while you're looking at a folder, the change appears within a second — no refresh needed.
 
+For **PDF** files, the viewer shows the whole document as one continuous scroll — every page, in order, on phone, tablet and computer alike. A small toolbar on top gives zoom out / zoom in and tells you which page you are on (`3 / 12`). The text stays selectable and copiable where the PDF itself has real text. Pages are drawn as you reach them, so a long document opens quickly instead of making you wait for the last page. If you'd rather open it in another app, the **download** button in the header saves the original file.
+
 For **Markdown** files (`.md`), if you have write access the viewer has two tabs:
 
 - **View** — the rendered document (the default).

web/components/shared/file-viewer-base.js

@@ -4,6 +4,7 @@ import { keyed }          from 'lit/directives/keyed.js';
 import { LightElement, renderMarkdown } from '../../lib/base.js';
 import { fileWatcher }    from '../../lib/file-watcher.js';
 import { t }              from '../../lib/i18n.js';
+import './pdf-view.js';   // registers <pdf-view>; pdf.js itself is imported lazily
 
 /**
  * Shared file-viewer engine. Holds all of the fetch / kind-detection /
@@ -554,17 +555,20 @@ export class FileViewerBase extends LightElement {
       return html`<div class="fv-image-wrap"><img src=${this._blobUrl} alt=${this._path} class="fv-image" /></div>`;
     }
     if (this._kind === 'pdf' && this._blobUrl) {
-      // `keyed` re-creates the iframe element on every new blob URL: the first
+      // Drawn by <pdf-view> (pdf.js on canvas), never by the browser's built-in
-      // navigation of a fresh iframe replaces its history slot instead of
+      // viewer in an <iframe>: WebKit renders a framed PDF as a static first-page
-      // pushing one — whereas re-assigning `src` on an existing iframe pushes
+      // thumbnail, so on iOS — Safari and every WKWebView, the native shell
-      // a joint session-history entry each time (during the watch-reload loop
+      // included — the document had one page and no scroll. It also removes the
-      // that buried the back button under hundreds of blob: entries).
+      // per-browser viewer chrome (Chrome's toolbar, Safari's page sidebar), so
-      return keyed(this._blobUrl, html`<iframe class="fv-pdf" src=${this._blobUrl} title=${this._path}></iframe>`);
+      // a PDF now looks the same everywhere. `keyed` is gone with the iframe:
+      // updating a property pushes no session-history entry, which is what the
+      // watch-reload loop used to bury the back button under blob: entries.
+      return html`<pdf-view class="fv-pdf" .src=${this._blobUrl}></pdf-view>`;
     }
     if (this._kind === 'latex' && this._blobUrl) {
-      // Successfully compiled server-side — render the resulting PDF the same
+      // Successfully compiled server-side — render the resulting PDF exactly as
-      // way a native .pdf would be rendered (see the keyed() note above).
+      // a native .pdf is rendered (see the note above).
-      return keyed(this._blobUrl, html`<iframe class="fv-pdf" src=${this._blobUrl} title=${this._path}></iframe>`);
+      return html`<pdf-view class="fv-pdf" .src=${this._blobUrl}></pdf-view>`;
     }
     if (this._kind === 'svg' && this._blobUrl) {
       // `allow-same-origin` (and nothing else) is required so the iframe can load

web/components/shared/pdf-view.js

@@ -0,0 +1,410 @@
+import { html, nothing } from 'lit';
+import { LightElement }  from '../../lib/base.js';
+import { t }             from '../../lib/i18n.js';
+
+/**
+ * `<pdf-view src="blob:…">` — a continuous, scrollable PDF renderer built on the
+ * vendored pdf.js.
+ *
+ * It exists because the obvious implementation — `<iframe src=<the pdf>>` — is
+ * not portable. On iOS (Safari *and* every WKWebView, so the native shell too)
+ * WebKit refuses to mount its PDF viewer inside a frame and paints a static
+ * first-page thumbnail instead: no scroll, no other pages. That was the reported
+ * bug. The desktop browsers do mount a viewer, but each mounts *its own* —
+ * Chrome's toolbar, Safari's page-index sidebar, Firefox's own pdf.js — so the
+ * same document looked different on every machine. Rendering the pages
+ * ourselves answers both: one appearance everywhere, and pages that scroll.
+ *
+ * Three properties of the implementation are load-bearing:
+ *
+ * - **pdf.js is imported lazily.** The library is ~450 KB and its worker ~1.2 MB;
+ *   most sessions never open a PDF, so the import happens on the first document
+ *   and the module is memoised process-wide afterwards.
+ * - **Canvases are created and destroyed as they scroll.** iOS caps the total
+ *   canvas backing store a page may hold (a few hundred MB) and *silently blanks*
+ *   canvases once past it — so a 200-page document rendered eagerly would come
+ *   out empty on exactly the platform this component was written for. Only pages
+ *   near the viewport hold pixels; the rest are placeholder boxes of the right
+ *   size, which is also what keeps the scrollbar honest.
+ * - **The text layer is best-effort.** It is what makes selection and ⌘F work,
+ *   but it is transparent DOM sitting on top of the pixels: if it fails, the
+ *   page is still perfectly readable, so its errors are swallowed rather than
+ *   surfaced.
+ *
+ * The page boxes live in `.pdfv-pages`, which the Lit template declares empty
+ * and with no bindings inside — that is deliberate, and the one rule to keep
+ * when editing `render()`: Lit only manages nodes around its own markers, so a
+ * binding placed in there would have it clobber the canvases we append by hand.
+ *
+ * pdf.js 6 uses `Promise.withResolvers` on both the main thread and inside the
+ * worker, so it needs Safari/iOS 17.4+ (Chrome 119+). A main-thread-only
+ * polyfill would not help — the worker is its own global scope.
+ */
+
+const PDFJS_MODULE   = '/vendor/pdf.min.mjs';
+const WORKER_URL     = '/vendor/pdf.worker.min.mjs';
+const STD_FONTS_URL  = '/vendor/pdf-standard-fonts/';
+
+/** Zoom multipliers applied on top of fit-width. Index into this, never free-form. */
+const ZOOM_STEPS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3];
+const ZOOM_FIT   = 2; // index of 1.0 — the default
+
+/** At zoom 1 a page is fit-width, but never wider than this — a full-bleed page
+ *  on a 27" monitor is a worse read than a bounded column. */
+const MAX_FIT_WIDTH = 1000;
+
+/** How far outside the viewport (in viewport heights) a page still holds pixels. */
+const RENDER_MARGIN = 1.5;
+
+/** Upper bound on a single canvas' backing store. Above ~2 the extra pixels are
+ *  invisible, and on iOS they are the difference between rendering and blanking. */
+const MAX_DPR = 2;
+
+let _pdfjsPromise = null;
+
+/** Import pdf.js once per page load and point it at the vendored worker. */
+function loadPdfjs() {
+  if (!_pdfjsPromise) {
+    _pdfjsPromise = import(PDFJS_MODULE).then((mod) => {
+      mod.GlobalWorkerOptions.workerSrc = WORKER_URL;
+      return mod;
+    }).catch((e) => {
+      _pdfjsPromise = null;   // let a later open retry a transient network failure
+      throw e;
+    });
+  }
+  return _pdfjsPromise;
+}
+
+export class PdfView extends LightElement {
+  static properties = {
+    src:      { type: String },
+    _error:   { state: true },
+    _loading: { state: true },
+    _zoomIdx: { state: true },
+    _total:   { state: true },
+    _current: { state: true },
+  };
+
+  constructor() {
+    super();
+    this.src      = null;
+    this._error   = null;
+    this._loading = false;
+    this._zoomIdx = ZOOM_FIT;
+    this._total   = 0;
+    this._current = 1;
+
+    this._doc      = null;   // PDFDocumentProxy
+    this._pdfjs    = null;   // the imported module
+    this._slots    = [];     // per page: { el, page, viewport, canvas, task, rendered }
+    this._observer = null;   // IntersectionObserver driving render/release
+    this._loadSeq  = 0;      // guards against a stale document landing after a newer one
+    this._ro       = null;   // ResizeObserver on the scroll host
+    this._resizeTimer = null;
+    this._lastWidth   = 0;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardown();
+  }
+
+  updated(changed) {
+    if (changed.has('src')) this._open(this.src);
+  }
+
+  // ── Document lifecycle ─────────────────────────────────────────────────────
+
+  async _open(src) {
+    this._teardown();
+    if (!src) return;
+    const seq = ++this._loadSeq;
+    this._loading = true;
+    this._error   = null;
+    this._total   = 0;
+    this._current = 1;
+    try {
+      const pdfjs = await loadPdfjs();
+      const doc   = await pdfjs.getDocument({
+        url:                 src,
+        standardFontDataUrl: STD_FONTS_URL,
+      }).promise;
+      // A newer src landed while we were loading — drop this one on the floor.
+      if (seq !== this._loadSeq) { doc.destroy(); return; }
+      this._pdfjs = pdfjs;
+      this._doc   = doc;
+      this._total = doc.numPages;
+      this._loading = false;
+      await this.updateComplete;          // the scroll host must exist to fill it
+      if (seq !== this._loadSeq) return;
+      await this._buildSlots(seq);
+    } catch (e) {
+      if (seq !== this._loadSeq) return;
+      this._loading = false;
+      this._error   = e?.message || String(e);
+    }
+  }
+
+  /**
+   * Create one placeholder box per page, sized from that page's own viewport, and
+   * hand them to the IntersectionObserver. Every page is measured up front (a
+   * cheap metadata call) rather than assuming page 1's aspect ratio: a document
+   * that mixes portrait and landscape would otherwise resize boxes under the
+   * user's finger as they scroll, which is exactly the jitter this viewer is
+   * meant to remove.
+   */
+  async _buildSlots(seq) {
+    const host  = this.querySelector('.pdfv-scroll');
+    const pages = this.querySelector('.pdfv-pages');
+    if (!host || !pages) return;
+    pages.replaceChildren();
+    this._slots = [];
+
+    for (let n = 1; n <= this._doc.numPages; n++) {
+      const page = await this._doc.getPage(n);
+      if (seq !== this._loadSeq) return;
+      const el = document.createElement('div');
+      el.className = 'pdfv-page';
+      el.dataset.page = String(n);
+      pages.appendChild(el);
+      this._slots.push({ el, page, viewport: page.getViewport({ scale: 1 }), canvas: null, task: null, rendered: false });
+    }
+
+    this._layout();
+    this._observe(host);
+    this._watchResize(host);
+  }
+
+  _teardown() {
+    this._loadSeq++;
+    this._observer?.disconnect();
+    this._observer = null;
+    this._ro?.disconnect();
+    this._ro = null;
+    if (this._resizeTimer) { clearTimeout(this._resizeTimer); this._resizeTimer = null; }
+    for (const slot of this._slots) this._release(slot);
+    this._slots = [];
+    this.querySelector('.pdfv-pages')?.replaceChildren();
+    this._doc?.destroy();
+    this._doc = null;
+    this._lastWidth = 0;
+  }
+
+  // ── Sizing ─────────────────────────────────────────────────────────────────
+
+  /** CSS scale for the current container width and zoom step. */
+  _scale() {
+    const host = this.querySelector('.pdfv-scroll');
+    const base = this._slots[0]?.viewport;
+    if (!host || !base) return 1;
+    // Subtract the gutter the stylesheet reserves so a fit-width page doesn't
+    // overflow into a horizontal scrollbar.
+    const avail = Math.max(120, Math.min(host.clientWidth - 24, MAX_FIT_WIDTH));
+    return (avail / base.width) * ZOOM_STEPS[this._zoomIdx];
+  }
+
+  /**
+   * Size every placeholder for the current scale and drop the pixels of the ones
+   * already drawn, so they are redrawn at the new resolution. Called on first
+   * build, on zoom, and on a settled container resize.
+   *
+   * A slot with a render still *in flight* is released too, not just a finished
+   * one: that draw was set up against the old scale, and letting it land would
+   * paint a canvas of the previous size into a box that has just been resized.
+   *
+   * `sweep: false` is for callers that adjust `scrollTop` afterwards — sweeping
+   * first would pick the pages visible at the old offset.
+   */
+  _layout({ sweep = true } = {}) {
+    const scale = this._scale();
+    if (!(scale > 0)) return;
+    for (const slot of this._slots) {
+      const vp = slot.page.getViewport({ scale });
+      slot.el.style.width  = `${Math.floor(vp.width)}px`;
+      slot.el.style.height = `${Math.floor(vp.height)}px`;
+      slot.el.style.setProperty('--scale-factor', String(scale));
+      if (slot.rendered || slot.task) this._release(slot);
+    }
+    if (sweep) this._sweep();
+  }
+
+  _watchResize(host) {
+    if (!('ResizeObserver' in window)) return;
+    this._lastWidth = host.clientWidth;
+    this._ro = new ResizeObserver(() => {
+      // Only width changes the layout; a height change (mobile URL bar, keyboard)
+      // must not trigger a full re-render of every visible page.
+      if (host.clientWidth === this._lastWidth) return;
+      this._lastWidth = host.clientWidth;
+      if (this._resizeTimer) clearTimeout(this._resizeTimer);
+      this._resizeTimer = setTimeout(() => { this._resizeTimer = null; this._layout(); }, 150);
+    });
+    this._ro.observe(host);
+  }
+
+  // ── Render / release as pages scroll ───────────────────────────────────────
+
+  _observe(host) {
+    this._observer?.disconnect();
+    this._observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        const slot = this._slots[Number(entry.target.dataset.page) - 1];
+        if (!slot) continue;
+        if (entry.isIntersecting) this._render(slot);
+        else                      this._release(slot);
+      }
+      this._updateCurrent();
+    }, { root: host, rootMargin: `${RENDER_MARGIN * 100}% 0px` });
+    for (const slot of this._slots) this._observer.observe(slot.el);
+  }
+
+  /** Re-evaluate visibility without waiting for a scroll (after zoom/resize). */
+  _sweep() {
+    const host = this.querySelector('.pdfv-scroll');
+    if (!host || !this._slots.length) return;
+    const top    = host.scrollTop - host.clientHeight * RENDER_MARGIN;
+    const bottom = host.scrollTop + host.clientHeight * (1 + RENDER_MARGIN);
+    for (const slot of this._slots) {
+      const a = slot.el.offsetTop;
+      const b = a + slot.el.offsetHeight;
+      if (b >= top && a <= bottom) this._render(slot);
+    }
+    this._updateCurrent();
+  }
+
+  /** The page occupying the middle of the viewport — what the counter reports. */
+  _updateCurrent() {
+    const host = this.querySelector('.pdfv-scroll');
+    if (!host) return;
+    const mid = host.scrollTop + host.clientHeight / 2;
+    for (const slot of this._slots) {
+      if (slot.el.offsetTop + slot.el.offsetHeight >= mid) {
+        const n = Number(slot.el.dataset.page);
+        if (n !== this._current) this._current = n;
+        return;
+      }
+    }
+  }
+
+  async _render(slot) {
+    if (slot.rendered || slot.task) return;
+    const scale = this._scale();
+    if (!(scale > 0)) return;
+    const viewport = slot.page.getViewport({ scale });
+    const dpr      = Math.min(window.devicePixelRatio || 1, MAX_DPR);
+
+    const canvas = document.createElement('canvas');
+    canvas.className   = 'pdfv-canvas';
+    canvas.width       = Math.floor(viewport.width  * dpr);
+    canvas.height      = Math.floor(viewport.height * dpr);
+    canvas.style.width  = `${Math.floor(viewport.width)}px`;
+    canvas.style.height = `${Math.floor(viewport.height)}px`;
+    slot.el.appendChild(canvas);
+    slot.canvas = canvas;
+
+    const ctx = canvas.getContext('2d', { alpha: false });
+    slot.task = slot.page.render({
+      canvasContext: ctx,
+      viewport,
+      transform: dpr === 1 ? null : [dpr, 0, 0, dpr, 0, 0],
+    });
+    try {
+      await slot.task.promise;
+      slot.task     = null;
+      slot.rendered = true;
+      await this._renderText(slot, viewport);
+    } catch (e) {
+      slot.task = null;
+      // RenderingCancelledException is the normal outcome of scrolling away or
+      // zooming mid-draw — _release already tore the canvas down.
+      if (e?.name !== 'RenderingCancelledException') slot.el.classList.add('pdfv-page-failed');
+    }
+  }
+
+  /** Transparent selectable text over the pixels. Failure is cosmetic — swallow it. */
+  async _renderText(slot, viewport) {
+    try {
+      const container = document.createElement('div');
+      container.className = 'textLayer';
+      const layer = new this._pdfjs.TextLayer({
+        textContentSource: slot.page.streamTextContent(),
+        container,
+        viewport,
+      });
+      await layer.render();
+      if (slot.rendered) slot.el.appendChild(container);
+    } catch { /* selection is a bonus; the page is already readable */ }
+  }
+
+  /** Drop a page's pixels. Zeroing the canvas first is what actually frees the
+   *  backing store on WebKit — removing the element alone is not enough. */
+  _release(slot) {
+    slot.task?.cancel();
+    slot.task = null;
+    if (slot.canvas) {
+      slot.canvas.width  = 0;
+      slot.canvas.height = 0;
+      slot.canvas.remove();
+      slot.canvas = null;
+    }
+    slot.el.querySelector('.textLayer')?.remove();
+    slot.el.classList.remove('pdfv-page-failed');
+    slot.rendered = false;
+  }
+
+  // ── Toolbar ────────────────────────────────────────────────────────────────
+
+  _zoom(delta) {
+    const next = Math.max(0, Math.min(ZOOM_STEPS.length - 1, this._zoomIdx + delta));
+    if (next === this._zoomIdx) return;
+    // Keep the page under the middle of the viewport in place across the zoom.
+    const host   = this.querySelector('.pdfv-scroll');
+    const anchor = this._current;
+    this._zoomIdx = next;
+    this.updateComplete.then(() => {
+      this._layout({ sweep: false });
+      const slot = this._slots[anchor - 1];
+      if (host && slot) host.scrollTop = slot.el.offsetTop - 8;
+      this._sweep();
+    });
+  }
+
+  _onScroll() {
+    // The observer drives rendering; this only keeps the page counter live
+    // (scrolling within one tall page fires no intersection change).
+    this._updateCurrent();
+  }
+
+  render() {
+    if (this._error) {
+      return html`<div class="fv-state text-danger">
+        <i class="bi bi-exclamation-triangle fs-3 d-block mb-2"></i>${t('fv.pdf_failed')}
+        <div class="pdfv-error-detail">${this._error}</div>
+      </div>`;
+    }
+    return html`
+      <div class="pdfv">
+        <div class="pdfv-toolbar">
+          <button class="pdfv-btn" title=${t('fv.zoom_out')}
+            ?disabled=${this._zoomIdx === 0}
+            @click=${() => this._zoom(-1)}><i class="bi bi-zoom-out"></i></button>
+          <span class="pdfv-zoom">${Math.round(ZOOM_STEPS[this._zoomIdx] * 100)}%</span>
+          <button class="pdfv-btn" title=${t('fv.zoom_in')}
+            ?disabled=${this._zoomIdx === ZOOM_STEPS.length - 1}
+            @click=${() => this._zoom(1)}><i class="bi bi-zoom-in"></i></button>
+          ${this._total
+            ? html`<span class="pdfv-pageno">${this._current} / ${this._total}</span>`
+            : nothing}
+        </div>
+        <div class="pdfv-scroll" @scroll=${this._onScroll}>
+          <!-- Filled imperatively — must stay free of Lit bindings (see the header). -->
+          <div class="pdfv-pages"></div>
+          ${this._loading ? html`<div class="fv-state"><span class="spinner-border"></span></div>` : nothing}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('pdf-view', PdfView);

web/css/file-viewer.css

@@ -262,13 +262,127 @@
 
 /* ── PDF preview ─────────────────────────────────────────────────────────────── */
 
+/* PDFs are drawn by <pdf-view> (web/components/shared/pdf-view.js) on canvas, not
+   handed to the browser's built-in viewer: WebKit paints only a static first page
+   inside a frame — which is why iOS showed page 1 and nothing else — and the
+   desktop browsers each mount a different viewer chrome. `.fv-pdf` is the block
+   the viewer body gives it; everything below is that component's own layout. */
 .fv-pdf {
+  display: block;
   width: 100%;
   height: 100%;
-  border: none;
+  min-height: 0;
+}
+
+.pdfv {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.pdfv-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.6rem;
+  border-bottom: 1px solid var(--bs-border-color);
+  background: var(--bs-tertiary-bg);
+  flex-shrink: 0;
+}
+
+.pdfv-btn {
+  border: 1px solid var(--bs-border-color);
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  border-radius: var(--radius-sm);
+  padding: 0.15rem 0.5rem;
+  line-height: 1.4;
+  cursor: pointer;
+}
+
+.pdfv-btn:hover:not(:disabled) { background: var(--bs-secondary-bg); }
+.pdfv-btn:disabled             { opacity: 0.4; cursor: default; }
+
+.pdfv-zoom {
+  min-width: 3.5rem;
+  text-align: center;
+  font-size: 0.85rem;
+  color: var(--bs-secondary-color);
+  font-variant-numeric: tabular-nums;
+}
+
+.pdfv-pageno {
+  margin-left: auto;
+  font-size: 0.85rem;
+  color: var(--bs-secondary-color);
+  font-variant-numeric: tabular-nums;
+}
+
+/* The scroll root. `position: relative` makes it the offsetParent of every page
+   box, which is what lets the component compare `offsetTop` against `scrollTop`
+   when it decides which pages hold pixels. */
+.pdfv-scroll {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  background: var(--bs-secondary-bg);
+}
+
+/* `width: max-content` + `min-width: 100%` is what makes zoom usable: with a
+   plain `align-items: center`, a page wider than the scroll box overflows on
+   *both* sides and the left half becomes unreachable — centring happens before
+   scrolling exists. Growing this box to the widest page instead gives an honest
+   horizontal scroll range, while min-width keeps pages centred when they fit. */
+.pdfv-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: max-content;
+  min-width: 100%;
+  gap: 0.6rem;
+  padding: 0.6rem;
+}
+
+/* A page box is sized before it is drawn, so the scrollbar is honest from the
+   start and a page that is currently released leaves no gap. The pdf.js text
+   layer positions itself against these CSS variables. */
+.pdfv-page {
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 6px rgb(0 0 0 / 0.35);
+  overflow: hidden;
+  --user-unit: 1;
+  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
+  --scale-round-x: 1px;
+  --scale-round-y: 1px;
+}
+
+.pdfv-canvas {
   display: block;
 }
 
+.pdfv-page-failed::after {
+  content: "!";
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bs-danger, #b91c1c);
+  font-size: 2rem;
+}
+
+.pdfv-error-detail {
+  margin-top: 0.4rem;
+  font-size: 0.8rem;
+  opacity: 0.75;
+  word-break: break-word;
+}
+
 /* ── HTML live preview ───────────────────────────────────────────────────────── */
 
 /* Rendered in an origin-isolated iframe (srcdoc + sandbox="allow-scripts").

web/css/mobile.css

@@ -797,6 +797,19 @@ mobile-app[data-native] .chat-page-input-area { padding-bottom: 10px; }
   gap: 8px;
 }
 
+/* PDF viewer (<pdf-view>): the desktop toolbar is mouse-sized. Give the zoom
+   buttons a real tap target — on mobile they are the *only* zoom, since
+   mobile.html ships `user-scalable=no` and pinch is disabled page-wide. */
+.mobile-file-viewer .pdfv-toolbar {
+  padding: 0.4rem 0.75rem;
+  gap: 0.5rem;
+}
+.mobile-file-viewer .pdfv-btn {
+  min-width: 44px;
+  min-height: 36px;
+  font-size: 1rem;
+}
+
 /* ── Settings ─────────────────────────────────────────────────────────────── */
 
 .mobile-settings {

web/i18n/en.js

@@ -1037,6 +1037,9 @@ export default {
   'fv.conflict_reload':     'Reload remote',
   'fv.conflict_copy':       'Copy mine, then reload',
   'fv.conflict_overwrite':  'Overwrite',
+  'fv.zoom_in':             'Zoom in',
+  'fv.zoom_out':            'Zoom out',
+  'fv.pdf_failed':          'This PDF could not be displayed.',
 
   // ── Marketplace ─────────────────────────────────────────────────────────────
   'marketplace.title':               'Marketplace',

web/i18n/fr.js

@@ -1027,6 +1027,9 @@ export default {
   'fv.conflict_reload':     'Recharger la version distante',
   'fv.conflict_copy':       'Copier les miennes, puis recharger',
   'fv.conflict_overwrite':  'Écraser',
+  'fv.zoom_in':             'Agrandir',
+  'fv.zoom_out':            'Réduire',
+  'fv.pdf_failed':          'Impossible d’afficher ce PDF.',
 
   // ── Marketplace ─────────────────────────────────────────────────────────────
   'marketplace.title':               'Marketplace',

web/i18n/it.js

@@ -1027,6 +1027,9 @@ export default {
   'fv.conflict_reload':     'Ricarica remoto',
   'fv.conflict_copy':       'Copia le mie, poi ricarica',
   'fv.conflict_overwrite':  'Sovrascrivi',
+  'fv.zoom_in':             'Ingrandisci',
+  'fv.zoom_out':            'Riduci',
+  'fv.pdf_failed':          'Impossibile visualizzare questo PDF.',
 
   // ── Marketplace ──────────────────────────────────────────────────────────────
   'marketplace.title':               'Marketplace',

web/index.html

@@ -70,6 +70,8 @@
   <link rel="stylesheet" href="css/projects/base.css" />
   <link rel="stylesheet" href="css/projects/board.css" />
   <link rel="stylesheet" href="css/file-viewer.css" />
+  <!-- pdf.js TextLayer's DOM contract (selectable text over the rendered pages). -->
+  <link rel="stylesheet" href="/vendor/pdf-text-layer.css" />
 
   <script src="/vendor/cronstrue.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>

web/mobile.html

@@ -46,6 +46,8 @@
   <link rel="stylesheet" href="css/agent-tasks.css" />
   <link rel="stylesheet" href="css/inbox-cards.css" />
   <link rel="stylesheet" href="css/file-viewer.css" />
+  <!-- pdf.js TextLayer's DOM contract (selectable text over the rendered pages). -->
+  <link rel="stylesheet" href="/vendor/pdf-text-layer.css" />
   <link rel="stylesheet" href="css/mobile.css" />
 
   <script type="importmap">

web/vendor/pdf-standard-fonts/LICENSE_FOXIT

@@ -0,0 +1,27 @@
+// Copyright 2014 PDFium Authors. All rights reserved.
+//
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are
+// met:
+//
+//    * Redistributions of source code must retain the above copyright
+// notice, this list of conditions and the following disclaimer.
+//    * Redistributions in binary form must reproduce the above
+// copyright notice, this list of conditions and the following disclaimer
+// in the documentation and/or other materials provided with the
+// distribution.
+//    * Neither the name of Google Inc. nor the names of its
+// contributors may be used to endorse or promote products derived from
+// this software without specific prior written permission.
+//
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

web/vendor/pdf-standard-fonts/LICENSE_LIBERATION

@@ -0,0 +1,102 @@
+Digitized data copyright (c) 2010 Google Corporation
+	with Reserved Font Arimo, Tinos and Cousine.
+Copyright (c) 2012 Red Hat, Inc.
+	with Reserved Font Name Liberation.
+
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+
+PREAMBLE The goals of the Open Font License (OFL) are to stimulate
+worldwide development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to provide
+a free and open framework in which fonts may be shared and improved in
+partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves.
+The fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works.  The fonts and derivatives,
+however, cannot be released under any other type of license.  The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+ 
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such.
+This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components
+as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting ? in part or in whole ?
+any of the components of the Original Version, by changing formats or
+by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer
+or other person who contributed to the Font Software.
+
+
+PERMISSION & CONDITIONS
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,in
+   Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+   redistributed and/or sold with any software, provided that each copy
+   contains the above copyright notice and this license. These can be
+   included either as stand-alone text files, human-readable headers or
+   in the appropriate machine-readable metadata fields within text or
+   binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+   Name(s) unless explicit written permission is granted by the
+   corresponding Copyright Holder. This restriction only applies to the
+   primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+   Software shall not be used to promote, endorse or advertise any
+   Modified Version, except to acknowledge the contribution(s) of the
+   Copyright Holder(s) and the Author(s) or with their explicit written
+   permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must
+   be distributed entirely under this license, and must not be distributed
+   under any other license. The requirement for fonts to remain under
+   this license does not apply to any document created using the Font
+   Software.
+
+
+ 
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+ 
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT.  IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.
+

web/vendor/pdf-text-layer.css

@@ -0,0 +1,153 @@
+/* pdf.js text-layer styles — extracted verbatim from pdfjs-dist@6.2.108
+   web/pdf_viewer.css (.textLayer block only; the rest of that file styles
+   the full pdf.js viewer app, which we don't use). Keep in sync when the
+   vendored pdf.min.mjs is upgraded — TextLayer's DOM contract lives here.
+   Apache-2.0, Mozilla Foundation. */
+.textLayer{
+  color-scheme:only light;
+
+  position:absolute;
+  text-align:initial;
+  inset:0;
+  overflow:clip;
+  opacity:1;
+  line-height:1;
+  letter-spacing:normal;
+  word-spacing:normal;
+  -webkit-text-size-adjust:none;
+     -moz-text-size-adjust:none;
+          text-size-adjust:none;
+  forced-color-adjust:none;
+  transform-origin:0 0;
+  caret-color:CanvasText;
+  z-index:0;
+
+  &.highlighting{
+    touch-action:none;
+  }
+
+  :is(span, br){
+    color:transparent;
+    position:absolute;
+    white-space:pre;
+    cursor:text;
+    transform-origin:0% 0%;
+    -webkit-user-select:text;
+       -moz-user-select:text;
+            user-select:text;
+  }
+  --min-font-size:1;
+  --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));
+  --min-font-size-inv:calc(1 / var(--min-font-size));
+
+  > :not(.markedContent),
+  .markedContent span:not(.markedContent){
+    z-index:1;
+
+    --font-height:0;
+    font-size:calc(var(--text-scale-factor) * var(--font-height));
+
+    --scale-x:1;
+    --rotate:0deg;
+    transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
+  }
+
+  .markedContent{
+    display:contents;
+  }
+
+  span[role="img"]{
+    -webkit-user-select:none;
+       -moz-user-select:none;
+            user-select:none;
+    cursor:default;
+  }
+
+  .highlight{
+    --highlight-bg-color:rgb(180 0 170 / 0.25);
+    --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
+    --highlight-backdrop-filter:none;
+    --highlight-selected-backdrop-filter:none;
+
+    @media screen and (forced-colors: active){
+      --highlight-bg-color:transparent;
+      --highlight-selected-bg-color:transparent;
+      --highlight-backdrop-filter:var(--hcm-highlight-filter);
+      --highlight-selected-backdrop-filter:var(
+        --hcm-highlight-selected-filter
+      );
+    }
+
+    margin:-1px;
+    padding:1px;
+    background-color:var(--highlight-bg-color);
+    backdrop-filter:var(--highlight-backdrop-filter);
+    border-radius:4px;
+
+    &.appended{
+      position:initial;
+    }
+
+    &.begin{
+      border-radius:4px 0 0 4px;
+    }
+
+    &.end{
+      border-radius:0 4px 4px 0;
+    }
+
+    &.middle{
+      border-radius:0;
+    }
+
+    &.selected{
+      background-color:var(--highlight-selected-bg-color);
+      backdrop-filter:var(--highlight-selected-backdrop-filter);
+      scroll-margin-top:50px;
+    }
+  }
+
+  ::-moz-selection{
+    background:rgba(0 0 255 / 0.25);
+    background:color-mix(in srgb, AccentColor, transparent 50%);
+    color:transparent;
+  }
+
+  ::selection{
+    background:rgba(0 0 255 / 0.25);
+    background:color-mix(in srgb, AccentColor, transparent 50%);
+    color:transparent;
+  }
+
+  &.selectionRendering{
+    ::-moz-selection{
+      background:transparent;
+      color:transparent;
+    }
+    ::selection{
+      background:transparent;
+      color:transparent;
+    }
+  }
+  br::-moz-selection{
+    background:transparent;
+  }
+  br::selection{
+    background:transparent;
+  }
+
+  .endOfContent{
+    display:block;
+    position:absolute;
+    inset:100% 0 0;
+    z-index:0;
+    cursor:default;
+    -webkit-user-select:none;
+       -moz-user-select:none;
+            user-select:none;
+  }
+
+  &.selecting .endOfContent{
+    top:0;
+  }
+}