Merge master into fix/terminal-history-scroll

src/web/http-range.ts

@@ -0,0 +1,86 @@
+/**
+ * @fileoverview Pure HTTP byte-range parsing for the raw file-serving routes.
+ *
+ * Why this exists: a `<video>`/`<audio>` element is only seekable when the
+ * server advertises `Accept-Ranges: bytes` and answers `Range` requests with
+ * `206 Partial Content`. Serving the whole file with `200 OK` (what file-raw
+ * did) makes Chrome report `video.seekable === [0, 0]`, so the scrub bar is
+ * inert and `currentTime = x` is silently ignored; Safari refuses to start the
+ * media at all. Parsing lives here, away from the IO, so the edge cases
+ * (suffix ranges, open-ended ranges, oversized specs, empty files) are unit
+ * testable without touching the filesystem.
+ *
+ * Deliberately single-range only: multi-range responses require a
+ * `multipart/byteranges` body that no media element asks for, and RFC 9110
+ * §14.2 lets a server ignore a Range it does not want to honor and answer with
+ * the full representation. Same for syntactically invalid specs — those are
+ * ignored (200), while a syntactically valid but out-of-bounds spec is the one
+ * case that earns a 416.
+ */
+
+/** Result of parsing a `Range` header against a known representation size. */
+export type ByteRangeRequest =
+  /** No range, an unsupported unit, or a malformed spec — serve the whole file with 200. */
+  | { kind: 'full' }
+  /** A satisfiable single range, inclusive on both ends — serve 206. */
+  | { kind: 'partial'; start: number; end: number }
+  /** Syntactically valid but outside the representation — serve 416. */
+  | { kind: 'unsatisfiable' };
+
+const BYTES_RANGE_SPEC = /^(\d*)-(\d*)$/;
+
+/**
+ * Digits → number, bounded. A range spec is arbitrary client input, so a
+ * 100-digit first-byte-pos must not become `Infinity` (which would then flow
+ * into a `createReadStream` offset). Anything longer than a safe integer is
+ * clamped, which the callers then treat as "past the end of the file".
+ */
+function parseBoundedInt(digits: string): number {
+  return digits.length > 15 ? Number.MAX_SAFE_INTEGER : Number(digits);
+}
+
+/**
+ * Parse a `Range` request header against a file of `size` bytes.
+ *
+ * @param header - Raw header value (`req.headers.range`). Arrays (a duplicated
+ *   header) are ignored rather than guessed at.
+ * @param size - Size of the full representation in bytes.
+ */
+export function parseByteRange(header: string | string[] | undefined, size: number): ByteRangeRequest {
+  if (typeof header !== 'string') return { kind: 'full' };
+
+  const trimmed = header.trim();
+  const eq = trimmed.indexOf('=');
+  if (eq < 0 || trimmed.slice(0, eq).trim().toLowerCase() !== 'bytes') return { kind: 'full' };
+
+  const spec = trimmed.slice(eq + 1).trim();
+  // Multi-range requests would need a multipart/byteranges body; ignoring the
+  // header and serving the full representation is a valid answer.
+  if (!spec || spec.includes(',')) return { kind: 'full' };
+
+  const match = BYTES_RANGE_SPEC.exec(spec);
+  if (!match) return { kind: 'full' };
+  const [, rawStart, rawEnd] = match;
+  if (!rawStart && !rawEnd) return { kind: 'full' };
+
+  // Suffix range: `bytes=-N` means the LAST N bytes, not "from N to the end".
+  if (!rawStart) {
+    const suffix = parseBoundedInt(rawEnd);
+    if (suffix === 0 || size === 0) return { kind: 'unsatisfiable' };
+    return { kind: 'partial', start: Math.max(0, size - suffix), end: size - 1 };
+  }
+
+  const start = parseBoundedInt(rawStart);
+  if (size === 0 || start >= size) return { kind: 'unsatisfiable' };
+
+  // `bytes=N-` — from N to the end of the file. This is the form Chrome opens
+  // a media element with (`bytes=0-`), so it must answer 206, not 200.
+  if (!rawEnd) return { kind: 'partial', start, end: size - 1 };
+
+  const requestedEnd = parseBoundedInt(rawEnd);
+  // last-byte-pos < first-byte-pos is an invalid spec, not an unsatisfiable
+  // one: RFC 9110 §14.1.1 says the whole header field is then ignored.
+  if (requestedEnd < start) return { kind: 'full' };
+
+  return { kind: 'partial', start, end: Math.min(requestedEnd, size - 1) };
+}

src/web/public/constants.js

@@ -201,24 +201,43 @@ function computeTabScrollLeft(input) {
 // spawned (a worker started through the codeman agent skill, which passes its own
 // id as parentSessionId). Pure: the caller measures and appends, this decides.
 //
-// Two shapes, because both endpoints live in ONE horizontal strip and the subagent
-// shape (tab-bottom → window-top) has nothing to aim at:
-//   - same row: a shallow U-bridge HANGING BELOW the strip, so it reads as a
-//     bracket joining two tabs rather than as a line crossing them. The dip grows
-//     with horizontal distance and with `depth` (the child's index among its
-//     siblings), so several children of one parent nest instead of overprinting.
-//   - different rows (desktop `tabs-two-rows` / `tabs-auto-wrap`): the vertical
-//     bezier the subagent lines already use, parent edge → child edge.
+// ONE shape, because both endpoints live in the same horizontal strip and the subagent
+// shape (tab-bottom → window-top) has nothing to aim at: a U-bridge HANGING BELOW the
+// strip, from the parent's bottom edge to the child's bottom edge, so it reads as a
+// bracket joining two tabs rather than as a line crossing them. The dip grows with
+// horizontal distance and with `depth` (the child's index among its siblings), so
+// several children of one parent nest instead of overprinting.
+//
+// ⚠ A WRAPPED STRIP USED TO GET ITS OWN SHAPE, AND THAT SHAPE WAS THE BUG. When the
+// desktop strip wraps (`tabs-two-rows` / `tabs-auto-wrap`) a parent on row 1 and its
+// child on row 2 are ~4px apart vertically, so the old parent-bottom → child-TOP bezier
+// had a 4px span to work with and drew a flat horizontal line inside the row gap
+// (reported as "they connect already, but the lines are straight and not easy visible"),
+// and three siblings drew three of them on top of each other. Aiming BOTH ends at the
+// tab BOTTOMS and putting the control points below the LOWER row gives the wrapped case
+// the same bracket as the flat case: it leaves the parent downward, crosses the lower
+// row once, and comes back up under the child. Same formula, no branch.
 //
 // Returns null when the edge must not be drawn: a missing/degenerate rect, or an
 // endpoint scrolled outside the strip. `.session-tabs` is `overflow-x: auto`, so a
 // scrolled-out tab still HAS a rect — one lying over the logo or the header
 // buttons. Skipping is honest; clamping would point at a tab that isn't there.
+// ⚠ THE DIP IS WHAT MAKES THE ARC AN ARC, and the first shipped numbers were tuned
+// against two tabs sitting side by side. A worker the agent skill starts is appended
+// to the END of the strip, so the real span between a lead and its worker is 800-1500px,
+// not 200, and a 44px cap over 1300px of span is a 33px sag, i.e. a line that reads as
+// STRAIGHT and crosses the terminal instead of bracketing under the strip. The dip now
+// keeps growing with the span (0.085/px, ~3x steeper against the old cap) so the bracket
+// survives the distance the feature is actually used at. The ceiling is what keeps a
+// full-width pair out of the terminal's fourth line: 104 + the sibling step lands the
+// deepest sag around y=140 on a 1080 screen, the same proportion two adjacent tabs get.
 const LINEAGE_DIP_BASE_PX = 14;
-const LINEAGE_DIP_PER_PX = 0.06;
-const LINEAGE_DIP_MIN_PX = 16;
-const LINEAGE_DIP_MAX_PX = 44;
-const LINEAGE_SIBLING_STEP_PX = 6;
+const LINEAGE_DIP_PER_PX = 0.085;
+const LINEAGE_DIP_MIN_PX = 22;
+const LINEAGE_DIP_MAX_PX = 104;
+// Siblings nest by this much. Widened with the stroke: at 2.5px plus its glow, arcs 6px
+// apart bled into one thick band instead of reading as three separate lines.
+const LINEAGE_SIBLING_STEP_PX = 8;
 const LINEAGE_STRIP_TOLERANCE_PX = 4;
 
 function computeLineagePath(input) {
@@ -250,29 +269,20 @@ function computeLineagePath(input) {
   const cBottom = cTop + ch;
   const sameRow = Math.abs(pTop + ph / 2 - (cTop + ch / 2)) <= Math.min(ph, ch) / 2;
 
-  let d;
-  let endX;
-  let endY;
-  if (sameRow) {
-    const y0 = Math.max(pBottom, cBottom);
-    const span = Math.abs(cx - px);
-    const dip =
-      Math.min(LINEAGE_DIP_MAX_PX, Math.max(LINEAGE_DIP_MIN_PX, LINEAGE_DIP_BASE_PX + span * LINEAGE_DIP_PER_PX)) +
-      depth * LINEAGE_SIBLING_STEP_PX;
-    const yc = y0 + dip;
-    d = `M ${r1(px)} ${r1(y0)} C ${r1(px)} ${r1(yc)}, ${r1(cx)} ${r1(yc)}, ${r1(cx)} ${r1(y0)}`;
-    endX = cx;
-    endY = y0;
-  } else {
-    const childBelow = cTop + ch / 2 > pTop + ph / 2;
-    const y1 = childBelow ? pBottom : pTop;
-    const y2 = childBelow ? cTop : cBottom;
-    const mid = (y1 + y2) / 2;
-    d = `M ${r1(px)} ${r1(y1)} C ${r1(px)} ${r1(mid)}, ${r1(cx)} ${r1(mid)}, ${r1(cx)} ${r1(y2)}`;
-    endX = cx;
-    endY = y2;
-  }
-  return { d, endX, endY, sameRow };
+  // Both ends anchor on the tab BOTTOM, and the control points hang below whichever
+  // row is lower, so one formula covers a flat strip and a wrapped one.
+  const span = Math.abs(cx - px);
+  const rowDrop = Math.abs(cBottom - pBottom);
+  // ⚠ A wrapped pair needs the dip measured from the LOWER row, or the bracket would
+  // only reach the row gap again. Adding the row offset also keeps the curve clear of
+  // the row it crosses instead of grazing its bottom edge.
+  const dip =
+    Math.min(LINEAGE_DIP_MAX_PX, Math.max(LINEAGE_DIP_MIN_PX, LINEAGE_DIP_BASE_PX + span * LINEAGE_DIP_PER_PX)) +
+    depth * LINEAGE_SIBLING_STEP_PX +
+    rowDrop;
+  const yc = Math.max(pBottom, cBottom) + dip;
+  const d = `M ${r1(px)} ${r1(pBottom)} C ${r1(px)} ${r1(yc)}, ${r1(cx)} ${r1(yc)}, ${r1(cx)} ${r1(cBottom)}`;
+  return { d, endX: cx, endY: cBottom, sameRow };
 }
 
 // One decimal is plenty for a screen-space path and keeps the `d` string short.

src/web/public/panels-ui.js

@@ -3246,6 +3246,9 @@ Object.assign(CodemanApp.prototype, {
 
     // Edit mode: reset any prior editor state whenever a preview (re)loads.
     this._resetFilePreviewEdit();
+    // Stop whatever the previous preview was playing. Overwriting innerHTML
+    // only DETACHES a <video>/<audio>; a detached media element keeps playing.
+    this._stopFilePreviewMedia();
 
     // Show overlay with loading state
     overlay.classList.add('visible');
@@ -3330,10 +3333,13 @@ Object.assign(CodemanApp.prototype, {
         bodyEl.innerHTML = `<img src="${data.url}" alt="${escapeHtml(filePath)}">`;
         footerEl.textContent = `${this.formatFileSize(data.size)} \u2022 ${data.extension}`;
       } else if (data.type === 'video') {
-        bodyEl.innerHTML = `<video src="${data.url}" controls autoplay></video>`;
+        // playsinline: iOS otherwise hijacks playback into its fullscreen
+        // player, which leaves the overlay behind it and its own close button
+        // as the only way back.
+        bodyEl.innerHTML = `<video src="${escapeHtml(data.url)}" controls autoplay playsinline preload="metadata"></video>`;
         footerEl.textContent = `${this.formatFileSize(data.size)} \u2022 ${data.extension}`;
       } else if (data.type === 'audio') {
-        bodyEl.innerHTML = `<audio src="${data.url}" controls autoplay></audio>`;
+        bodyEl.innerHTML = `<audio src="${escapeHtml(data.url)}" controls autoplay preload="metadata"></audio>`;
         footerEl.textContent = `${this.formatFileSize(data.size)} \u2022 ${data.extension}`;
       } else if (data.type === 'binary') {
         const downloadHref = `/api/sessions/${sessionId}/file-raw?path=${encodeURIComponent(filePath)}&download=true`;
@@ -3366,9 +3372,36 @@ Object.assign(CodemanApp.prototype, {
     if (overlay) {
       overlay.classList.remove('visible');
     }
+    // The overlay is hidden with display:none, which stops it being PAINTED and
+    // nothing else: a <video>/<audio> inside it keeps playing, keeps its audio
+    // audible and keeps streaming from the server. Closing has to stop it.
+    this._stopFilePreviewMedia();
     this.filePreviewContent = '';
   },
 
+  /**
+   * Pause and unload every media element in the preview body, then empty it.
+   *
+   * Removing the element from the DOM is NOT enough — a detached HTMLMediaElement
+   * plays on until it is garbage collected, which is why the X button used to
+   * leave a video audible. pause() stops playback, dropping src + load() aborts
+   * the in-flight network fetch and puts the element back in NETWORK_EMPTY.
+   */
+  _stopFilePreviewMedia() {
+    const bodyEl = this.$('filePreviewBody');
+    if (!bodyEl) return;
+    for (const media of bodyEl.querySelectorAll('video, audio')) {
+      try {
+        media.pause();
+        media.removeAttribute('src');
+        media.load();
+      } catch (err) {
+        console.warn('Failed to stop preview media:', err);
+      }
+    }
+    bodyEl.innerHTML = '';
+  },
+
   // ═══════════════════════════════════════════════════════════════
   // File Viewer edit mode (issue #212 — docs/file-viewer-edit-plan.md)
   // ═══════════════════════════════════════════════════════════════

src/web/public/session-lineage.js

@@ -148,7 +148,9 @@ Object.assign(CodemanApp.prototype, {
       const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
       dot.setAttribute('cx', String(geom.endX));
       dot.setAttribute('cy', String(geom.endY));
-      dot.setAttribute('r', '3');
+      // Resting radius; `lineage-dot-pulse` breathes it 3.5 → 4.5 while the child
+      // works, so the two have to be changed together.
+      dot.setAttribute('r', '3.5');
       dot.setAttribute('class', 'lineage-line-dot' + working);
       dot.setAttribute('data-child-tab', edge.childId);
       svg.appendChild(dot);

src/web/public/styles.css

@@ -9334,31 +9334,46 @@ kbd {
    light skins included). Do not add a per-skin `.lineage-line` override inside the
    html:not([data-skin="og"]) block: a bare class rule in there resolves to (0,2,1)
    and would outrank this one from a surprising place. */
+/* ⚠ QUIETER THAN THE SUBAGENT LINES, NOT INVISIBLE. The first cut ran 2px at 0.55
+   with a single 5px glow, which reads on a design mock and disappears on a real
+   1080p desktop: a faint thread over terminal text, exactly what it is drawn on
+   top of. The weight stays UNDER the subagent lines' 3px so the two layers still
+   separate, and the second, wider glow is what buys the contrast instead: it lifts
+   the line off the terminal without thickening it. Dashes scale with the stroke
+   (4 4 on a 2.5px line reads as a dotted smudge), and `lineage-flow` marches by
+   exactly two dash cycles, so it has to move with them. */
 .connection-line.lineage-line {
   stroke: var(--session-purple, #a98fe0);
-  stroke-width: 2;
-  stroke-dasharray: 4 4;
+  stroke-width: 2.5;
+  stroke-dasharray: 5 5;
   stroke-linecap: round;
-  opacity: 0.55;
-  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 5px var(--session-purple, #a98fe0));
+  opacity: 0.72;
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 5px var(--session-purple, #a98fe0))
+    drop-shadow(0 0 11px var(--session-purple, #a98fe0));
+}
+
+/* ⚠ OUTSIDE the reduced-motion block below on purpose. A working child is the case
+   the line exists to signal, and pairing the brightness with the marching dashes
+   left every worker's arc at the resting 0.72 for anyone who turns motion off. */
+.connection-line.lineage-line--working {
+  opacity: 0.95;
 }
 
 .connection-line.lineage-line:hover {
-  opacity: 0.9;
-  stroke-width: 2.5;
+  opacity: 1;
+  stroke-width: 3;
 }
 
 .lineage-line-dot {
   fill: var(--session-purple, #a98fe0);
-  opacity: 0.7;
-  filter: drop-shadow(0 0 4px var(--session-purple, #a98fe0));
+  opacity: 0.85;
+  filter: drop-shadow(0 0 4px var(--session-purple, #a98fe0)) drop-shadow(0 0 9px var(--session-purple, #a98fe0));
 }
 
 /* The child end marches while that worker is actually working, so the line
    itself carries the signal. Motion is opt-out-able at the OS level. */
 @media (prefers-reduced-motion: no-preference) {
   .connection-line.lineage-line--working {
-    opacity: 0.85;
     animation: lineage-flow 1.1s linear infinite;
   }
 
@@ -9368,20 +9383,24 @@ kbd {
   }
 }
 
+/* Two full dash cycles, so the march loops seamlessly. Tied to `stroke-dasharray`
+   above: at `5 5` the cycle is 10px, so this is -20 rather than the -16 that
+   matched the old `4 4`. Leaving them out of step makes the dashes jump once per
+   iteration. */
 @keyframes lineage-flow {
   to {
-    stroke-dashoffset: -16;
+    stroke-dashoffset: -20;
   }
 }
 
 @keyframes lineage-dot-pulse {
   0%, 100% {
-    opacity: 0.6;
-    r: 3;
+    opacity: 0.75;
+    r: 3.5;
   }
   50% {
     opacity: 1;
-    r: 4;
+    r: 4.5;
   }
 }
 

src/web/routes/file-routes.ts

@@ -46,6 +46,7 @@ import {
 } from '../route-helpers.js';
 import type { FastifyRequest } from 'fastify';
 import type { SessionAttachmentHistoryItem, SessionState } from '../../types/session.js';
+import { parseByteRange } from '../http-range.js';
 import { isSensitivePath } from '../sensitive-path.js';
 import { SseEvent } from '../sse-events.js';
 import type { ConfigPort, EventPort, SessionPort } from '../ports/index.js';
@@ -86,7 +87,13 @@ function buildContentDisposition(disposition: 'inline' | 'attachment', fileName:
 
 function sendRawStream(reply: FastifyReply, content: ReadStream): void {
   const headers = reply.getHeaders();
+  // hijack() answers on reply.raw, which keeps Fastify's own status handling out
+  // of the picture — so a 206 set with reply.code() has to be carried across by
+  // hand or a partial body would go out labelled 200 and the browser would treat
+  // it as the whole file.
+  const statusCode = reply.statusCode;
   reply.hijack();
+  reply.raw.statusCode = statusCode;
 
   for (const [name, value] of Object.entries(headers)) {
     if (value !== undefined) {
@@ -106,12 +113,54 @@ function sendRawStream(reply: FastifyReply, content: ReadStream): void {
   content.pipe(reply.raw);
 }
 
+/**
+ * Stream a file body, honoring a `Range` request header.
+ *
+ * Callers set Content-Type/Content-Disposition first; this adds the
+ * range-related headers and the body. Range support is what makes the file
+ * viewer's `<video>`/`<audio>` seekable: with a plain 200 and no
+ * `Accept-Ranges`, Chrome reports `video.seekable` as `[0, 0]`, the scrub bar
+ * does nothing and `currentTime = x` is silently reverted (measured against an
+ * 18MB mp4 before this existed). It also stops each seek from re-reading the
+ * whole file into memory.
+ */
+function sendFileBody(
+  reply: FastifyReply,
+  resolvedPath: string,
+  size: number,
+  rangeHeader: string | string[] | undefined
+): void {
+  reply.header('Accept-Ranges', 'bytes');
+  const range = parseByteRange(rangeHeader, size);
+
+  if (range.kind === 'unsatisfiable') {
+    reply
+      .code(416)
+      .header('Content-Range', `bytes */${size}`)
+      .type('application/json; charset=utf-8')
+      .send(createErrorResponse(ApiErrorCode.INVALID_INPUT, 'Requested range not satisfiable'));
+    return;
+  }
+
+  if (range.kind === 'partial') {
+    reply.code(206);
+    reply.header('Content-Range', `bytes ${range.start}-${range.end}/${size}`);
+    reply.header('Content-Length', range.end - range.start + 1);
+    sendRawStream(reply, createReadStream(resolvedPath, { start: range.start, end: range.end }));
+    return;
+  }
+
+  reply.header('Content-Length', size);
+  sendRawStream(reply, createReadStream(resolvedPath));
+}
+
 async function serveRawFile(
   reply: FastifyReply,
   resolvedPath: string,
   fileName: string,
   extension: string,
-  download?: boolean
+  download?: boolean,
+  rangeHeader?: string | string[]
 ): Promise<void> {
   const stat = await fs.stat(resolvedPath);
   const MAX_RAW_ATTACHMENT_SIZE = 50 * 1024 * 1024; // 50MB, matching file-raw / download
@@ -126,24 +175,21 @@ async function serveRawFile(
       );
     return;
   }
-  const content = createReadStream(resolvedPath);
   if (download || extension === 'svg') {
     reply.header(
       'Content-Type',
       extension === 'svg' ? 'application/octet-stream' : MIME_TYPES[extension] || 'application/octet-stream'
     );
     reply.header('Content-Disposition', buildContentDisposition('attachment', fileName));
-    reply.header('Content-Length', stat.size);
     reply.header('X-Content-Type-Options', 'nosniff');
-    sendRawStream(reply, content);
+    sendFileBody(reply, resolvedPath, stat.size, rangeHeader);
     return;
   }
 
   reply.header('Content-Type', MIME_TYPES[extension] || 'application/octet-stream');
   reply.header('Content-Disposition', buildContentDisposition('inline', fileName));
-  reply.header('Content-Length', stat.size);
   reply.header('X-Content-Type-Options', 'nosniff');
-  sendRawStream(reply, content);
+  sendFileBody(reply, resolvedPath, stat.size, rangeHeader);
 }
 
 function getAttachmentOr404(
@@ -849,7 +895,7 @@ export function registerFileRoutes(app: FastifyInstance, ctx: SessionPort & Even
       await serveConvertedPreview(reply, resolvedPath, fileName, extension);
       return;
     }
-    await serveRawFile(reply, resolvedPath, fileName, extension);
+    await serveRawFile(reply, resolvedPath, fileName, extension, false, req.headers.range);
   });
 
   // File tree listing
@@ -1369,24 +1415,24 @@ export function registerFileRoutes(app: FastifyInstance, ctx: SessionPort & Even
         json: 'application/json',
       };
 
-      const content = await fs.readFile(resolvedPath);
       const rawBasename = filePath!.split('/').pop() || 'download';
       // Sanitize filename for Content-Disposition header (prevent header injection)
       const basename = rawBasename.replace(/["\\\r\n]/g, '_');
       if (download === 'true' || ext === 'svg') {
-        reply.raw.writeHead(200, {
-          ...inheritedHeaders(reply),
-          'Content-Type': ext === 'svg' ? 'application/octet-stream' : mimeTypes[ext] || 'application/octet-stream',
-          'Content-Disposition': `attachment; filename="${basename}"`,
-          'Content-Length': content.length,
-          'X-Content-Type-Options': 'nosniff',
-        });
-        reply.raw.end(content);
+        reply.header(
+          'Content-Type',
+          ext === 'svg' ? 'application/octet-stream' : mimeTypes[ext] || 'application/octet-stream'
+        );
+        reply.header('Content-Disposition', `attachment; filename="${basename}"`);
+        reply.header('X-Content-Type-Options', 'nosniff');
+        sendFileBody(reply, resolvedPath, stat.size, req.headers.range);
         return;
       }
       reply.header('Content-Type', mimeTypes[ext] || 'application/octet-stream');
       reply.header('X-Content-Type-Options', 'nosniff');
-      reply.send(content);
+      // Streamed, range-aware: this is the <video>/<audio> source the file
+      // viewer points at, and a 200-only response makes the media unseekable.
+      sendFileBody(reply, resolvedPath, stat.size, req.headers.range);
     } catch (err) {
       reply
         .code(500)
@@ -1503,7 +1549,7 @@ export function registerFileRoutes(app: FastifyInstance, ctx: SessionPort & Even
     if (!servePath) return;
 
     try {
-      await serveRawFile(reply, servePath, record.fileName, record.extension, download === 'true');
+      await serveRawFile(reply, servePath, record.fileName, record.extension, download === 'true', req.headers.range);
     } catch (err) {
       reply
         .code(500)