@bitmagic/cli 0.1.60 → 0.1.61-dev.1

package/dist/editor/hud-replay-page.js

@@ -0,0 +1,219 @@
+/**
+ * The trailer tool's HUD replay harness, served by the dev sidecar at `/hud-replay.html`.
+ *
+ * Recorded trailer frames have no UI — the HUD is DOM, not WebGL — so the recorder logs HUD STATE
+ * into timeline.json and `bitmagic trailer render --ui` replays it here: this page builds a REAL
+ * `GameHUD` from the project's own vendored engine (same classes, same theme CSS) and headless
+ * Chrome screenshots it with a transparent background to get alpha overlays. Using the engine's own
+ * HUD is the point: a reimplementation would drift from what the game actually renders.
+ *
+ * The page is served from the sidecar's origin but imports the engine from vite's (the game port):
+ * the import map below is the project's own `index.html` map with every local alias made absolute,
+ * so `engine/GameHUD.js` resolves to `http://localhost:<gamePort>/dist/engine/GameHUD.js`. Vite's
+ * default `server.cors` admits localhost origins, which is what makes the cross-origin module load
+ * work.
+ *
+ * Contract with `trailer/hud-raster.ts` (unchanged from the web lane's `game/hud-replay.html`):
+ *   window.__hudReplayReady === true      when the HUD is constructed
+ *   window.__hudReplay.setViewport(w, h)  size the surface to the recording
+ *   window.__hudReplay.render(state)      apply a state snapshot (synchronous)
+ *
+ * Same template-literal rule as the shell page: **no backticks** in the emitted output.
+ */
+import { CDN_IMPORTS } from '../scaffold/project-files.js';
+import { importMapEntries } from '../scaffold/aliases.js';
+/** The import map for the harness: CDN entries as-is, local aliases absolute on the game origin. */
+export function hudReplayImportMap(gamePort) {
+    const origin = `http://localhost:${gamePort}`;
+    const local = Object.fromEntries(Object.entries(importMapEntries()).map(([key, target]) => [key, `${origin}${target}`]));
+    return { ...CDN_IMPORTS, ...local };
+}
+export function renderHudReplayHtml(options) {
+    const imports = hudReplayImportMap(options.gamePort);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>HUD Replay (trailer overlay)</title>
+<style>
+  /* Transparent everywhere — the renderer captures with omitBackground so only HUD pixels carry alpha. */
+  html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: transparent; overflow: hidden; }
+  /* The HUD fades itself in only on GameState.PLAYING, which never happens here; force it visible and
+     kill transitions so a screenshot taken immediately after render() is the settled frame. */
+  .hud-root { opacity: 1 !important; transition: none !important; }
+  .hud-root, .hud-root * { animation: none !important; transition: none !important; }
+  /* Gameplay layer holds the reticle/ESC hint — not part of a trailer overlay. */
+  .hud-gameplay-layer { display: none !important; }
+</style>
+<script type="importmap">
+${JSON.stringify({ imports }, null, 2)}
+</script>
+</head>
+<body>
+<script type="module">
+import { GameHUD } from 'engine/GameHUD.js';
+import { applyThemeGlobals } from 'engine/hud/index.js';
+
+var hud = null;
+var builtKey = '';
+
+function disposeHud() {
+  if (hud) { hud.dispose(); hud = null; }
+  builtKey = '';
+}
+
+/** Identity of a state's STRUCTURE (not its values): unchanged means mutate, changed means rebuild. */
+function structureKey(state) {
+  return JSON.stringify([
+    (state.elements || []).map(function (e) {
+      return [e.id, e.type, e.anchor, e.label == null ? null : e.label, e.icon == null ? null : e.icon,
+        e.color == null ? null : e.color, e.width == null ? null : e.width, e.showText == null ? null : e.showText,
+        e.iconSize == null ? null : e.iconSize, e.type === 'custom' ? (e.css == null ? null : e.css) : null];
+    }),
+    state.health ? 'health' : null,
+  ]);
+}
+
+function buildFrom(state) {
+  disposeHud();
+  hud = new GameHUD();
+  if (state.theme) {
+    // applyThemeGlobals is what the HUD's private ThemeManager calls; re-applying is idempotent and
+    // synchronous, so a screenshot right after render() never catches the HUD mid-theme.
+    applyThemeGlobals(state.theme, { manageFontLink: true });
+  }
+  (state.elements || []).forEach(createElement);
+  if (state.health) hud.showHealth();
+  builtKey = structureKey(state);
+}
+
+function createElement(el) {
+  var anchor = el.anchor;
+  switch (el.type) {
+    case 'counter':
+      hud.createCounter(el.id, { anchor: anchor, label: el.label, icon: el.icon, initialValue: 0 });
+      break;
+    case 'progress':
+      hud.createProgressBar(el.id, {
+        anchor: anchor, label: el.label, color: el.color, width: el.width,
+        showText: el.showText !== false, initialValue: 0, maxValue: 100,
+      });
+      break;
+    case 'icon-text':
+      hud.createIconText(el.id, { anchor: anchor, icon: el.icon == null ? '' : el.icon, text: el.text == null ? '' : el.text, iconSize: el.iconSize });
+      break;
+    case 'timer':
+      hud.createTimer(el.id, {
+        anchor: anchor, label: el.label, countDown: !!el.countDown,
+        startSeconds: el.seconds == null ? 0 : el.seconds, format: el.format || 'mm:ss',
+      });
+      // The engine timer ticks on wall clock; the replay owns the value, so it must never start here.
+      break;
+    case 'custom':
+      hud.createCustomElement(el.id, { anchor: anchor, html: el.html == null ? '' : el.html, css: el.css == null ? '' : el.css });
+      break;
+    default:
+      break;
+  }
+}
+
+function setText(root, selector, value) {
+  if (value === undefined || value === null) return;
+  var node = root.querySelector(selector);
+  if (node && node.textContent !== value) node.textContent = value;
+}
+
+/** Write the exact rendered strings the recording captured. */
+function applyValues(state) {
+  (state.elements || []).forEach(function (el) {
+    var element = hud.getElement(el.id);
+    if (!element) return;
+    var root = element.container;
+    root.style.display = el.visible === false ? 'none' : '';
+    switch (el.type) {
+      case 'counter':
+        setText(root, '.hud-counter__value', el.text);
+        break;
+      case 'progress': {
+        var fill = root.querySelector('.hud-progress-bar__fill');
+        if (fill && typeof el.percent === 'number') fill.style.setProperty('--hud-progress-value', el.percent + '%');
+        setText(root, '.hud-progress-bar__text', el.text);
+        break;
+      }
+      case 'icon-text':
+        setText(root, '.hud-icon-text__icon', el.icon);
+        setText(root, '.hud-icon-text__label', el.text);
+        break;
+      case 'timer': {
+        // Format through the engine's own timer so mm:ss / hh:mm:ss stay identical to the game.
+        hud.resetTimer(el.id, el.seconds == null ? 0 : el.seconds);
+        var urgent = !!el.countDown && (el.seconds == null ? 0 : el.seconds) <= 10;
+        root.toggleAttribute('data-urgent', urgent);
+        break;
+      }
+      case 'custom':
+        if (typeof el.html === 'string' && root.innerHTML !== el.html) root.innerHTML = el.html;
+        break;
+      default:
+        break;
+    }
+  });
+
+  if (state.health) {
+    hud.showHealth();
+    hud.updateHealth(state.health.current, state.health.max);
+    var container = document.getElementById('hud-health-container');
+    if (container) {
+      container.style.display = state.health.visible === false ? 'none' : '';
+      // updateHealth arms a 200 ms damage flash on a wall-clock timeout; strip it so overlays don't flicker.
+      delete container.dataset.damaged;
+    }
+  }
+
+  var hudRoot = document.querySelector('.hud-root');
+  if (hudRoot) hudRoot.style.display = state.hudVisible === false ? 'none' : '';
+}
+
+/** Toasts are transient and timer-managed in the engine; the replay owns visibility, so draw them plainly. */
+function applyToasts(state) {
+  document.querySelectorAll('.hud-replay-toasts').forEach(function (stale) { stale.remove(); });
+  var toasts = state.toasts || [];
+  if (!toasts.length) return;
+  var anchorEl = document.querySelector('.hud-anchor-top-center') || document.querySelector('.hud-root');
+  if (!anchorEl) return;
+  var stack = document.createElement('div');
+  stack.className = 'hud-toast-stack hud-toast-stack--newest-top hud-replay-toasts';
+  toasts.forEach(function (toast) {
+    var node = document.createElement('div');
+    node.className = 'hud-element hud-toast';
+    node.dataset.kind = toast.variant || 'info';
+    node.textContent = toast.message;
+    stack.appendChild(node);
+  });
+  anchorEl.appendChild(stack);
+}
+
+window.__hudReplay = {
+  setViewport: function (width, height) {
+    document.body.style.width = width + 'px';
+    document.body.style.height = height + 'px';
+  },
+  render: function (state) {
+    var key = structureKey(state);
+    if (!hud || key !== builtKey) buildFrom(state);
+    applyValues(state);
+    applyToasts(state);
+    return true;
+  },
+};
+
+// Build an empty HUD up front so the first render() has styles injected and the anchor grid in place.
+hud = new GameHUD();
+builtKey = structureKey({ elements: [] });
+window.__hudReplayReady = true;
+</script>
+</body>
+</html>
+`;
+}
+//# sourceMappingURL=hud-replay-page.js.map

package/dist/editor/hud-replay-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hud-replay-page.js","sourceRoot":"","sources":["../../src/editor/hud-replay-page.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO1D,oGAAoG;AACpG,MAAM,UAAU,kBAAkB,CAAC,QAAgB;IACjD,MAAM,MAAM,GAAG,oBAAoB,QAAQ,EAAE,CAAC;IAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAC9B,MAAM,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC,CAAC,CACvF,CAAC;IACF,OAAO,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,EAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,OAA6B;IAC/D,MAAM,OAAO,GAAG,kBAAkB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrD,OAAO;;;;;;;;;;;;;;;;EAgBP,IAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwKrC,CAAC;AACF,CAAC"}

package/dist/editor/recording-panel.d.ts

@@ -30,4 +30,6 @@ export declare const RECORDING_PANEL_CSS = "\n  /* Level with #hq-overlay and #p
  * (`creator/src/vue/components/tools/DevToolsPanel.vue`), verbatim — one recording feature, two
  * hosts, no drift in what a creator is offered.
  */
-export declare const RECORDING_PANEL_HTML = "  <div id=\"record-overlay\" class=\"bm-overlay\">\n    <div id=\"record-dialog\" class=\"bm-dialog\">\n      <h2>Record gameplay</h2>\n      <span class=\"bm-label\">Recording mode</span>\n      <label class=\"record-choice\">\n        <input type=\"radio\" name=\"record-mode\" value=\"frames\"> 60 fps frame by frame\n      </label>\n      <label class=\"record-choice\">\n        <input type=\"radio\" name=\"record-mode\" value=\"video\"> Video capture (real-time)\n      </label>\n      <label class=\"bm-label\" for=\"record-resolution\">Resolution</label>\n      <select id=\"record-resolution\" class=\"bm-input\">\n        <option value=\"1920x1080\">1920x1080 (Full HD)</option>\n        <option value=\"1280x720\">1280x720 (HD)</option>\n        <option value=\"3840x2160\">3840x2160 (4K)</option>\n        <option value=\"1080x1920\">1080x1920 (Vertical Full HD)</option>\n        <option value=\"720x1280\">720x1280 (Vertical HD)</option>\n        <option value=\"2160x3840\">2160x3840 (Vertical 4K)</option>\n      </select>\n      <p id=\"record-hint\">Press F9 in the game to start and stop recording.</p>\n      <p id=\"record-frames-note\" class=\"record-note\">Frames and a timeline land in\n        <span id=\"record-note-path\">~/Downloads/gameplay_recording_&hellip;/</span>, ready to be\n        made into a trailer.</p>\n      <p id=\"record-video-note\" class=\"record-note\">The capture downloads in your browser as a\n        .webm file.</p>\n      <div id=\"record-upgrade\">This project's engine predates saving frames to disk from here.\n        Run <code>bitmagic upgrade</code>, then reload.</div>\n      <div id=\"record-actions\">\n        <button id=\"record-close\" class=\"bm-pill bm-pill--primary\" type=\"button\">Done</button>\n      </div>\n    </div>\n  </div>\n";
+/** The six resolutions the panel offers — the Creator's list, and what `?rec=` on the shell accepts. */
+export declare const RECORDING_RESOLUTIONS: readonly string[];
+export declare const RECORDING_PANEL_HTML = "  <div id=\"record-overlay\" class=\"bm-overlay\">\n    <div id=\"record-dialog\" class=\"bm-dialog\">\n      <h2>Record gameplay</h2>\n      <span class=\"bm-label\">Recording mode</span>\n      <label class=\"record-choice\">\n        <input type=\"radio\" name=\"record-mode\" value=\"frames\"> 60 fps frame by frame\n      </label>\n      <label class=\"record-choice\">\n        <input type=\"radio\" name=\"record-mode\" value=\"video\"> Video capture (real-time)\n      </label>\n      <label class=\"bm-label\" for=\"record-resolution\">Resolution</label>\n      <select id=\"record-resolution\" class=\"bm-input\">\n        <option value=\"1920x1080\">1920x1080 (Full HD)</option>\n        <option value=\"1280x720\">1280x720 (HD)</option>\n        <option value=\"3840x2160\">3840x2160 (4K)</option>\n        <option value=\"1080x1920\">1080x1920 (Vertical Full HD)</option>\n        <option value=\"720x1280\">720x1280 (Vertical HD)</option>\n        <option value=\"2160x3840\">2160x3840 (Vertical 4K)</option>\n      </select>\n      <p id=\"record-hint\">Press F9 in the game to start and stop recording.</p>\n      <p id=\"record-frames-note\" class=\"record-note\">Frames and a timeline land in\n        <span id=\"record-note-path\">.bitmagic/trailer/recordings/gameplay_recording_&hellip;/</span> in this\n        project, ready for <code>bitmagic trailer make</code>.</p>\n      <p id=\"record-video-note\" class=\"record-note\">The capture downloads in your browser as a\n        .webm file.</p>\n      <div id=\"record-upgrade\">This project's engine predates saving frames to disk from here.\n        Run <code>bitmagic upgrade</code>, then reload.</div>\n      <div id=\"record-actions\">\n        <button id=\"record-close\" class=\"bm-pill bm-pill--primary\" type=\"button\">Done</button>\n      </div>\n    </div>\n  </div>\n";

package/dist/editor/recording-panel.js

@@ -52,6 +52,10 @@ export const RECORDING_PANEL_CSS = `
  * (`creator/src/vue/components/tools/DevToolsPanel.vue`), verbatim — one recording feature, two
  * hosts, no drift in what a creator is offered.
  */
+/** The six resolutions the panel offers — the Creator's list, and what `?rec=` on the shell accepts. */
+export const RECORDING_RESOLUTIONS = [
+    '1920x1080', '1280x720', '3840x2160', '1080x1920', '720x1280', '2160x3840',
+];
 export const RECORDING_PANEL_HTML = `  <div id="record-overlay" class="bm-overlay">
     <div id="record-dialog" class="bm-dialog">
       <h2>Record gameplay</h2>
@@ -73,8 +77,8 @@ export const RECORDING_PANEL_HTML = `  <div id="record-overlay" class="bm-overla
       </select>
       <p id="record-hint">Press F9 in the game to start and stop recording.</p>
       <p id="record-frames-note" class="record-note">Frames and a timeline land in
-        <span id="record-note-path">~/Downloads/gameplay_recording_&hellip;/</span>, ready to be
-        made into a trailer.</p>
+        <span id="record-note-path">.bitmagic/trailer/recordings/gameplay_recording_&hellip;/</span> in this
+        project, ready for <code>bitmagic trailer make</code>.</p>
       <p id="record-video-note" class="record-note">The capture downloads in your browser as a
         .webm file.</p>
       <div id="record-upgrade">This project's engine predates saving frames to disk from here.

package/dist/editor/recording-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"recording-panel.js","sourceRoot":"","sources":["../../src/editor/recording-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;CAsBlC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCnC,CAAC"}
+{"version":3,"file":"recording-panel.js","sourceRoot":"","sources":["../../src/editor/recording-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;CAsBlC,CAAC;AAEF;;;;;;GAMG;AACH,wGAAwG;AACxG,MAAM,CAAC,MAAM,qBAAqB,GAAsB;IACtD,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW;CAC3E,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCnC,CAAC"}

package/dist/editor/recording-sink.d.ts

@@ -1,18 +1,3 @@
-/**
- * Recording is a DEV-LINE capability: the Record panel, the sink routes and the sink announcement
- * all exist only in a build installed from `@bitmagic/cli@dev`.
- *
- * The line is derived from the version field rather than asked for — a `-dev.N` suffix is what puts
- * a build on the `dev` dist-tag in the first place (`docs/npm-publishing.md`), and `updateTagFor` is
- * the same read the CLI already uses to decide which line to offer as an update. So there is no new
- * switch to keep in step with the publish workflow, and nothing to remember to flip at release: a
- * promotion drops the suffix and the capability goes with it.
- *
- * An unreadable version reads as a release and the feature is OFF. Failing closed is the direction
- * that matters here — a release build quietly gaining an unfinished capability is worse than a dev
- * build missing one, and the second is visible the moment someone looks for the button.
- */
-export declare function recordingAvailable(version?: string): boolean;
 /**
  * PNG frames of a 4K recording run to tens of megabytes, and a long session's timeline manifest is
  * event-per-frame JSON — both far past `server.ts`'s 8 MB scene-snapshot cap, which is why the sink
@@ -56,9 +41,7 @@ export declare function parseSaveFrameRequest(contentType: string | undefined, b
 export declare function parseTimelineRequest(body: Buffer): TimelineSave | SinkParseError;
 /** `<name>_%06d.png` — the frame naming the ffmpeg command and the trailer renderer both expect. */
 export declare function frameFileName(recordingName: string, frameIndex: number): string;
-/** `<home>/Downloads/<name>/` — the layout the trailer tooling reads. */
-export declare function recordingDir(home: string, recordingName: string): string;
-/** Write one frame, creating the recording directory on first use. Returns the file path. */
-export declare function writeRecordingFrame(home: string, save: FrameSave): Promise<string>;
+/** Write one frame under `<root>/.bitmagic/trailer/recordings/<name>/`, creating it on first use. */
+export declare function writeRecordingFrame(root: string, save: FrameSave): Promise<string>;
 /** Write the timeline manifest next to the frames. Returns the file path. */
-export declare function writeRecordingTimeline(home: string, save: TimelineSave): Promise<string>;
+export declare function writeRecordingTimeline(root: string, save: TimelineSave): Promise<string>;

package/dist/editor/recording-sink.js

@@ -8,37 +8,20 @@
  * POSTs went to `getAgentUrl()` — the upload proxy (which 404s them) or a dead `localhost:4111` —
  * and the recording was silently lost. Now they land here.
  *
- * Everything mirrors game-play-agent's own routes (`mastra/routes.ts`, `save-frame` /
- * `save-recording-timeline`) on purpose: same request shapes, same
- * `~/Downloads/<name>/<name>_%06d.png` + `timeline.json` layout, so the trailer tooling
- * (`pnpm run trailer`, the make-trailer skill) reads a pro-lane recording exactly like a web-lane
- * one, and the recorder needs no per-host branching — only a different base URL.
+ * Request shapes mirror game-play-agent's own routes (`mastra/routes.ts`, `save-frame` /
+ * `save-recording-timeline`) on purpose, and the directory LAYOUT is identical too —
+ * `<dir>/<name>_%06d.png` + `timeline.json` — so `bitmagic trailer` reads a pro-lane recording
+ * exactly like a web-lane one. Only the parent differs: the web lane writes `~/Downloads/<name>/`,
+ * this lane writes into the project (`.bitmagic/trailer/recordings/<name>/`, see `trailer/paths.ts`),
+ * so a recording belongs to the game it was taken from and never lands in a stranger's Downloads.
  *
  * Parsing and path-building live here rather than in `server.ts` so they are testable the way
- * `save.ts` and `voxel-save.ts` are; the writes take `home` as a parameter so tests never touch the
- * real `~/Downloads`.
+ * `save.ts` and `voxel-save.ts` are; the writes take the project root as a parameter so tests never
+ * touch a real project.
  */
 import * as fs from 'fs';
 import * as path from 'path';
-import { currentCliVersion } from '../update/cli-version.js';
-import { updateTagFor } from '../update/notice.js';
-/**
- * Recording is a DEV-LINE capability: the Record panel, the sink routes and the sink announcement
- * all exist only in a build installed from `@bitmagic/cli@dev`.
- *
- * The line is derived from the version field rather than asked for — a `-dev.N` suffix is what puts
- * a build on the `dev` dist-tag in the first place (`docs/npm-publishing.md`), and `updateTagFor` is
- * the same read the CLI already uses to decide which line to offer as an update. So there is no new
- * switch to keep in step with the publish workflow, and nothing to remember to flip at release: a
- * promotion drops the suffix and the capability goes with it.
- *
- * An unreadable version reads as a release and the feature is OFF. Failing closed is the direction
- * that matters here — a release build quietly gaining an unfinished capability is worse than a dev
- * build missing one, and the second is visible the moment someone looks for the button.
- */
-export function recordingAvailable(version = currentCliVersion()) {
-    return updateTagFor(version) === 'dev';
-}
+import { recordingDir } from '../trailer/paths.js';
 /**
  * PNG frames of a 4K recording run to tens of megabytes, and a long session's timeline manifest is
  * event-per-frame JSON — both far past `server.ts`'s 8 MB scene-snapshot cap, which is why the sink
@@ -127,21 +110,17 @@ export function parseTimelineRequest(body) {
 export function frameFileName(recordingName, frameIndex) {
     return recordingName + '_' + String(frameIndex).padStart(6, '0') + '.png';
 }
-/** `<home>/Downloads/<name>/` — the layout the trailer tooling reads. */
-export function recordingDir(home, recordingName) {
-    return path.join(home, 'Downloads', recordingName);
-}
-/** Write one frame, creating the recording directory on first use. Returns the file path. */
-export async function writeRecordingFrame(home, save) {
-    const dir = recordingDir(home, save.recordingName);
+/** Write one frame under `<root>/.bitmagic/trailer/recordings/<name>/`, creating it on first use. */
+export async function writeRecordingFrame(root, save) {
+    const dir = recordingDir(root, save.recordingName);
     await fs.promises.mkdir(dir, { recursive: true });
     const filePath = path.join(dir, frameFileName(save.recordingName, save.frameIndex));
     await fs.promises.writeFile(filePath, save.frame);
     return filePath;
 }
 /** Write the timeline manifest next to the frames. Returns the file path. */
-export async function writeRecordingTimeline(home, save) {
-    const dir = recordingDir(home, save.recordingName);
+export async function writeRecordingTimeline(root, save) {
+    const dir = recordingDir(root, save.recordingName);
     await fs.promises.mkdir(dir, { recursive: true });
     const filePath = path.join(dir, 'timeline.json');
     await fs.promises.writeFile(filePath, save.json);

package/dist/editor/recording-sink.js.map

@@ -1 +1 @@
-{"version":3,"file":"recording-sink.js","sourceRoot":"","sources":["../../src/editor/recording-sink.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"recording-sink.js","sourceRoot":"","sources":["../../src/editor/recording-sink.ts"],"names":[],"mappings":"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"}

package/dist/editor/server.js

@@ -17,7 +17,6 @@
  */
 import * as fs from 'fs';
 import * as http from 'http';
-import * as os from 'os';
 import * as path from 'path';
 import { createRequire } from 'module';
 import { fileURLToPath } from 'url';
@@ -48,7 +47,8 @@ import { startUploadProxy } from '../forge/upload-proxy.js';
 import { currentCliVersion } from '../update/cli-version.js';
 import { updateTagFor } from '../update/notice.js';
 import { writeDevViewRecord } from './tab-reuse.js';
-import { RECORDING_BODY_LIMIT_BYTES, recordingAvailable, parseSaveFrameRequest, parseTimelineRequest, writeRecordingFrame, writeRecordingTimeline, } from './recording-sink.js';
+import { RECORDING_BODY_LIMIT_BYTES, parseSaveFrameRequest, parseTimelineRequest, writeRecordingFrame, writeRecordingTimeline, } from './recording-sink.js';
+import { renderHudReplayHtml } from './hud-replay-page.js';
 /** A shell poll this recent counts as a tab being there, when its stream has not reconnected yet. */
 const SHELL_POLL_RECENT_MS = 2_000;
 /** Bodies are a scene snapshot, not an upload — a megabyte is already generous. */
@@ -255,12 +255,7 @@ function readWorld(worldPath) {
 export async function startEditorServer(options) {
     const log = options.log ?? (() => { });
     const worldPath = projectWorldJsonPath(options.root);
-    // Read once at startup: the version cannot change under a running process, and the page is
-    // rendered once here too, so the routes below and the markup can never disagree about it.
-    const recording = recordingAvailable();
-    // The install line straight from the version, not from `recordingAvailable()` — that is a feature
-    // flag that happens to follow the line today, and the badge must keep saying which build this is
-    // even after the recorder ships on both.
+    // The install line straight from the version: the badge says which build this is.
     const cliVersion = currentCliVersion();
     const shell = renderEditorShell({
         gamePort: options.gamePort,
@@ -269,8 +264,10 @@ export async function startEditorServer(options) {
         environment: options.environment,
         cliLine: updateTagFor(cliVersion),
         cliVersion,
-        recording,
     });
+    // The trailer tool's HUD replay harness: a real GameHUD built from this project's vendored engine
+    // (served by vite on the game port), screenshotted by `bitmagic trailer render --ui`.
+    const hudReplay = renderHudReplayHtml({ gamePort: options.gamePort });
     /** When the page last polled us — the poll carries `?from=shell`; the CLI's own probes do not. */
     let lastShellPollAt = 0;
     /** Flipped by `dev` once vite answers; the page defers a restart-reload until then. */
@@ -912,7 +909,7 @@ export async function startEditorServer(options) {
             return;
         }
         try {
-            const filePath = await writeRecordingFrame(os.homedir(), parsed);
+            const filePath = await writeRecordingFrame(options.root, parsed);
             sendJson(res, 200, { ok: true, path: filePath });
         }
         catch (error) {
@@ -937,7 +934,7 @@ export async function startEditorServer(options) {
             return;
         }
         try {
-            const filePath = await writeRecordingTimeline(os.homedir(), parsed);
+            const filePath = await writeRecordingTimeline(options.root, parsed);
             log(`[editor] recording timeline saved: ${filePath}`);
             sendJson(res, 200, { ok: true, path: filePath });
         }
@@ -1287,19 +1284,19 @@ export async function startEditorServer(options) {
             }
             // The F9 recorder in the game iframe streams these. Paths identical to game-play-agent's so
             // the vendored engine posts the same request whichever host is the sink.
-            //
-            // Gated on the dev line with the same predicate that draws the panel, so a release build has
-            // no sink even for a recorder told about one by a stale page — and answering 404 rather than
-            // 403 keeps a release sidecar indistinguishable from one that never had the route, which is
-            // what game-play-agent's own devOnly wrapper does outside development.
-            if (recording && req.method === 'POST' && url === '/api/dev/save-frame') {
+            if (req.method === 'POST' && url === '/api/dev/save-frame') {
                 await handleRecordingFrame(req, res);
                 return;
             }
-            if (recording && req.method === 'POST' && url === '/api/dev/save-recording-timeline') {
+            if (req.method === 'POST' && url === '/api/dev/save-recording-timeline') {
                 await handleRecordingTimeline(req, res);
                 return;
             }
+            if (req.method === 'GET' && url === '/hud-replay.html') {
+                res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': 'no-store' });
+                res.end(hudReplay);
+                return;
+            }
             sendJson(res, 404, { ok: false, error: `No route for ${req.method ?? '?'} ${url}` });
         })();
     });