@h-rig/cli 0.0.6-alpha.84 → 0.0.6-alpha.85

package/dist/src/app-opentui/react/Backdrop.js

@@ -158,19 +158,6 @@ function panelCellRect(layout, panel) {
   const dividerY = headerHeight ? Math.min(bottom - 1, top + headerHeight) : top;
   return { left, top, width, height, right, bottom, headerHeight, dividerY };
 }
-function panelPixelPlacement(layout, panel, size, minPixels = 8) {
-  const cellW = size.width / layout.width;
-  const cellH = size.height / layout.height;
-  const leftCells = layout.centerLeft + (panel.left ?? 0);
-  const topCells = layout.centerTop + panel.top;
-  const widthCells = panel.width ?? layout.centerWidth;
-  const heightCells = panel.height;
-  const left = Math.round(leftCells * cellW);
-  const top = Math.round(topCells * cellH);
-  const width = Math.round(widthCells * cellW);
-  const height = Math.round(heightCells * cellH);
-  return width > minPixels && height > minPixels ? { left, top, width, height, leftCells, topCells, widthCells, heightCells } : null;
-}
 
 // packages/cli/src/app-opentui/render/constants.ts
 var LCG_MULTIPLIER = 1664525;
@@ -203,7 +190,6 @@ var RAIL_YS_LOOP = [0.18, 0.5, 0.82];
 var RAIL_YS_CARRIER = [0.24, 0.54, 0.82];
 var RAIL_YS_DISPATCH = [0.18, 0.58, 0.82];
 var GLOW_FALLOFF_EXP_ASCII = 2.2;
-var GLOW_FALLOFF_EXP_IMAGE = 2.4;
 
 // packages/cli/src/app-opentui/render/graphics.ts
 var BRAILLE_SAMPLES_X = 2;
@@ -741,971 +727,6 @@ function drawAmbientField(layer, layout, _tick, scene = "fleet", load = 0, activ
   layer.__rigAmbientKey = key;
 }
 
-// packages/cli/src/app-opentui/render/image-visual-layer.ts
-import { Worker } from "worker_threads";
-import { deflateSync } from "zlib";
-import { allocateImageId, deleteKittyImage } from "@earendil-works/pi-tui";
-
-// packages/cli/src/app-opentui/terminal-capabilities.ts
-import { getCapabilities } from "@earendil-works/pi-tui";
-function getRigTerminalCapabilities() {
-  const imageProtocol = getCapabilities().images;
-  const supportsKittyImages = imageProtocol === "kitty";
-  return {
-    imageProtocol,
-    supportsKittyImages,
-    visualMode: supportsKittyImages ? "kitty-images" : "framebuffer-fallback"
-  };
-}
-
-// packages/cli/src/app-opentui/render/image-visual-layer.ts
-var PANEL_MASK_RADIUS_MIN = 14;
-var PANEL_MASK_RADIUS_MAX = 34;
-var PANEL_MASK_RADIUS_FACTOR = 0.035;
-var PANEL_BLUR_RADIUS_MIN = 8;
-var PANEL_BLUR_RADIUS_MAX = 28;
-var PANEL_BLUR_RADIUS_FACTOR = 0.018;
-var BG = [7, 8, 9, 255];
-var PANEL = [16, 17, 21, 184];
-var PANEL_HEADER = [16, 17, 21, 190];
-var PANEL_LINE2 = [255, 255, 255, 24];
-var LIME = [204, 255, 77, 255];
-var LIME_DIM = [169, 214, 63, 255];
-var CYAN = [86, 216, 255, 255];
-var MAGENTA = [255, 121, 176, 255];
-var INK_DIM = [108, 110, 121, 255];
-var PNG_SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
-var CRC_TABLE = makeCrcTable();
-var MAX_IMAGE_BYTES = 48 * 1024 * 1024;
-var KITTY_CHUNK_SIZE = 4096;
-var PANEL_BLUR_SCALE = 1;
-var PANEL_MASK_CACHE_LIMIT = 16;
-var ZLIB_LEVEL = 1;
-var DEFAULT_IMAGE_RESOLUTION_SCALE = 1;
-var LOAD_BUCKETS = 5;
-function loadBucket(load) {
-  if (!Number.isFinite(load ?? NaN))
-    return 0;
-  return Math.max(0, Math.min(LOAD_BUCKETS, Math.round((load ?? 0) * LOAD_BUCKETS)));
-}
-var panelMaskCache = new Map;
-var BG_WORD = rgbaWord(BG);
-function imageTransport() {
-  const forced = process.env.RIG_OPENTUI_IMAGE_TRANSPORT;
-  if (forced === "rgba-zlib")
-    return "rgba-zlib";
-  return "png";
-}
-function imageResolutionScale() {
-  const raw = Number.parseFloat(process.env.RIG_OPENTUI_IMAGE_SCALE ?? "");
-  if (Number.isFinite(raw) && raw > 0)
-    return Math.max(0.25, Math.min(1, raw));
-  return DEFAULT_IMAGE_RESOLUTION_SCALE;
-}
-function rgbaWord(color) {
-  return (color[3] << 24 | color[2] << 16 | color[1] << 8 | color[0]) >>> 0;
-}
-function fillRgba(data, color, word = rgbaWord(color)) {
-  if (data.byteOffset % 4 === 0 && data.byteLength % 4 === 0) {
-    new Uint32Array(data.buffer, data.byteOffset, data.byteLength / 4).fill(word);
-    return;
-  }
-  for (let i = 0;i < data.length; i += 4) {
-    data[i] = color[0];
-    data[i + 1] = color[1];
-    data[i + 2] = color[2];
-    data[i + 3] = color[3];
-  }
-}
-var ASCII_GLYPHS = {
-  ".": ["00000", "00000", "00000", "00000", "00000", "00100", "00100"],
-  "'": ["00100", "00100", "00000", "00000", "00000", "00000", "00000"],
-  "-": ["00000", "00000", "00000", "11111", "00000", "00000", "00000"],
-  _: ["00000", "00000", "00000", "00000", "00000", "00000", "11111"],
-  "=": ["00000", "11111", "00000", "00000", "11111", "00000", "00000"],
-  "|": ["00100", "00100", "00100", "00100", "00100", "00100", "00100"],
-  "/": ["00001", "00010", "00010", "00100", "01000", "01000", "10000"],
-  "\\": ["10000", "01000", "01000", "00100", "00010", "00010", "00001"],
-  "(": ["00010", "00100", "01000", "01000", "01000", "00100", "00010"],
-  ")": ["01000", "00100", "00010", "00010", "00010", "00100", "01000"],
-  "!": ["00100", "00100", "00100", "00100", "00100", "00000", "00100"],
-  "%": ["11001", "11010", "00100", "01000", "10110", "00110", "00000"],
-  $: ["00100", "11110", "10100", "11110", "00101", "11110", "00100"],
-  "@": ["01110", "10001", "10111", "10101", "10111", "10000", "01111"],
-  o: ["00000", "01110", "10001", "10001", "10001", "01110", "00000"],
-  "*": ["00100", "10101", "01110", "11111", "01110", "10101", "00100"]
-};
-function sceneStaticTick(scene) {
-  let hash = 0;
-  for (let index = 0;index < scene.length; index += 1)
-    hash = hash * 33 + scene.charCodeAt(index) >>> 0;
-  return 11 + hash % 97;
-}
-function charColor(char, row, totalRows) {
-  if (char === "@" || char === "$" || char === "o")
-    return LIME;
-  if (char === "%" || char === "!" || char === "/" || char === "\\" || char === "|")
-    return CYAN;
-  if (char === "." || char === "'" || char === "_" || row < 3 || row > totalRows - 4)
-    return INK_DIM;
-  if (char === "-" || char === "=" || char === "(" || char === ")")
-    return LIME_DIM;
-  return MAGENTA;
-}
-function fillRectAlpha(data, width, height, left, top, rectWidth, rectHeight, color, alpha) {
-  const x0 = Math.max(0, Math.floor(left));
-  const y0 = Math.max(0, Math.floor(top));
-  const x1 = Math.min(width, Math.ceil(left + rectWidth));
-  const y1 = Math.min(height, Math.ceil(top + rectHeight));
-  for (let y = y0;y < y1; y += 1) {
-    for (let x = x0;x < x1; x += 1)
-      blendOver(data, (y * width + x) * 4, color, alpha);
-  }
-}
-function drawAsciiGlyph(data, width, height, x, y, cellWidth, cellHeight, char, color, alpha) {
-  const pattern = ASCII_GLYPHS[char] ?? ASCII_GLYPHS["*"];
-  const glyphWidth = Math.max(1, cellWidth * 0.56);
-  const glyphHeight = Math.max(1, cellHeight * 0.7);
-  const originX = x + (cellWidth - glyphWidth) * 0.5;
-  const originY = y + (cellHeight - glyphHeight) * 0.5;
-  const pixelWidth = Math.max(1, glyphWidth / pattern[0].length);
-  const pixelHeight = Math.max(1, glyphHeight / pattern.length);
-  for (let row = 0;row < pattern.length; row += 1) {
-    const bits = pattern[row];
-    for (let col = 0;col < bits.length; col += 1) {
-      if (bits[col] !== "1")
-        continue;
-      fillRectAlpha(data, width, height, originX + col * pixelWidth, originY + row * pixelHeight, pixelWidth * 0.72, pixelHeight * 0.72, color, alpha);
-    }
-  }
-}
-function drawStaticAsciiFleetBackground(data, width, height, scene, layout, load, activeRuns) {
-  const rows = fleetRows(sceneStaticTick(scene), { animate: true });
-  const cellWidth = width / Math.max(1, layout.width);
-  const cellHeight = height / Math.max(1, layout.height);
-  const sideBySide = layout.width >= FLEET_GRID_WIDTH * 1.9;
-  const leftCells = sideBySide ? Math.max(1, Math.floor(layout.width * 0.3 - FLEET_GRID_WIDTH / 2)) : Math.floor((layout.width - FLEET_GRID_WIDTH) / 2);
-  const topCells = Math.floor((layout.height - FLEET_GRID_HEIGHT) / 2);
-  const fleetLeft = leftCells * cellWidth;
-  const fleetTop = topCells * cellHeight;
-  drawGlow2(data, width, height, width * 0.5, height * 0.5, Math.min(width, height) * 0.4, LIME, 0.022 + load * 0.03);
-  drawGlow2(data, width, height, width * 0.18, height * 0.22, Math.min(width, height) * 0.28, CYAN, 0.018 + load * 0.012);
-  drawGlow2(data, width, height, width * 0.82, height * 0.78, Math.min(width, height) * 0.22, MAGENTA, 0.012 + load * 0.008);
-  let droneTotal = 0;
-  for (const line of rows)
-    for (const char of line)
-      if (char === "@" || char === "$" || char === "%")
-        droneTotal += 1;
-  const litTarget = Math.max(0, Math.min(droneTotal, activeRuns));
-  let droneIndex = 0;
-  for (let row = 0;row < rows.length; row += 1) {
-    const line = rows[row];
-    for (let col = 0;col < line.length; col += 1) {
-      const char = line[col];
-      if (char === " ")
-        continue;
-      const x = fleetLeft + col * cellWidth;
-      const y = fleetTop + row * cellHeight;
-      const color = charColor(char, row, rows.length);
-      const isDrone = char === "@" || char === "$" || char === "%";
-      const lit = isDrone && droneIndex < litTarget;
-      drawAsciiGlyph(data, width, height, x + cellWidth * 0.07, y + cellHeight * 0.05, cellWidth, cellHeight, char, color, lit ? 0.72 : 0.46);
-      if (isDrone) {
-        droneIndex += 1;
-        drawGlow2(data, width, height, x + cellWidth * 0.5, y + cellHeight * 0.5, Math.max(cellWidth, cellHeight) * 0.95, color, lit ? 0.044 : 0.014);
-      }
-    }
-  }
-}
-function applyStaticAtmosphere(data, width, height, load) {
-  const cx = width * 0.5;
-  const cy = height * 0.42;
-  const radius = Math.max(width, height) * 0.78;
-  const minVignette = 0.1 - load * 0.02;
-  for (let y = 0;y < height; y += 1) {
-    for (let x = 0;x < width; x += 1) {
-      const distance = Math.hypot(x - cx, y - cy) / radius;
-      const alpha = Math.max(minVignette, Math.min(0.82, 0.12 + Math.pow(distance, 1.65) * 0.62));
-      blendOver(data, (y * width + x) * 4, BG, alpha);
-    }
-  }
-  drawGlow2(data, width, height, width * 0.82, height * 0.04, Math.min(width, height) * 0.2, LIME, 0.024 + load * 0.012);
-  drawGlow2(data, width, height, width * 0.12, height * 0.18, Math.min(width, height) * 0.16, CYAN, 0.018 + load * 0.008);
-}
-function makeCrcTable() {
-  const table = new Uint32Array(256);
-  for (let n = 0;n < 256; n += 1) {
-    let c = n;
-    for (let k = 0;k < 8; k += 1)
-      c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
-    table[n] = c >>> 0;
-  }
-  return table;
-}
-function crc32(bytes) {
-  let c = 4294967295;
-  for (let i = 0;i < bytes.length; i += 1)
-    c = CRC_TABLE[(c ^ bytes[i]) & 255] ^ c >>> 8;
-  return (c ^ 4294967295) >>> 0;
-}
-function chunk(type, data) {
-  const out = new Uint8Array(12 + data.length);
-  const view = new DataView(out.buffer);
-  view.setUint32(0, data.length);
-  out[4] = type.charCodeAt(0);
-  out[5] = type.charCodeAt(1);
-  out[6] = type.charCodeAt(2);
-  out[7] = type.charCodeAt(3);
-  out.set(data, 8);
-  view.setUint32(8 + data.length, crc32(out.subarray(4, 8 + data.length)));
-  return out;
-}
-function encodePng(width, height, rgba) {
-  const ihdr = new Uint8Array(13);
-  const ihdrView = new DataView(ihdr.buffer);
-  ihdrView.setUint32(0, width);
-  ihdrView.setUint32(4, height);
-  ihdr[8] = 8;
-  ihdr[9] = 6;
-  ihdr[10] = 0;
-  ihdr[11] = 0;
-  ihdr[12] = 0;
-  const stride = width * 4;
-  const raw = new Uint8Array((stride + 1) * height);
-  for (let y = 0;y < height; y += 1) {
-    const rawOffset = y * (stride + 1);
-    raw[rawOffset] = 0;
-    raw.set(rgba.subarray(y * stride, y * stride + stride), rawOffset + 1);
-  }
-  const compressed = deflateSync(raw, { level: ZLIB_LEVEL });
-  return Buffer.concat([
-    Buffer.from(PNG_SIGNATURE),
-    Buffer.from(chunk("IHDR", ihdr)),
-    Buffer.from(chunk("IDAT", compressed)),
-    Buffer.from(chunk("IEND", new Uint8Array(0)))
-  ]);
-}
-function kittyImageSequence(base64, options) {
-  const params = [`a=T`, `f=${options.format}`, `q=2`, `C=1`, `c=${options.columns}`, `r=${options.rows}`, `i=${options.imageId}`, `z=${options.zIndex}`];
-  if (options.format === 32) {
-    params.push(`s=${options.pixelWidth ?? 1}`, `v=${options.pixelHeight ?? 1}`);
-    if (options.compressed)
-      params.push("o=z");
-  }
-  if (base64.length <= KITTY_CHUNK_SIZE)
-    return `\x1B_G${params.join(",")};${base64}\x1B\\`;
-  const chunks = [];
-  for (let offset = 0;offset < base64.length; offset += KITTY_CHUNK_SIZE) {
-    const part = base64.slice(offset, offset + KITTY_CHUNK_SIZE);
-    const last = offset + KITTY_CHUNK_SIZE >= base64.length;
-    chunks.push(`\x1B_G${offset === 0 ? `${params.join(",")},` : ""}m=${last ? 0 : 1};${part}\x1B\\`);
-  }
-  return chunks.join("");
-}
-function clampByte(value) {
-  return Math.max(0, Math.min(255, Math.round(value)));
-}
-function blendOver(data, index, color, alphaScale = 1) {
-  const alpha = color[3] / 255 * alphaScale;
-  const inv = 1 - alpha;
-  data[index] = clampByte(color[0] * alpha + data[index] * inv);
-  data[index + 1] = clampByte(color[1] * alpha + data[index + 1] * inv);
-  data[index + 2] = clampByte(color[2] * alpha + data[index + 2] * inv);
-  data[index + 3] = 255;
-}
-function drawDisc(data, width, height, cx, cy, radius, color, alpha = 1) {
-  const minX = Math.max(0, Math.floor(cx - radius));
-  const maxX = Math.min(width - 1, Math.ceil(cx + radius));
-  const minY = Math.max(0, Math.floor(cy - radius));
-  const maxY = Math.min(height - 1, Math.ceil(cy + radius));
-  for (let y = minY;y <= maxY; y += 1) {
-    for (let x = minX;x <= maxX; x += 1) {
-      const dx = x + 0.5 - cx;
-      const dy = y + 0.5 - cy;
-      const d = Math.sqrt(dx * dx + dy * dy);
-      if (d > radius)
-        continue;
-      const edge = Math.max(0, Math.min(1, radius - d));
-      blendOver(data, (y * width + x) * 4, color, alpha * Math.min(1, 0.35 + edge));
-    }
-  }
-}
-function drawGlow2(data, width, height, cx, cy, radius, color, alpha = 0.18) {
-  const minX = Math.max(0, Math.floor(cx - radius));
-  const maxX = Math.min(width - 1, Math.ceil(cx + radius));
-  const minY = Math.max(0, Math.floor(cy - radius));
-  const maxY = Math.min(height - 1, Math.ceil(cy + radius));
-  for (let y = minY;y <= maxY; y += 1) {
-    for (let x = minX;x <= maxX; x += 1) {
-      const dx = x + 0.5 - cx;
-      const dy = y + 0.5 - cy;
-      const d = Math.sqrt(dx * dx + dy * dy);
-      if (d > radius)
-        continue;
-      const falloff = Math.pow(1 - d / Math.max(1, radius), GLOW_FALLOFF_EXP_IMAGE);
-      blendOver(data, (y * width + x) * 4, color, alpha * falloff);
-    }
-  }
-}
-function drawLine2(data, width, height, x0, y0, x1, y1, color, alpha = 0.5, thickness = 1.4) {
-  const dx = x1 - x0;
-  const dy = y1 - y0;
-  const steps = Math.max(1, Math.ceil(Math.hypot(dx, dy) * 1.2));
-  for (let i = 0;i <= steps; i += 1) {
-    const t2 = i / steps;
-    drawDisc(data, width, height, x0 + dx * t2, y0 + dy * t2, thickness, color, alpha);
-  }
-}
-function roundRectAlpha(px, py, x, y, w, h, r) {
-  const rx = Math.max(x + r, Math.min(px, x + w - r));
-  const ry = Math.max(y + r, Math.min(py, y + h - r));
-  const dx = px - rx;
-  const dy = py - ry;
-  const dist = Math.sqrt(dx * dx + dy * dy);
-  return Math.max(0, Math.min(1, r + 0.75 - dist));
-}
-function panelRect(layout, panel, size) {
-  return panelPixelPlacement(layout, panel, size);
-}
-function downsampleRegion(data, canvasW, canvasH, rect, scale) {
-  const w = Math.max(1, Math.ceil(rect.width / scale));
-  const h = Math.max(1, Math.ceil(rect.height / scale));
-  const out = new Uint8ClampedArray(w * h * 3);
-  for (let y = 0;y < h; y += 1) {
-    for (let x = 0;x < w; x += 1) {
-      let r = 0, g = 0, b = 0, count = 0;
-      const sx0 = rect.left + x * scale;
-      const sy0 = rect.top + y * scale;
-      for (let yy = 0;yy < scale; yy += 1) {
-        const sy = sy0 + yy;
-        if (sy < 0 || sy >= canvasH)
-          continue;
-        for (let xx = 0;xx < scale; xx += 1) {
-          const sx = sx0 + xx;
-          if (sx < 0 || sx >= canvasW)
-            continue;
-          const i = (sy * canvasW + sx) * 4;
-          r += data[i];
-          g += data[i + 1];
-          b += data[i + 2];
-          count += 1;
-        }
-      }
-      const oi = (y * w + x) * 3;
-      out[oi] = count ? r / count : BG[0];
-      out[oi + 1] = count ? g / count : BG[1];
-      out[oi + 2] = count ? b / count : BG[2];
-    }
-  }
-  return { pixels: out, width: w, height: h };
-}
-function blurRgb(buffer, width, height, radius) {
-  const tmp = new Uint8ClampedArray(buffer.length);
-  const out = new Uint8ClampedArray(buffer.length);
-  const window = radius * 2 + 1;
-  for (let y = 0;y < height; y += 1) {
-    let r = 0, g = 0, b = 0;
-    for (let x = -radius;x <= radius; x += 1) {
-      const sx = Math.max(0, Math.min(width - 1, x));
-      const i = (y * width + sx) * 3;
-      r += buffer[i];
-      g += buffer[i + 1];
-      b += buffer[i + 2];
-    }
-    for (let x = 0;x < width; x += 1) {
-      const oi = (y * width + x) * 3;
-      tmp[oi] = r / window;
-      tmp[oi + 1] = g / window;
-      tmp[oi + 2] = b / window;
-      const removeX = Math.max(0, x - radius);
-      const addX = Math.min(width - 1, x + radius + 1);
-      const ri = (y * width + removeX) * 3;
-      const ai = (y * width + addX) * 3;
-      r += tmp.length ? buffer[ai] - buffer[ri] : 0;
-      g += tmp.length ? buffer[ai + 1] - buffer[ri + 1] : 0;
-      b += tmp.length ? buffer[ai + 2] - buffer[ri + 2] : 0;
-    }
-  }
-  for (let x = 0;x < width; x += 1) {
-    let r = 0, g = 0, b = 0;
-    for (let y = -radius;y <= radius; y += 1) {
-      const sy = Math.max(0, Math.min(height - 1, y));
-      const i = (sy * width + x) * 3;
-      r += tmp[i];
-      g += tmp[i + 1];
-      b += tmp[i + 2];
-    }
-    for (let y = 0;y < height; y += 1) {
-      const oi = (y * width + x) * 3;
-      out[oi] = r / window;
-      out[oi + 1] = g / window;
-      out[oi + 2] = b / window;
-      const removeY = Math.max(0, y - radius);
-      const addY = Math.min(height - 1, y + radius + 1);
-      const ri = (removeY * width + x) * 3;
-      const ai = (addY * width + x) * 3;
-      r += tmp[ai] - tmp[ri];
-      g += tmp[ai + 1] - tmp[ri + 1];
-      b += tmp[ai + 2] - tmp[ri + 2];
-    }
-  }
-  return out;
-}
-function panelMaskKey(width, height, rect, headerPx, blurScale) {
-  return `${width}x${height}:${rect.left},${rect.top},${rect.width},${rect.height}:${Math.round(headerPx * 100) / 100}:${blurScale}`;
-}
-function getPanelMask(width, height, rect, headerPx, blurScale) {
-  const key = panelMaskKey(width, height, rect, headerPx, blurScale);
-  const cached = panelMaskCache.get(key);
-  if (cached)
-    return cached;
-  const radius = Math.max(PANEL_MASK_RADIUS_MIN, Math.min(PANEL_MASK_RADIUS_MAX, Math.round(Math.min(rect.width, rect.height) * PANEL_MASK_RADIUS_FACTOR)));
-  const sampledWidth = Math.max(1, Math.ceil(rect.width / blurScale));
-  const sampledHeight = Math.max(1, Math.ceil(rect.height / blurScale));
-  const x0 = Math.max(0, rect.left);
-  const y0 = Math.max(0, rect.top);
-  const x1 = Math.min(width - 1, rect.left + rect.width - 1);
-  const y1 = Math.min(height - 1, rect.top + rect.height - 1);
-  const indices = [];
-  const sampleIndices = [];
-  const panelAlpha = [];
-  const edgeAlpha = [];
-  const headerFlags = [];
-  const dividerIndices = [];
-  for (let y = y0;y <= y1; y += 1) {
-    for (let x = x0;x <= x1; x += 1) {
-      const a = roundRectAlpha(x + 0.5, y + 0.5, rect.left, rect.top, rect.width, rect.height, radius);
-      if (a <= 0)
-        continue;
-      const edge = roundRectAlpha(x + 0.5, y + 0.5, rect.left + 1.2, rect.top + 1.2, rect.width - 2.4, rect.height - 2.4, Math.max(1, radius - 1.2));
-      const sx = Math.max(0, Math.min(sampledWidth - 1, Math.floor((x - rect.left) / blurScale)));
-      const sy = Math.max(0, Math.min(sampledHeight - 1, Math.floor((y - rect.top) / blurScale)));
-      indices.push((y * width + x) * 4);
-      sampleIndices.push((sy * sampledWidth + sx) * 3);
-      panelAlpha.push(a);
-      edgeAlpha.push(edge < 0.96 ? Math.min(1, (1 - edge) * 0.7) : 0);
-      headerFlags.push(y < rect.top + headerPx ? 1 : 0);
-    }
-  }
-  const dividerY = Math.round(rect.top + headerPx);
-  if (dividerY > y0 && dividerY < y1) {
-    for (let x = x0 + radius;x <= x1 - radius; x += 1) {
-      dividerIndices.push((dividerY * width + x) * 4);
-    }
-  }
-  const mask = {
-    key,
-    indices: Uint32Array.from(indices),
-    sampleIndices: Uint32Array.from(sampleIndices),
-    panelAlpha: Float32Array.from(panelAlpha),
-    edgeAlpha: Float32Array.from(edgeAlpha),
-    headerFlags: Uint8Array.from(headerFlags),
-    dividerIndices: Uint32Array.from(dividerIndices)
-  };
-  panelMaskCache.set(key, mask);
-  while (panelMaskCache.size > PANEL_MASK_CACHE_LIMIT) {
-    const oldest = panelMaskCache.keys().next().value;
-    if (!oldest)
-      break;
-    panelMaskCache.delete(oldest);
-  }
-  return mask;
-}
-function compositePanel(data, width, height, rect, headerPx) {
-  const blurScale = PANEL_BLUR_SCALE;
-  const sampled = downsampleRegion(data, width, height, rect, blurScale);
-  const blurRadius = Math.max(PANEL_BLUR_RADIUS_MIN, Math.min(PANEL_BLUR_RADIUS_MAX, Math.round(Math.min(rect.width, rect.height) * PANEL_BLUR_RADIUS_FACTOR)));
-  const blurred = blurRgb(sampled.pixels, sampled.width, sampled.height, blurRadius);
-  const mask = getPanelMask(width, height, rect, headerPx, blurScale);
-  for (let i = 0;i < mask.indices.length; i += 1) {
-    const idx = mask.indices[i];
-    const sampleIdx = mask.sampleIndices[i];
-    data[idx] = blurred[sampleIdx];
-    data[idx + 1] = blurred[sampleIdx + 1];
-    data[idx + 2] = blurred[sampleIdx + 2];
-    data[idx + 3] = 255;
-    blendOver(data, idx, mask.headerFlags[i] ? PANEL_HEADER : PANEL, mask.panelAlpha[i]);
-    const edge = mask.edgeAlpha[i];
-    if (edge > 0)
-      blendOver(data, idx, PANEL_LINE2, edge);
-  }
-  for (let i = 0;i < mask.dividerIndices.length; i += 1) {
-    blendOver(data, mask.dividerIndices[i], PANEL_LINE2, 0.28);
-  }
-}
-var RIG_GLYPH_STROKES = {
-  R: [[0, 0, 0, 1], [0, 0, 0.82, 0], [0.82, 0, 0.82, 0.5], [0, 0.5, 0.82, 0.5], [0.36, 0.5, 0.92, 1]],
-  I: [[0.5, 0, 0.5, 1], [0.18, 0, 0.82, 0], [0.18, 1, 0.82, 1]],
-  G: [[0.92, 0.08, 0.12, 0], [0.12, 0, 0.12, 1], [0.12, 1, 0.92, 1], [0.92, 0.5, 0.92, 1], [0.5, 0.5, 0.92, 0.5]]
-};
-function drawBigRigWordmark(data, width, height, layout, load) {
-  const sideBySide = layout.width >= FLEET_GRID_WIDTH * 1.9;
-  if (!sideBySide)
-    return;
-  const letters = "RIG";
-  const min = Math.min(width, height);
-  const glyphH = height * 0.42;
-  const glyphW = width * 0.13;
-  const gap = glyphW * 0.3;
-  const totalW = letters.length * glyphW + (letters.length - 1) * gap;
-  const centerX = width * 0.71;
-  const startX = centerX - totalW / 2;
-  const top = (height - glyphH) / 2;
-  const stroke = Math.max(2, min * 0.013);
-  drawGlow2(data, width, height, centerX, top + glyphH / 2, Math.max(glyphW, glyphH) * 0.9, LIME, 0.022 + load * 0.02);
-  const strokeAlpha = 0.1 + load * 0.06;
-  letters.split("").forEach((letter, index) => {
-    const segments = RIG_GLYPH_STROKES[letter];
-    if (!segments)
-      return;
-    const ox = startX + index * (glyphW + gap);
-    for (const [x0, y0, x1, y1] of segments) {
-      drawLine2(data, width, height, ox + x0 * glyphW, top + y0 * glyphH, ox + x1 * glyphW, top + y1 * glyphH, LIME_DIM, strokeAlpha, stroke);
-    }
-  });
-}
-function drawBackground(data, width, height, _tick, scene, layout, load, activeRuns) {
-  fillRgba(data, BG, BG_WORD);
-  drawStaticAsciiFleetBackground(data, width, height, scene, layout, load, activeRuns);
-  drawBigRigWordmark(data, width, height, layout, load);
-  applyStaticAtmosphere(data, width, height, load);
-}
-function imageVisualFrameKey(input) {
-  const width = Math.max(1, Math.floor(input.pixelSize.width));
-  const height = Math.max(1, Math.floor(input.pixelSize.height));
-  const layer = "layer" in input ? input.layer ?? "full" : "full";
-  const load = loadBucket(input.load);
-  return `${layer}:${width}x${height}:${input.layout.width}x${input.layout.height}:${input.scene}:${input.tick}:l${load}:${input.panels.map((panel) => `${panel.id}:${panel.top}:${panel.height}:${panel.width ?? ""}:${panel.left ?? ""}:${panel.headerHeight ?? ""}`).join("|")}`;
-}
-function encodeKittyFrame(width, height, data, input) {
-  if (input.transport === "png") {
-    const png = encodePng(width, height, data);
-    return kittyImageSequence(png.toString("base64"), { columns: input.layout.width, rows: input.layout.height, imageId: input.imageId, zIndex: input.zIndex, format: 100 });
-  }
-  const compressed = deflateSync(data, { level: ZLIB_LEVEL });
-  return kittyImageSequence(compressed.toString("base64"), {
-    columns: input.layout.width,
-    rows: input.layout.height,
-    imageId: input.imageId,
-    zIndex: input.zIndex,
-    format: 32,
-    pixelWidth: width,
-    pixelHeight: height,
-    compressed: true
-  });
-}
-function cropRgba(data, sourceWidth, rect) {
-  const out = new Uint8ClampedArray(rect.width * rect.height * 4);
-  for (let y = 0;y < rect.height; y += 1) {
-    const sourceStart = ((rect.top + y) * sourceWidth + rect.left) * 4;
-    out.set(data.subarray(sourceStart, sourceStart + rect.width * 4), y * rect.width * 4);
-  }
-  return out;
-}
-function encodePanelPatch(data, sourceWidth, placement, imageId, zIndex) {
-  const patch = cropRgba(data, sourceWidth, placement);
-  const png = encodePng(placement.width, placement.height, patch);
-  const sequence = kittyImageSequence(png.toString("base64"), {
-    columns: Math.max(1, Math.round(placement.widthCells)),
-    rows: Math.max(1, Math.round(placement.heightCells)),
-    imageId,
-    zIndex,
-    format: 100
-  });
-  return `\x1B[${Math.max(1, Math.round(placement.topCells) + 1)};${Math.max(1, Math.round(placement.leftCells) + 1)}H${sequence}`;
-}
-function renderImageVisualFrame(input) {
-  const width = Math.max(1, Math.floor(input.pixelSize.width));
-  const height = Math.max(1, Math.floor(input.pixelSize.height));
-  const byteCount = width * height * 4;
-  if (byteCount > MAX_IMAGE_BYTES)
-    return null;
-  const layer = input.layer ?? "full";
-  const data = new Uint8ClampedArray(byteCount);
-  const load = loadBucket(input.load) / LOAD_BUCKETS;
-  const activeRuns = Math.max(0, Math.floor(input.activeRuns ?? 0));
-  drawBackground(data, width, height, 0, input.scene, input.layout, load, activeRuns);
-  if (layer === "split") {
-    const sequences = [encodeKittyFrame(width, height, data, input)];
-    let panelIndex = 0;
-    for (const panel of input.panels) {
-      if (panel.chrome !== "ad-terminal")
-        continue;
-      const placement = panelPixelPlacement(input.layout, panel, { width, height });
-      if (!placement)
-        continue;
-      const cellH = height / input.layout.height;
-      const headerPx = Math.max(cellH * 3, (panel.headerHeight ?? 3) * cellH);
-      compositePanel(data, width, height, placement, headerPx);
-      const imageId = input.imageIds?.[panelIndex] ?? (input.imageId + 1000 + panelIndex >>> 0 || panelIndex + 1);
-      sequences.push(encodePanelPatch(data, width, placement, imageId, -12));
-      panelIndex += 1;
-    }
-    return { key: imageVisualFrameKey(input), sequence: sequences.join("") };
-  }
-  if (layer === "panel-chrome")
-    return { key: imageVisualFrameKey(input), sequence: "" };
-  if (layer === "background") {
-    return { key: imageVisualFrameKey(input), sequence: encodeKittyFrame(width, height, data, input) };
-  }
-  if (layer === "panel-patches") {
-    const sequences = [];
-    let panelIndex = 0;
-    for (const panel of input.panels) {
-      if (panel.chrome !== "ad-terminal")
-        continue;
-      const placement = panelPixelPlacement(input.layout, panel, { width, height });
-      if (!placement)
-        continue;
-      const cellH = height / input.layout.height;
-      const headerPx = Math.max(cellH * 3, (panel.headerHeight ?? 3) * cellH);
-      compositePanel(data, width, height, placement, headerPx);
-      const imageId = input.imageIds?.[panelIndex] ?? (input.imageId + 1000 + panelIndex >>> 0 || panelIndex + 1);
-      sequences.push(encodePanelPatch(data, width, placement, imageId, input.zIndex));
-      panelIndex += 1;
-    }
-    return { key: imageVisualFrameKey(input), sequence: sequences.join("") };
-  }
-  for (const panel of input.panels) {
-    if (panel.chrome !== "ad-terminal")
-      continue;
-    const rect = panelRect(input.layout, panel, { width, height });
-    if (!rect)
-      continue;
-    const cellH = height / input.layout.height;
-    const headerPx = Math.max(cellH * 3, (panel.headerHeight ?? 3) * cellH);
-    compositePanel(data, width, height, rect, headerPx);
-  }
-  return { key: imageVisualFrameKey(input), sequence: encodeKittyFrame(width, height, data, input) };
-}
-function shouldRenderImagesInline() {
-  return process.env.RIG_OPENTUI_IMAGE_WORKER === "0" || import.meta.url.includes("$bunfs");
-}
-function createImageWorker() {
-  if (shouldRenderImagesInline())
-    return null;
-  const isTypeScriptRuntime = import.meta.url.endsWith(".ts");
-  const workerUrl = new URL(isTypeScriptRuntime ? "./image-visual-layer-worker.ts" : "./image-visual-layer-worker.js", import.meta.url);
-  try {
-    return new Worker(workerUrl);
-  } catch {
-    if (typeof process.versions.bun === "string") {
-      try {
-        return new Worker("./src/app-opentui/render/image-visual-layer-worker.ts");
-      } catch {}
-    }
-    return null;
-  }
-}
-var RECENT_WRITTEN_LIMIT = 24;
-var DEFAULT_IMAGE_OUTPUT_BACKLOG_BYTES = 256 * 1024;
-var DEFAULT_IMAGE_OUTPUT_BYTES_PER_SECOND = 850 * 1024;
-function imageOutputBacklogBytes() {
-  const raw = Number.parseInt(process.env.RIG_OPENTUI_IMAGE_BACKLOG_BYTES ?? "", 10);
-  if (Number.isFinite(raw) && raw > 0)
-    return Math.max(64 * 1024, Math.min(2 * 1024 * 1024, raw));
-  return DEFAULT_IMAGE_OUTPUT_BACKLOG_BYTES;
-}
-function imageOutputBytesPerSecond() {
-  const raw = Number.parseInt(process.env.RIG_OPENTUI_IMAGE_BYTES_PER_SECOND ?? "", 10);
-  if (Number.isFinite(raw) && raw > 0)
-    return Math.max(128 * 1024, Math.min(2 * 1024 * 1024, raw));
-  return DEFAULT_IMAGE_OUTPUT_BYTES_PER_SECOND;
-}
-function pendingLayerKey(key) {
-  return key.split(":", 1)[0] || "full";
-}
-
-class ImageVisualLayer {
-  imageId = allocateImageId();
-  panelImageIds = Array.from({ length: 8 }, () => allocateImageId());
-  panelChromeImageIds = Array.from({ length: 8 }, () => allocateImageId());
-  stdout;
-  onFrameReady;
-  protocol;
-  transport = imageTransport();
-  maxOutputBacklogBytes = imageOutputBacklogBytes();
-  outputBytesPerSecond = imageOutputBytesPerSecond();
-  outputBudgetBytes = imageOutputBytesPerSecond();
-  lastBudgetAtMs = Date.now();
-  motionSlot = this.createSlot();
-  workersStarted = false;
-  pendingFrames = new Map;
-  recentWrittenKeys = [];
-  imagesVisible = false;
-  flushPaused = false;
-  requestId = 0;
-  lastBackgroundKey = "";
-  fatalWorkerError = null;
-  destroyed = false;
-  constructor(stdout = process.stdout, onFrameReady) {
-    this.stdout = stdout;
-    this.onFrameReady = onFrameReady;
-    this.protocol = getRigTerminalCapabilities().imageProtocol;
-  }
-  get enabled() {
-    return this.protocol === "kitty";
-  }
-  clear() {
-    if (this.enabled) {
-      if (this.imagesVisible)
-        this.stdout.write([this.imageId, ...this.panelImageIds, ...this.panelChromeImageIds].map((id) => deleteKittyImage(id)).join("") + "\x1B[?25h");
-      this.imagesVisible = false;
-      this.pendingFrames.clear();
-      this.recentWrittenKeys.length = 0;
-      this.resetSlot(this.motionSlot);
-      this.lastBackgroundKey = "";
-      this.outputBudgetBytes = this.outputBytesPerSecond;
-      this.lastBudgetAtMs = Date.now();
-      this.motionSlot.clearedThroughRequestId = this.requestId;
-    }
-  }
-  destroy() {
-    if (this.destroyed)
-      return;
-    this.clear();
-    this.destroyed = true;
-    const workers = [this.motionSlot.worker];
-    this.motionSlot.worker = null;
-    for (const worker of workers)
-      if (worker)
-        worker.terminate().catch(() => {
-          return;
-        });
-  }
-  setFlushPaused(paused) {
-    this.flushPaused = paused;
-  }
-  isReady(input) {
-    if (!this.enabled || this.destroyed)
-      return true;
-    this.throwIfFatal();
-    const splitKey = imageVisualFrameKey({ ...input, tick: 0, layer: "split" });
-    return this.recentWrittenKeys.includes(splitKey) || Array.from(this.pendingFrames.values()).some((frame) => frame.key === splitKey);
-  }
-  render(input) {
-    if (!this.enabled || this.destroyed)
-      return;
-    this.throwIfFatal();
-    if (this.transport !== "png")
-      this.failWorker("renderer", new Error("OpenTUI image visuals require PNG transport for static-background rendering."));
-    this.ensureWorkersStarted();
-    const width = Math.max(1, Math.floor(input.pixelSize.width));
-    const height = Math.max(1, Math.floor(input.pixelSize.height));
-    if (width * height * 4 > MAX_IMAGE_BYTES)
-      return;
-    if (this.isOutputBackedUp())
-      return;
-    this.refillOutputBudget();
-    const splitInput = { ...input, tick: 0, layer: "split" };
-    const splitKey = imageVisualFrameKey(splitInput);
-    if (input.force || splitKey !== this.lastBackgroundKey) {
-      this.scheduleRender(this.motionSlot, splitInput, this.imageId, -30, input.force, this.panelImageIds);
-      this.lastBackgroundKey = splitKey;
-    }
-  }
-  flush() {
-    this.throwIfFatal();
-    if (this.flushPaused)
-      return false;
-    if (this.pendingFrames.size === 0)
-      return false;
-    this.refillOutputBudget();
-    if (this.isOutputBackedUp()) {
-      const retainedSplit = this.pendingFrames.get("split");
-      this.pendingFrames.clear();
-      if (retainedSplit)
-        this.pendingFrames.set("split", retainedSplit);
-      return false;
-    }
-    const framePriority = (frame) => {
-      const layer = pendingLayerKey(frame.key);
-      if (layer === "split")
-        return 1;
-      return 4;
-    };
-    const frames = Array.from(this.pendingFrames.values()).sort((a, b) => framePriority(a) - framePriority(b));
-    const prefix = "\x1B[?25l\x1B7\x1B[s\x1B[H";
-    const suffix = "\x1B[u\x1B8";
-    const selected = [];
-    const retained = new Map;
-    let sequence = "";
-    let byteLength = Buffer.byteLength(prefix + suffix);
-    for (const frame of frames) {
-      const candidate = sequence + frame.sequence;
-      const candidateBytes = Buffer.byteLength(prefix + candidate + suffix);
-      const layer = pendingLayerKey(frame.key);
-      const allowOneStaticFrame = selected.length === 0 && layer === "split";
-      if (candidateBytes <= this.outputBudgetBytes || allowOneStaticFrame) {
-        selected.push(frame);
-        sequence = candidate;
-        byteLength = candidateBytes;
-      } else if (layer === "split") {
-        retained.set(layer, frame);
-      }
-    }
-    this.pendingFrames.clear();
-    for (const [layer, frame] of retained)
-      this.pendingFrames.set(layer, frame);
-    if (!sequence || selected.length === 0)
-      return false;
-    const payload = `${prefix}${sequence}${suffix}`;
-    for (const frame of selected)
-      this.markWritten(frame.key);
-    this.outputBudgetBytes -= byteLength;
-    this.stdout.cork?.();
-    const accepted = this.stdout.write(payload);
-    this.stdout.uncork?.();
-    this.imagesVisible = true;
-    return accepted;
-  }
-  createSlot() {
-    return { worker: null, busy: false, queuedRequest: null, inFlightKey: "", queuedKey: "", clearedThroughRequestId: 0, latestRequestId: 0 };
-  }
-  resetSlot(slot) {
-    slot.busy = false;
-    slot.queuedRequest = null;
-    slot.inFlightKey = "";
-    slot.queuedKey = "";
-  }
-  markWritten(key) {
-    this.recentWrittenKeys.push(key);
-    while (this.recentWrittenKeys.length > RECENT_WRITTEN_LIMIT)
-      this.recentWrittenKeys.shift();
-  }
-  refillOutputBudget() {
-    const now = Date.now();
-    const elapsedMs = Math.max(0, now - this.lastBudgetAtMs);
-    this.lastBudgetAtMs = now;
-    this.outputBudgetBytes = Math.min(this.outputBytesPerSecond, this.outputBudgetBytes + elapsedMs / 1000 * this.outputBytesPerSecond);
-  }
-  isOutputBackedUp() {
-    return Boolean(this.stdout.writableNeedDrain) || this.stdout.writableLength > this.maxOutputBacklogBytes;
-  }
-  stageFrame(frame) {
-    this.pendingFrames.set(pendingLayerKey(frame.key), frame);
-  }
-  isKnownKey(slot, key) {
-    return this.recentWrittenKeys.includes(key) || Array.from(this.pendingFrames.values()).some((frame) => frame.key === key) || key === slot.inFlightKey || key === slot.queuedKey;
-  }
-  ensureWorkersStarted() {
-    if (this.workersStarted)
-      return;
-    this.workersStarted = true;
-    this.startWorker(this.motionSlot, "static-visuals");
-  }
-  failWorker(name, error) {
-    const detail = error instanceof Error ? error.message : String(error);
-    this.fatalWorkerError ??= new Error(`OpenTUI image worker ${name} failed: ${detail}`);
-    throw this.fatalWorkerError;
-  }
-  throwIfFatal() {
-    if (this.fatalWorkerError)
-      throw this.fatalWorkerError;
-  }
-  scheduleRender(slot, input, imageId, zIndex, force, imageIds) {
-    this.throwIfFatal();
-    const key = imageVisualFrameKey(input);
-    if (!force && this.isKnownKey(slot, key))
-      return;
-    const request = {
-      ...input,
-      imageId,
-      ...imageIds ? { imageIds } : {},
-      zIndex,
-      transport: this.transport,
-      requestId: ++this.requestId,
-      key
-    };
-    slot.latestRequestId = request.requestId;
-    if (!slot.worker) {
-      this.renderInline(slot, request);
-      return;
-    }
-    this.enqueueWorkerRender(slot, request);
-  }
-  startWorker(slot, name) {
-    const worker = createImageWorker();
-    if (!worker)
-      return;
-    slot.worker = worker;
-    worker.on("message", (message) => this.handleWorkerMessage(slot, message));
-    worker.once("error", (error) => {
-      if (!this.destroyed)
-        this.fatalWorkerError ??= new Error(`OpenTUI image worker ${name} failed: ${error instanceof Error ? error.message : String(error)}`);
-    });
-    worker.once("exit", (code) => {
-      if (!this.destroyed)
-        this.fatalWorkerError ??= new Error(`OpenTUI image worker ${name} exited unexpectedly with code ${code}.`);
-    });
-  }
-  renderInline(slot, request) {
-    try {
-      const result = renderImageVisualFrame(request);
-      if (result?.sequence && !this.isKnownKey(slot, result.key) && (!this.isOutputBackedUp() || pendingLayerKey(result.key) === "split")) {
-        this.stageFrame({ key: result.key, sequence: result.sequence });
-        this.onFrameReady?.();
-      }
-    } catch (error) {
-      this.failWorker(String(request.layer ?? "visual"), error);
-    }
-  }
-  enqueueWorkerRender(slot, request) {
-    this.throwIfFatal();
-    if (slot.busy) {
-      slot.queuedRequest = request;
-      slot.queuedKey = request.key;
-      return;
-    }
-    this.dispatchWorkerRender(slot, request);
-  }
-  dispatchWorkerRender(slot, request) {
-    this.throwIfFatal();
-    if (!slot.worker)
-      this.failWorker(String(request.layer ?? "visual"), new Error("worker is unavailable"));
-    slot.busy = true;
-    slot.inFlightKey = request.key;
-    try {
-      slot.worker.postMessage(request);
-    } catch (error) {
-      this.failWorker(String(request.layer ?? "visual"), error);
-    }
-  }
-  handleWorkerMessage(slot, message) {
-    if (this.destroyed || !message || typeof message !== "object")
-      return;
-    const response = message;
-    slot.busy = false;
-    slot.inFlightKey = "";
-    const isStale = response.requestId <= slot.clearedThroughRequestId || response.requestId < slot.latestRequestId;
-    if (!isStale) {
-      if (response.error)
-        this.failWorker(pendingLayerKey(response.key), new Error(response.error));
-      if (response.sequence && !this.isKnownKey(slot, response.key) && (!this.isOutputBackedUp() || pendingLayerKey(response.key) === "split")) {
-        this.stageFrame({ key: response.key, sequence: response.sequence });
-        this.onFrameReady?.();
-      }
-    }
-    const next = slot.queuedRequest;
-    slot.queuedRequest = null;
-    slot.queuedKey = "";
-    if (next && !this.isKnownKey(slot, next.key))
-      this.dispatchWorkerRender(slot, next);
-  }
-}
-function pixelSizeForRenderer(renderer) {
-  const resolution = renderer.resolution;
-  const base = resolution?.width && resolution?.height ? resolution : { width: renderer.width * 12, height: renderer.height * 24 };
-  const scale = imageResolutionScale();
-  return {
-    width: Math.max(renderer.width, Math.floor(base.width * scale)),
-    height: Math.max(renderer.height, Math.floor(base.height * scale))
-  };
-}
-function forceModernImageVisuals() {
-  return getRigTerminalCapabilities().supportsKittyImages;
-}
-
 // packages/cli/src/app-opentui/fleet-stats.ts
 var ACTIVE_STATUSES = new Set([
   "running",
@@ -1763,68 +784,42 @@ function isTerminalScene(scene) {
 }
 function Backdrop(props) {
   const renderer = useRenderer();
-  const imageRef = useRef(null);
   const graphicsRef = useRef(null);
   useEffect(() => {
-    const imageVisuals = forceModernImageVisuals() ? new ImageVisualLayer(process.stdout, () => renderer.requestRender?.()) : null;
-    if (imageVisuals?.enabled) {
-      imageRef.current = imageVisuals;
-    } else {
-      const layout = computeStageLayout(renderer.width, renderer.height);
-      const graphics = createGraphicsLayer(renderer, layout);
-      renderer.root.add(graphics);
-      graphicsRef.current = graphics;
-    }
+    const layout = computeStageLayout(renderer.width, renderer.height);
+    const graphics = createGraphicsLayer(renderer, layout);
+    renderer.root.add(graphics);
+    graphicsRef.current = graphics;
     return () => {
-      imageRef.current?.destroy();
-      const graphics = graphicsRef.current;
-      if (graphics) {
+      const g = graphicsRef.current;
+      if (g) {
         try {
-          renderer.root.remove(graphics.id);
+          renderer.root.remove(g.id);
         } catch {}
       }
-      imageRef.current = null;
       graphicsRef.current = null;
     };
   }, [renderer]);
   useEffect(() => {
-    const layout = computeStageLayout(renderer.width, renderer.height);
-    const image = imageRef.current;
     const graphics = graphicsRef.current;
+    if (!graphics)
+      return;
+    const layout = computeStageLayout(renderer.width, renderer.height);
     if (layout.tooSmall) {
-      image?.clear();
-      if (graphics)
-        clearGraphicsLayer(graphics);
+      clearGraphicsLayer(graphics);
       return;
     }
     const stats = fleetStatsFromState(props.state);
-    const tick = props.state.tick;
-    const animationTick = Math.floor(tick / ANIMATION_SLOWDOWN);
+    const animationTick = Math.floor(props.state.tick / ANIMATION_SLOWDOWN);
     const panels = (props.frame.panels ?? []).map((panel) => ({ ...panel }));
     const terminalActive = props.frame.terminalActive ?? isTerminalScene(props.state.scene);
     const fullScreen = Boolean(props.frame.fullScreen);
-    if (image) {
-      if (terminalActive || fullScreen) {
-        image.clear();
-      } else {
-        image.render({
-          layout,
-          pixelSize: pixelSizeForRenderer(renderer),
-          panels,
-          scene: props.state.scene,
-          tick,
-          load: stats.load,
-          activeRuns: stats.active
-        });
-      }
-    } else if (graphics) {
-      resizeGraphicsLayer(graphics, layout);
-      if (terminalActive || fullScreen) {
-        clearGraphicsLayer(graphics);
-      } else {
-        drawAmbientField(graphics, layout, animationTick, props.state.scene, stats.load, stats.active);
-        drawPanelChrome(graphics, layout, panels);
-      }
+    resizeGraphicsLayer(graphics, layout);
+    if (terminalActive || fullScreen) {
+      clearGraphicsLayer(graphics);
+    } else {
+      drawAmbientField(graphics, layout, animationTick, props.state.scene, stats.load, stats.active);
+      drawPanelChrome(graphics, layout, panels);
     }
   });
   return null;