@bitmagic/cli 0.1.24 → 0.1.26

package/dist/editor/shell-page.js

@@ -100,6 +100,7 @@ export function renderEditorShell(options) {
   button { background: #26262e; color: #e6e6ea; border: 1px solid #34343f; border-radius: 5px;
            padding: 4px 10px; font: inherit; cursor: pointer; }
   button:hover { background: #30303a; }
+  button:disabled { opacity: .5; cursor: default; background: #26262e; }
   #tabs .tab:hover { background: #22222a; }
   #tabs .tab.active:hover { background: #3352c4; }
   .banner { display: none; align-items: center; gap: 12px; flex: none; padding: 8px 12px;
@@ -107,7 +108,41 @@ export function renderEditorShell(options) {
   .banner.show { display: flex; }
   #terrain-banner, #build-banner { background: #3d1f1c; border-bottom-color: #6b2f28; color: #f3c3bd; }
   #build-banner code { font-family: ui-monospace, monospace; }
-  #frame { display: block; flex: 1; width: 100%; border: 0; min-height: 0; }
+  /* The game and the panel share one row, so the panel takes width from the game rather than
+     overlaying it — an overlay would cover the thing you opened the panel to watch. */
+  #stage { flex: 1; display: flex; min-height: 0; }
+  #frame { display: block; flex: 1; border: 0; min-width: 0; height: 100%; }
+  #assets { width: 264px; flex: none; overflow-y: auto; background: #131318;
+            border-left: 1px solid #26262e; }
+  body.assets-closed #assets { display: none; }
+  #assets-head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px;
+                 padding: 8px 10px; background: #17171d; border-bottom: 1px solid #26262e;
+                 font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8a8a99; }
+  #assets-head .count { margin-left: auto; color: #6a6a7a; letter-spacing: 0; }
+  #assets-empty { padding: 14px 10px; color: #6a6a7a; }
+  .row { display: flex; gap: 9px; padding: 8px 10px; border-bottom: 1px solid #1e1e26; }
+  .row .thumb { width: 46px; height: 46px; flex: none; border-radius: 4px; background: #1e1e26;
+                display: flex; align-items: center; justify-content: center; font-size: 18px;
+                color: #55556a; overflow: hidden; }
+  .row .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .row .body { min-width: 0; flex: 1; }
+  .row .name { color: #e6e6ea; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .row .meta { color: #6a6a7a; font-size: 11px; overflow: hidden; text-overflow: ellipsis;
+               white-space: nowrap; }
+  .row .chip { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 3px;
+               font-size: 10px; background: #2a2a34; color: #9a9aab; vertical-align: 1px; }
+  .row .chip.hq { background: #1f3a2a; color: #8fd0a4; }
+  .row .chip.placeholder { background: #3a3320; color: #d9c08a; }
+  /* A new asset during a forge is the whole show, so it announces itself and then settles. */
+  .row.fresh { animation: landed 2.4s ease-out; }
+  @keyframes landed { from { background: #22314f; } to { background: transparent; } }
+  .row.job .thumb { color: #d9a441; }
+  .row.job .message { color: #9a9aab; font-size: 11px; overflow: hidden; text-overflow: ellipsis;
+                      white-space: nowrap; }
+  .row.job.failed .thumb { color: #e0564f; }
+  .row.job.failed .message { color: #e0938e; white-space: normal; }
+  .spin { display: inline-block; animation: spin 1.4s linear infinite; }
+  @keyframes spin { to { transform: rotate(360deg); } }
   #hq-overlay { display: none; position: fixed; inset: 0; background: rgba(8,8,12,.72);
                 align-items: center; justify-content: center; z-index: 10; }
   #hq-overlay.show { display: flex; }
@@ -138,6 +173,8 @@ export function renderEditorShell(options) {
       <input id="auto-toggle" type="checkbox" checked> Auto-reload
     </label>
     <span id="status"><span id="dot"></span><span id="status-text">Loading…</span></span>
+    <button id="assets-toggle" type="button" title="Show the assets in this project and what is being generated">Assets</button>
+    <button id="shot" type="button" title="Copy the current frame to the clipboard">Screenshot</button>
     <button id="reload" type="button">Reload</button>
   </div>
   <div id="build-banner" class="banner">
@@ -154,7 +191,15 @@ export function renderEditorShell(options) {
       voxel changes will be lost. Discard them, or press Cancel in the terrain toolbar.</span>
     <button id="terrain-discard" type="button">Discard terrain edits</button>
   </div>
-  <iframe id="frame" allow="autoplay; fullscreen; xr-spatial-tracking; clipboard-write"></iframe>
+  <div id="stage">
+    <iframe id="frame" allow="autoplay; fullscreen; xr-spatial-tracking; clipboard-write"></iframe>
+    <aside id="assets">
+      <div id="assets-head">Assets<span class="count" id="assets-count"></span></div>
+      <div id="assets-jobs"></div>
+      <div id="assets-list"></div>
+      <div id="assets-empty">Nothing yet. Assets appear here as they are generated.</div>
+    </aside>
+  </div>
   <div id="hq-overlay">
     <div id="hq-dialog">
       <h2>Generate a high-quality <span id="hq-name"></span></h2>
@@ -179,6 +224,7 @@ export function renderEditorShell(options) {
   var ACTIVE_EDIT_MS = ${ACTIVE_EDIT_WINDOW_MS};
   var TAB_KEY = 'bitmagic.dev.tab';
   var AUTO_KEY = 'bitmagic.dev.autoReload';
+  var ASSETS_KEY = 'bitmagic.dev.assets';
 
   var frame = document.getElementById('frame');
   var dot = document.getElementById('dot');
@@ -280,9 +326,8 @@ export function renderEditorShell(options) {
         // Re-read rather than serving the copy captured at boot: an agent may have generated an
         // asset since this page loaded, and a stale list is an empty asset palette with no
         // explanation.
-        fetch('/api/game-data').then(function (r) { return r.json(); }).then(function (payload) {
-          var data = payload && payload.gameData;
-          postFlat({ type: 'ASSETS_RESPONSE', assets: (data && data.assets) || [] });
+        fetch('/api/assets').then(function (r) { return r.json(); }).then(function (payload) {
+          postFlat({ type: 'ASSETS_RESPONSE', assets: withThumbnails(payload.assets || [], payload.previews || []) });
         }).catch(function () {
           postFlat({ type: 'ASSETS_RESPONSE', assets: [] });
         });
@@ -515,6 +560,9 @@ export function renderEditorShell(options) {
     loaded = false;
     markersDirty = false;
     gameState = '';
+    // A fresh iframe is a fresh engine with no memory of what was glowing, so the next push must
+    // not be suppressed as a repeat of what the PREVIOUS one was told.
+    lastGlowing = '';
     banner.classList.remove('show');
     terrainBanner.classList.remove('show');
     setStatus('', 'Loading…');
@@ -557,6 +605,10 @@ export function renderEditorShell(options) {
 
     loaded = true;
     applyTab(activeTab);
+    // A boot almost always follows a world.json change, so the list has moved with it. Deliberately
+    // not resetting the seen-ids set: the asset that caused the reload is exactly the one worth
+    // flashing.
+    void refreshAssets();
   }
 
   async function flush() {
@@ -658,6 +710,438 @@ export function renderEditorShell(options) {
     start();
   }
 
+  /**
+   * The assets panel: what this project HAS, and what is being made for it right now.
+   *
+   * The second half is the reason it exists. Generating a game is mostly waiting — a forge bakes a
+   * level over twenty minutes, a prop takes a few — and during all of it the world on screen has
+   * not changed yet, so the dev view used to look identical to an idle one. The jobs come from
+   * '.bitmagic/jobs/', which every generate command writes, so a 'bitmagic generate' running in the
+   * creator's OTHER window shows up here with its live progress line.
+   *
+   * Fed by the sidecar's 'assets' SSE event (a bare "the list moved" ping — the panel re-fetches
+   * rather than the server diffing for it) with a slow poll behind it, because elapsed times have
+   * to tick even when nothing changed.
+   */
+  var assetsOpen = true;
+  var assetsList = document.getElementById('assets-list');
+  var assetsJobs = document.getElementById('assets-jobs');
+  /** This page's own origin, for the absolute URL the game's asset palette needs. */
+  var SHELL_ORIGIN = window.location.origin;
+  var assetsEmpty = document.getElementById('assets-empty');
+  var assetsCount = document.getElementById('assets-count');
+  var assetsToggle = document.getElementById('assets-toggle');
+  // Ids rendered on the previous pass, so an asset that has just landed can announce itself. Null
+  // until the first render: on a cold open EVERY asset is new, and flashing all of them says
+  // nothing.
+  var seenAssetIds = null;
+  var lastJobs = [];
+  var assetsTimer = null;
+
+  var TYPE_GLYPHS = {
+    image: '🖼', skybox: '🖼',
+    glb: '🧊', gltf: '🧊', 'polygon-mesh': '🧊', vxl: '🧊', voxels: '🧊',
+    animation: '🏃', audio: '🔊', sound: '🔊', 'sound-effect': '🔊',
+    vwld: '🗺', spz: '✨'
+  };
+
+  function glyphFor(type) {
+    return TYPE_GLYPHS[String(type || '').toLowerCase()] || '📦';
+  }
+
+  function formatSize(bytes) {
+    if (typeof bytes !== 'number' || !isFinite(bytes) || bytes <= 0) return '';
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return Math.round(bytes / 1024) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  }
+
+  function formatElapsed(since) {
+    var ms = Date.now() - Date.parse(since);
+    if (!isFinite(ms) || ms < 0) return '';
+    var seconds = Math.floor(ms / 1000);
+    if (seconds < 60) return seconds + 's';
+    return Math.floor(seconds / 60) + 'm ' + (seconds % 60) + 's';
+  }
+
+  /** When an asset was made, or 0 for the ones that came with the template. */
+  function madeAt(asset) {
+    var stamp = asset.hqGeneratedAt || (asset.production && asset.production.at);
+    var parsed = typeof stamp === 'string' ? Date.parse(stamp) : NaN;
+    return isFinite(parsed) ? parsed : 0;
+  }
+
+  /**
+   * Newest first, but only among assets that know when they were made.
+   *
+   * A forged world arrives with hundreds of undated assets and no meaningful order beyond the one
+   * world.json already gives them, so they keep it. The handful generated during this session are
+   * the ones the creator is looking for, and they go on top.
+   */
+  function sortAssets(assets) {
+    var dated = [];
+    var undated = [];
+    for (var i = 0; i < assets.length; i++) {
+      (madeAt(assets[i]) > 0 ? dated : undated).push(assets[i]);
+    }
+    dated.sort(function (a, b) { return madeAt(b) - madeAt(a); });
+    return dated.concat(undated);
+  }
+
+  function el(tag, className, text) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    // textContent throughout: names, prompts and error strings are creator and model input, and
+    // this panel is not a place to start interpreting markup found in them.
+    if (text !== undefined) node.textContent = text;
+    return node;
+  }
+
+  function jobRow(job) {
+    var row = el('div', 'row job' + (job.status === 'failed' ? ' failed' : ''));
+    var thumb = el('div', 'thumb');
+    thumb.appendChild(el('span', job.status === 'failed' ? '' : 'spin', job.status === 'failed' ? '!' : '⟳'));
+    row.appendChild(thumb);
+    var body = el('div', 'body');
+    body.appendChild(el('div', 'name', job.label || job.kind));
+    var meta = el('div', 'meta', job.kind + (job.status === 'failed' ? '' : ' · ' + formatElapsed(job.startedAt)));
+    body.appendChild(meta);
+    body.appendChild(el('div', 'message', job.status === 'failed' ? (job.error || 'Failed') : (job.message || '')));
+    row.appendChild(body);
+    return row;
+  }
+
+  /**
+   * The URL the engine should draw a thumbnail from, or null when there is nothing to draw.
+   *
+   * 'sourceGlbUrl' before 'url' because most CLI-lane meshes are voxelized: 'url' is then a .vxl,
+   * which the GLB preview renderer cannot read, while 'sourceGlbUrl' is the original the forger or
+   * the generator started from. An asset with neither — a sound, an animation, a level — keeps its
+   * glyph, which is the honest answer for something with no appearance.
+   */
+  function previewSourceFor(asset) {
+    var url = asset.sourceGlbUrl || asset.url;
+    if (typeof url !== 'string' || url === '') return null;
+    // Double-escaped because this whole page is a template literal: a single backslash is consumed
+    // by the literal, and the browser would receive the invalid regex /.(glb|gltf)(?|$)/.
+    return /\\.(glb|gltf)(\\?|$)/i.test(url) ? url : null;
+  }
+
+  function assetRow(asset, isFresh, hasPreview) {
+    var row = el('div', 'row' + (isFresh ? ' fresh' : ''));
+    var thumb = el('div', 'thumb');
+    var type = String(asset.type || '').toLowerCase();
+    if (type === 'image' && typeof asset.url === 'string' && asset.url !== '') {
+      // An image asset IS its own thumbnail — skyboxes and cover art included. Nothing to render.
+      var direct = document.createElement('img');
+      direct.src = asset.url;
+      direct.alt = '';
+      thumb.appendChild(direct);
+    } else if (hasPreview) {
+      var cached = document.createElement('img');
+      cached.src = '/api/assets/preview/' + encodeURIComponent(asset.id) + '.png';
+      cached.alt = '';
+      // A cached file that has since been deleted falls back rather than showing a broken image.
+      cached.onerror = function () { thumb.textContent = glyphFor(asset.type); };
+      thumb.appendChild(cached);
+    } else {
+      thumb.appendChild(el('span', '', glyphFor(asset.type)));
+      if (previewSourceFor(asset) !== null) queuePreview(asset);
+    }
+    row.appendChild(thumb);
+
+    var body = el('div', 'body');
+    var name = el('div', 'name', asset.name || asset.id || 'unnamed');
+    if (asset.hqGeneratedAt) name.appendChild(el('span', 'chip hq', 'HQ'));
+    else if (asset.placeholder === true) name.appendChild(el('span', 'chip placeholder', 'placeholder'));
+    body.appendChild(name);
+    var bits = [asset.type || 'unknown'];
+    var size = formatSize(asset.size);
+    if (size) bits.push(size);
+    body.appendChild(el('div', 'meta', bits.join(' · ')));
+    row.appendChild(body);
+    return row;
+  }
+
+  /**
+   * Jobs and assets render separately, and that split is not cosmetic.
+   *
+   * The job rows carry an elapsed time, so they have to be redrawn every second whether or not
+   * anything changed. The asset rows must NOT be: they hold <img> elements, a forged world has
+   * hundreds of them, and rebuilding that list once a second would refetch and visibly flicker
+   * every thumbnail for as long as a generation runs — which is precisely when the creator is
+   * looking at it. So the asset list is rebuilt only when the set it is showing actually moved.
+   */
+  var lastAssetSignature = null;
+
+  function renderAssets(assets, jobs, previews) {
+    var sorted = sortAssets(assets);
+    var cached = {};
+    for (var p = 0; p < previews.length; p++) cached[previews[p]] = true;
+
+    assetsJobs.textContent = '';
+    for (var j = 0; j < jobs.length; j++) assetsJobs.appendChild(jobRow(jobs[j]));
+
+    var ids = {};
+    var signature = [];
+    for (var i = 0; i < sorted.length; i++) {
+      ids[sorted[i].id] = true;
+      // The preview state is part of the signature: a thumbnail landing is a change worth redrawing
+      // for, and it is the only one that alters a row without altering the asset set.
+      signature.push(sorted[i].id + (cached[sorted[i].id] ? '*' : ''));
+    }
+    var joined = signature.join(',');
+
+    if (joined !== lastAssetSignature) {
+      assetsList.textContent = '';
+      for (var k = 0; k < sorted.length; k++) {
+        var fresh = seenAssetIds !== null && !seenAssetIds[sorted[k].id];
+        assetsList.appendChild(assetRow(sorted[k], fresh, cached[sorted[k].id] === true));
+      }
+      seenAssetIds = ids;
+      lastAssetSignature = joined;
+    }
+
+    lastJobs = jobs;
+    if (loaded) pushGeneratingAssets(jobs);
+    assetsCount.textContent = String(sorted.length);
+    assetsEmpty.style.display = (sorted.length === 0 && jobs.length === 0) ? 'block' : 'none';
+  }
+
+  /**
+   * Ask the game to draw the thumbnails the cache is missing — one at a time, and never twice for
+   * the same asset in one session.
+   *
+   * Serial on purpose. Each render is a GLB fetch and a draw in the SAME renderer the creator is
+   * playing in, and a forged city has hundreds of assets: firing them all at once would stutter the
+   * game to decorate a side panel. 'attempted' covers the failures too, so an asset whose GLB 404s
+   * is asked for once rather than on every render pass forever.
+   */
+  var previewQueue = [];
+  var previewAttempted = {};
+  var previewRunning = false;
+  var previewRequestId = 0;
+
+  function queuePreview(asset) {
+    if (previewAttempted[asset.id]) return;
+    previewAttempted[asset.id] = true;
+    previewQueue.push(asset);
+    void drainPreviewQueue();
+  }
+
+  async function drainPreviewQueue() {
+    if (previewRunning) return;
+    previewRunning = true;
+    var stored = 0;
+    try {
+      while (previewQueue.length > 0) {
+        // The engine can only draw once it exists. Anything queued before then waits for the next
+        // pass rather than being dropped — refreshAssets re-queues on every render.
+        if (!loaded) return;
+        var asset = previewQueue.shift();
+        var source = previewSourceFor(asset);
+        if (source === null) continue;
+
+        previewRequestId += 1;
+        var requestId = 'preview-' + previewRequestId;
+        postFlat({ type: 'GENERATE_GLB_PREVIEW', requestId: requestId, glbUrl: source });
+        var response = await await_('GLB_PREVIEW_RESPONSE', 15000);
+        // Verified rather than assumed: a late answer from a request that already timed out would
+        // otherwise be cached under the NEXT asset's id, which is a wrong picture rather than a
+        // missing one — much the worse failure.
+        if (!response || response.requestId !== requestId) continue;
+        if (!response.success || !response.previewBase64) continue;
+
+        var saved = await (await fetch('/api/assets/preview', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ assetId: asset.id, image: response.previewBase64 })
+        })).json();
+        if (saved.stored === true) stored += 1;
+      }
+    } catch (error) {
+      // A thumbnail is a decoration; losing the queue must not take the panel with it.
+    } finally {
+      previewRunning = false;
+    }
+    // Only when something actually landed. refreshAssets kicks this queue in turn, so an
+    // unconditional re-render here would be an endless render/drain ping-pong over an empty queue.
+    if (stored > 0) void refreshAssets();
+  }
+
+  async function refreshAssets() {
+    if (!assetsOpen) return;
+    try {
+      var payload = await (await fetch('/api/assets')).json();
+      renderAssets(payload.assets || [], payload.jobs || [], payload.previews || []);
+      // Rendering is what discovers the missing thumbnails, and anything queued while the game was
+      // still booting has been sitting there since. Guarded on both sides, so this is a no-op
+      // whenever there is nothing to draw.
+      void drainPreviewQueue();
+    } catch (error) {
+      // The sidecar is this page's own server. If it is gone the reload button is the only useful
+      // action left, and the status bar already says so.
+    }
+  }
+
+  /**
+   * A slow tick behind the SSE push, for the two things an event cannot cover: elapsed times, which
+   * change with no write anywhere, and a missed event on a stream that dropped.
+   */
+  function startAssetsTicker() {
+    if (assetsTimer) clearInterval(assetsTimer);
+    assetsTimer = setInterval(function () {
+      if (!assetsOpen) return;
+      // Cheap while idle: with nothing generating there is nothing whose label changes on its own.
+      if (lastJobs.length === 0) return;
+      void refreshAssets();
+    }, 1000);
+  }
+
+  /**
+   * Lend the cached thumbnails to the engine's own asset palette.
+   *
+   * Right-click in the editor offers "Add object", and that grid renders 'asset.screenshotUrl'
+   * (SceneEditor.buildAssetGrid) — a field only the web Creator ever writes, so in a CLI project
+   * every tile there reads "No Preview". The panel has just rendered those images anyway, so
+   * handing them over on the way past costs nothing and needs no change under game/.
+   *
+   * Copies rather than mutating: this list is served straight out of world.json, and putting a
+   * local URL onto the records the save path also reads would be a field the CLI invented leaking
+   * into the creator's file.
+   */
+  function withThumbnails(assets, previews) {
+    var cached = {};
+    for (var i = 0; i < previews.length; i++) cached[previews[i]] = true;
+    return assets.map(function (asset) {
+      if (asset.screenshotUrl || !cached[asset.id]) return asset;
+      var copy = {};
+      for (var key in asset) if (Object.prototype.hasOwnProperty.call(asset, key)) copy[key] = asset[key];
+      copy.screenshotUrl = SHELL_ORIGIN + '/api/assets/preview/' + encodeURIComponent(asset.id) + '.png';
+      return copy;
+    });
+  }
+
+  /**
+   * Make the meshes being regenerated glow in the world itself.
+   *
+   * The engine has handled this message since before the CLI lane existed — HqGeneratingHandler
+   * maps asset ids to their placed instances and drives HqGenerationGlow over them — and the web
+   * Creator has always sent it. Nothing in the CLI ever did, so a 'generate prop' upgrading a
+   * building gave no sign in the scene. The job records now carry the asset id, so it is free.
+   */
+  var lastGlowing = '';
+  function pushGeneratingAssets(jobs) {
+    var ids = [];
+    for (var i = 0; i < jobs.length; i++) {
+      if (jobs[i].status === 'running' && jobs[i].assetId) ids.push(jobs[i].assetId);
+    }
+    // The engine walks every mesh on a change, so it is worth not repeating ourselves — its own
+    // setGeneratingHqAssetIds returns early on an unchanged set, and this saves even the message.
+    var key = ids.join(',');
+    if (key === lastGlowing) return;
+    lastGlowing = key;
+    postFlat({ type: 'HQ_ASSET_GENERATING', assetIds: ids });
+  }
+
+  function setAssetsOpen(open) {
+    assetsOpen = open;
+    document.body.classList.toggle('assets-closed', !open);
+    writePref(ASSETS_KEY, open ? '1' : '0');
+    if (open) void refreshAssets();
+  }
+
+  /**
+   * Screenshot → clipboard.
+   *
+   * The shell cannot read the game's pixels itself: the iframe is a different origin, so its
+   * canvas is off limits. The engine has to take the shot, and it already can — 'CAPTURE_SCREENSHOT'
+   * answers with 'SCREENSHOT_RESPONSE {screenshot}', handling preserveDrawingBuffer and the 2D
+   * genres' separate overlay canvas ('GameTemplate.captureScreenshot'). This is the Creator's own
+   * capture path, borrowed whole.
+   *
+   * Two things stand between that data URL and the clipboard:
+   *
+   *  1. **The engine hands back JPEG; the clipboard only takes PNG.** Chrome rejects
+   *     'image/jpeg' from 'clipboard.write' outright, so the frame is decoded and re-encoded here.
+   *  2. **The write has to start inside the click.** Clipboard writes need transient user
+   *     activation, and the round-trip to the engine outlives it. 'ClipboardItem' accepts a
+   *     *promise* for exactly this case, so the write is issued synchronously and the blob lands
+   *     later — which is why 'captureGamePng()' is called before 'clipboard.write', not awaited
+   *     into it.
+   */
+  var capturing = false;
+  var shotButton = document.getElementById('shot');
+
+  async function captureGamePng() {
+    post('CAPTURE_SCREENSHOT', { mode: 'immediate' });
+    var response = await await_('SCREENSHOT_RESPONSE', 15000);
+    if (!response) throw new Error('the game did not answer');
+    // The engine reports its own failures as a null screenshot rather than staying silent.
+    if (!response.screenshot) throw new Error('the engine could not capture a frame');
+
+    var image = new Image();
+    await new Promise(function (resolve, reject) {
+      image.onload = resolve;
+      image.onerror = function () { reject(new Error('the captured frame could not be decoded')); };
+      image.src = response.screenshot;
+    });
+
+    var canvas = document.createElement('canvas');
+    canvas.width = image.naturalWidth;
+    canvas.height = image.naturalHeight;
+    canvas.getContext('2d').drawImage(image, 0, 0);
+    return await new Promise(function (resolve, reject) {
+      canvas.toBlob(function (blob) {
+        if (blob) resolve(blob);
+        else reject(new Error('the frame could not be re-encoded as PNG'));
+      }, 'image/png');
+    });
+  }
+
+  /** The fallback when the clipboard refuses. A file beats a button that did nothing. */
+  function downloadPng(blob) {
+    var url = URL.createObjectURL(blob);
+    var link = document.createElement('a');
+    link.href = url;
+    link.download = 'bitmagic-' + new Date().toISOString().replace(/[:.]/g, '-') + '.png';
+    link.click();
+    setTimeout(function () { URL.revokeObjectURL(url); }, 10000);
+  }
+
+  function finishShot(kind, text) {
+    capturing = false;
+    shotButton.disabled = false;
+    setStatus(kind, text);
+  }
+
+  function takeScreenshot() {
+    if (!loaded) { setStatus('error', 'Nothing to capture yet'); return; }
+    if (capturing) return;
+    capturing = true;
+    shotButton.disabled = true;
+    setStatus('saving', 'Capturing…');
+
+    var png = captureGamePng();
+    // Not awaited before the write — see note 2 above.
+    var canWrite = typeof ClipboardItem !== 'undefined' && navigator.clipboard && navigator.clipboard.write;
+    var written = canWrite
+      ? navigator.clipboard.write([new ClipboardItem({ 'image/png': png })])
+      : Promise.reject(new Error('this browser cannot put images on the clipboard'));
+
+    written.then(function () {
+      finishShot('saved', 'Screenshot copied');
+    }).catch(function (error) {
+      // Firefox has no promise-valued ClipboardItem, and any browser may refuse the write.
+      png.then(downloadPng).then(function () {
+        finishShot('saved', 'Clipboard refused it — saved to your downloads');
+      }).catch(function (captureError) {
+        // The capture itself failed, so there was never an image; report that, not the clipboard.
+        finishShot('error', 'Screenshot failed: ' + (captureError.message || error.message));
+      });
+    });
+  }
+
   /**
    * Retire the running poll.
    *
@@ -709,6 +1193,12 @@ export function renderEditorShell(options) {
       try { payload = JSON.parse(event.data); } catch (error) { /* reason is a label */ }
       onChangeSignal(payload.reason || 'change');
     });
+    // A bare "the list moved" ping: a generation started, made progress, failed, or world.json was
+    // rewritten. The panel re-reads rather than the server sending a diff, which keeps the whole
+    // question of what changed on the side that is about to render it.
+    events.addEventListener('assets', function () {
+      void refreshAssets();
+    });
     events.addEventListener('build', function (event) {
       var payload = {};
       try { payload = JSON.parse(event.data); } catch (error) { /* see above */ }
@@ -723,6 +1213,7 @@ export function renderEditorShell(options) {
     });
   }
 
+  shotButton.addEventListener('click', takeScreenshot);
   document.getElementById('reload').addEventListener('click', function () { start(); });
   document.getElementById('banner-reload').addEventListener('click', function () { start(); });
   document.getElementById('terrain-discard').addEventListener('click', function () {
@@ -741,8 +1232,12 @@ export function renderEditorShell(options) {
     if (autoReload) banner.classList.remove('show');
   });
 
+  assetsToggle.addEventListener('click', function () { setAssetsOpen(!assetsOpen); });
+
   autoReload = readPref(AUTO_KEY, '1') !== '0';
   autoToggle.checked = autoReload;
+  setAssetsOpen(readPref(ASSETS_KEY, '1') !== '0');
+  startAssetsTicker();
   // Applied through selectTab so the button states and the stored preference cannot disagree with
   // the variable. 'loaded' is false here, so it only sets up the UI — boot() applies the mode.
   activeTab = readPref(TAB_KEY, 'game') === 'editor' ? 'editor' : 'game';

package/dist/editor/shell-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"shell-page.js","sourceRoot":"","sources":["../../src/editor/shell-page.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,oGAAoG;AACpG,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B;;;;;;GAMG;AACH,MAAM,qBAAqB,GAAG,IAAI,CAAC;AAEnC,kGAAkG;AAClG,SAAS,UAAU,CAAC,KAAa;IAC/B,OAAO,KAAK;SACT,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC3B,CAAC;AASD,MAAM,UAAU,iBAAiB,CAAC,OAA2B;IAC3D,MAAM,OAAO,GAAG,oBAAoB,OAAO,CAAC,QAAQ,2BAA2B,kBAAkB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;IACpH,OAAO;;;;wBAIe,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAwD3B,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBA8C9B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;kBACxB,gBAAgB;yBACT,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAikB7C,CAAC;AACF,CAAC"}
+{"version":3,"file":"shell-page.js","sourceRoot":"","sources":["../../src/editor/shell-page.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,oGAAoG;AACpG,MAAM,gBAAgB,GAAG,GAAG,CAAC;AAE7B;;;;;;GAMG;AACH,MAAM,qBAAqB,GAAG,IAAI,CAAC;AAEnC,kGAAkG;AAClG,SAAS,UAAU,CAAC,KAAa;IAC/B,OAAO,KAAK;SACT,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;SACtB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;SACvB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;SACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC3B,CAAC;AASD,MAAM,UAAU,iBAAiB,CAAC,OAA2B;IAC3D,MAAM,OAAO,GAAG,oBAAoB,OAAO,CAAC,QAAQ,2BAA2B,kBAAkB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;IACpH,OAAO;;;;wBAIe,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA2F3B,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAwD9B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;kBACxB,gBAAgB;yBACT,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmgC7C,CAAC;AACF,CAAC"}

package/dist/project/jobs.d.ts

@@ -0,0 +1,67 @@
+/** Which command is running. Shown as-is in the dev view, so these are creator-facing words. */
+export type JobKind = 'skybox' | 'sound' | 'image' | 'character' | 'animation' | 'prop' | 'vehicle' | 'forge' | 'cover' | 'hq';
+export interface JobRecord {
+    jobId: string;
+    kind: JobKind;
+    /** What the creator asked for — a prompt or a description. Trimmed for display, not parsed. */
+    label: string;
+    /** Known up front only for the kinds that upgrade an asset in place (prop, vehicle, hq). */
+    assetId?: string;
+    status: 'running' | 'failed';
+    /** The generation's most recent progress line. See `withJobRecord`. */
+    message: string;
+    pid: number;
+    startedAt: string;
+    updatedAt: string;
+    error?: string;
+}
+export declare const JOBS_DIR: string;
+export declare function jobsDirPath(root: string): string;
+/**
+ * Every job this project knows about, newest first, with dead `running` records reported as
+ * failed rather than left spinning in the dev view forever.
+ *
+ * Unreadable and unparseable files are skipped, not thrown: a record being written right now is a
+ * normal thing for a directory that several processes append to, and losing one tick of one job is
+ * not worth failing a read that also carries five healthy ones.
+ */
+export declare function readJobs(root: string): JobRecord[];
+/**
+ * Drop failed records older than a day. Called by `dev` at startup rather than on a timer: this is
+ * housekeeping, and the moment someone opens the dev view is the moment a day-old failure stops
+ * being worth showing.
+ */
+export declare function pruneJobs(root: string, now?: number): number;
+export interface JobHandle {
+    readonly jobId: string;
+    /** Record the latest progress line. */
+    update(message: string): void;
+}
+export interface StartJobOptions {
+    root: string;
+    kind: JobKind;
+    label: string;
+    assetId?: string;
+}
+export declare function startJob(options: StartJobOptions): JobHandle;
+/**
+ * Run `body` with its progress recorded for anyone watching.
+ *
+ * The `log` handed to the body is the caller's own logger with a tap on it, so every line a command
+ * already prints also becomes the job's current message. That is deliberate reuse rather than a
+ * second progress vocabulary to keep in step — the dev sidecar's in-process HQ job has worked this
+ * way since it shipped, and it means a command gains live progress in the dev view without a single
+ * new call site inside it.
+ *
+ * **Never fails the generation it is watching.** Bookkeeping that breaks a paid, minutes-long
+ * generation would be a far worse bug than the missing progress line it is trying to provide, so
+ * every filesystem error here is swallowed. The body's own errors propagate untouched, after being
+ * recorded.
+ */
+export declare function withJobRecord<T>(options: StartJobOptions & {
+    log: (message: string) => void;
+}, body: (log: (message: string) => void) => Promise<T>): Promise<T>;
+/** Success: the asset is in world.json, and that is the record. */
+export declare function removeJob(root: string, jobId: string): void;
+/** Failure: nothing else records it, so the record stays and carries the reason. */
+export declare function failJob(root: string, jobId: string, error: string): void;