@h-rig/cli 0.0.6-alpha.80 → 0.0.6-alpha.81

package/dist/src/app-opentui/render/image-visual-layer-worker.js

@@ -0,0 +1,1541 @@
+// @bun
+var __defProp = Object.defineProperty;
+var __returnValue = (v) => v;
+function __exportSetter(name, newValue) {
+  this[name] = __returnValue.bind(null, newValue);
+}
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: __exportSetter.bind(all, name)
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+
+// packages/cli/src/app-opentui/render/image-visual-layer.ts
+import { Worker } from "worker_threads";
+import { deflateSync } from "zlib";
+import { allocateImageId, deleteKittyImage, getCapabilities } from "@earendil-works/pi-tui";
+function imageTransport() {
+  const forced = process.env.RIG_OPENTUI_IMAGE_TRANSPORT;
+  if (forced === "rgba-zlib")
+    return "rgba-zlib";
+  return "png";
+}
+function droneLayerScale() {
+  const raw = Number.parseFloat(process.env.RIG_OPENTUI_DRONE_SCALE ?? "");
+  if (Number.isFinite(raw) && raw > 0)
+    return Math.max(0.15, Math.min(1, raw));
+  return DEFAULT_DRONE_LAYER_SCALE;
+}
+function scaledPixelSize(size, scale, layout) {
+  return {
+    width: Math.max(layout.width, Math.floor(size.width * scale)),
+    height: Math.max(layout.height, Math.floor(size.height * scale))
+  };
+}
+function imageFps() {
+  const raw = Number.parseFloat(process.env.RIG_OPENTUI_IMAGE_FPS ?? "");
+  if (Number.isFinite(raw) && raw > 0)
+    return Math.max(10, Math.min(60, raw));
+  return DEFAULT_IMAGE_FPS;
+}
+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];
+  }
+}
+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 isModernImageTerminal(protocol) {
+  return protocol === "kitty";
+}
+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 drawGlow(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), 2.4);
+      blendOver(data, (y * width + x) * 4, color, alpha * falloff);
+    }
+  }
+}
+function drawLine(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 t = i / steps;
+    drawDisc(data, width, height, x0 + dx * t, y0 + dy * t, thickness, color, alpha);
+  }
+}
+function drawDrone(data, width, height, x, y, scale, tick, color) {
+  const wobble = Math.sin(tick * 0.055) * scale * 0.35;
+  const cy = y + wobble;
+  drawGlow(data, width, height, x, cy, scale * 7, color, 0.18);
+  drawDisc(data, width, height, x, cy, scale * 1.45, color, 0.92);
+  drawDisc(data, width, height, x, cy, scale * 0.55, [235, 255, 176, 255], 0.85);
+  const arm = scale * 4.1;
+  const rotor = scale * 1.6;
+  const arms = [[-arm, -arm * 0.72], [arm, -arm * 0.72], [-arm, arm * 0.72], [arm, arm * 0.72]];
+  for (const [dx, dy] of arms) {
+    drawLine(data, width, height, x, cy, x + dx, cy + dy, color, 0.42, Math.max(1, scale * 0.22));
+    drawGlow(data, width, height, x + dx, cy + dy, rotor * 2.6, color, 0.1);
+    drawDisc(data, width, height, x + dx, cy + dy, rotor, color, 0.34 + 0.12 * Math.sin(tick * 0.15));
+  }
+}
+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) {
+  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 > 8 && height > 8 ? { left, top, width, height } : null;
+}
+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(14, Math.min(34, Math.round(Math.min(rect.width, rect.height) * 0.035)));
+  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 blurred = blurRgb(sampled.pixels, sampled.width, sampled.height, 4);
+  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_LINE, edge);
+  }
+  for (let i = 0;i < mask.dividerIndices.length; i += 1) {
+    blendOver(data, mask.dividerIndices[i], PANEL_LINE, 0.28);
+  }
+}
+function visualSceneKind(scene) {
+  if (scene === "tasks")
+    return "loop";
+  if (scene === "help")
+    return "carrier";
+  return "dispatch";
+}
+function seededUnit(seed) {
+  let value = seed >>> 0;
+  value = value * 1664525 + 1013904223 >>> 0;
+  return value / 4294967295;
+}
+function sceneCore(width, height, kind) {
+  if (kind === "dispatch")
+    return { x: width * 0.3, y: height * 0.45 };
+  if (kind === "carrier")
+    return { x: width * 0.5, y: height * 0.54 };
+  return { x: width * 0.09, y: height * 0.56 };
+}
+function dispatchLane(width, index, count) {
+  const a = seededUnit(28672 + index * 101);
+  const b = seededUnit(36864 + index * 131);
+  const c = seededUnit(45056 + index * 151);
+  const ang = (-0.9 + 1.8 * (index / Math.max(1, count - 1))) * (Math.PI * 0.5);
+  return { ang, len: width * (0.32 + a * 0.42), curve: (b - 0.5) * 0.7, phase: c * Math.PI * 2 };
+}
+function lanePoint(width, height, lane, p, kind = "dispatch") {
+  const core = sceneCore(width, height, kind);
+  const dist = lane.len * p;
+  const bend = Math.sin(p * Math.PI) * lane.curve * Math.min(width, height) * 0.035;
+  const ux = Math.cos(lane.ang);
+  const uy = Math.sin(lane.ang);
+  return { x: core.x + ux * dist + -uy * bend, y: core.y + uy * dist + ux * bend };
+}
+function drawMarketingRails(data, width, height, kind, tick) {
+  const ys = kind === "loop" ? [0.18, 0.5, 0.82] : kind === "carrier" ? [0.24, 0.54, 0.82] : [0.18, 0.58, 0.82];
+  ys.forEach((ratio, index) => {
+    const y = height * ratio + Math.sin(tick * 0.018 + index) * Math.max(2, height * 0.0025);
+    const color = index === 2 ? CYAN : index === 1 ? LIME : LIME_DIM;
+    drawLine(data, width, height, width * 0.06, y, width * 0.94, y + Math.sin(index) * height * 0.002, color, index === 1 ? 0.11 : 0.07, Math.max(0.8, height * 0.0012));
+    for (let p = (tick * 0.004 + index * 0.21) % 1;p < 1; p += 0.18 + index * 0.02) {
+      const x = width * (0.06 + 0.88 * p);
+      drawDisc(data, width, height, x, y, Math.max(1.2, height * (0.0017 + index * 0.0004)), color, 0.24);
+      drawGlow(data, width, height, x, y, Math.max(5, height * 0.006), color, 0.035);
+    }
+  });
+}
+function drawDispatchScene(data, width, height, tick) {
+  const core = sceneCore(width, height, "dispatch");
+  const min = Math.min(width, height);
+  drawGlow(data, width, height, core.x, core.y, min * 0.085, LIME, 0.12);
+  drawDisc(data, width, height, core.x, core.y, min * 0.0065, LIME, 0.85);
+  const laneCount = width < 1000 ? 7 : 12;
+  const lanes = Array.from({ length: laneCount }, (_, index) => dispatchLane(width, index, laneCount));
+  lanes.forEach((lane) => {
+    let prev = lanePoint(width, height, lane, 0);
+    for (let step = 1;step <= 32; step += 1) {
+      const next = lanePoint(width, height, lane, step / 32);
+      drawLine(data, width, height, prev.x, prev.y, next.x, next.y, lane.phase > Math.PI ? CYAN : LIME_DIM, 0.045, Math.max(0.7, min * 0.0009));
+      prev = next;
+    }
+  });
+  const packets = width < 1000 ? 70 : 150;
+  for (let i = 0;i < packets; i += 1) {
+    const lane = lanes[i % lanes.length];
+    const speed = 0.003 + seededUnit(12288 + i * 17) * 0.009;
+    const p = (seededUnit(16384 + i * 19) + tick * speed) % 1;
+    const pt = lanePoint(width, height, lane, p);
+    const wobble = (seededUnit(20480 + i * 23) - 0.5) * min * 0.012;
+    const fade = p < 0.1 ? p / 0.1 : p > 0.88 ? (1 - p) / 0.12 : 1;
+    const color = seededUnit(24576 + i * 29) < 0.22 ? CYAN : LIME_DIM;
+    const y = pt.y + wobble * Math.sin(p * Math.PI * 2);
+    drawLine(data, width, height, pt.x - min * 0.012, y - min * 0.002, pt.x, y, color, 0.08 * fade, Math.max(0.7, min * 0.0008));
+    drawDisc(data, width, height, pt.x, y, Math.max(1.3, min * 0.0022), color, 0.5 * fade);
+    drawGlow(data, width, height, pt.x, y, Math.max(4, min * 0.008), color, 0.045 * fade);
+  }
+  for (let i = 0;i < (width < 1000 ? 4 : 8); i += 1) {
+    const lane = lanes[i % lanes.length];
+    const p = (tick * 0.002 + i * 0.13) % 1;
+    const pt = lanePoint(width, height, lane, p);
+    drawDrone(data, width, height, pt.x, pt.y + Math.sin(tick * 0.04 + i) * min * 0.004, min * (0.006 + i % 2 * 0.0015), tick + i * 11, i % 3 === 0 ? CYAN : LIME_DIM);
+  }
+}
+function drawLoopScene(data, width, height, tick) {
+  const min = Math.min(width, height);
+  const y = height * 0.56;
+  const x0 = width * 0.09;
+  const x1 = width * 0.91;
+  drawLine(data, width, height, x0, y, x1, y, LIME_DIM, 0.12, Math.max(0.8, min * 0.001));
+  const gates = width < 1000 ? 4 : 5;
+  const active = Math.floor(tick / 16) % gates;
+  for (let i = 0;i < gates; i += 1) {
+    const x = x0 + (x1 - x0) * (i / Math.max(1, gates - 1));
+    const color = i === active ? LIME : i <= active ? LIME_DIM : INK_DIM;
+    drawLine(data, width, height, x, y - min * 0.05, x, y + min * 0.05, color, i === active ? 0.25 : 0.08, Math.max(0.8, min * 0.001));
+    drawDisc(data, width, height, x, y, i === active ? min * 0.006 : min * 0.0035, color, i === active ? 0.72 : 0.25);
+    drawGlow(data, width, height, x, y, i === active ? min * 0.018 : min * 0.01, color, i === active ? 0.1 : 0.035);
+  }
+  const packets = width < 1000 ? 36 : 84;
+  for (let i = 0;i < packets; i += 1) {
+    const p = (seededUnit(33024 + i * 13) + tick * (0.0022 + seededUnit(33280 + i * 17) * 0.004)) % 1;
+    const x = x0 + (x1 - x0) * p;
+    const segment = Math.min(gates - 1, Math.floor(p * gates));
+    const color = segment < active ? LIME_DIM : segment === active ? CYAN : INK_DIM;
+    const py = y + (seededUnit(33536 + i * 19) - 0.5) * min * 0.018 * Math.sin(p * Math.PI * 2);
+    drawLine(data, width, height, x - min * 0.014, py, x, py, color, 0.1, Math.max(0.7, min * 0.0008));
+    drawDisc(data, width, height, x, py, Math.max(1.2, min * 0.002), color, color === INK_DIM ? 0.22 : 0.58);
+  }
+  drawDrone(data, width, height, x0 + (x1 - x0) * (tick * 0.003 % 1), y - min * 0.04, min * 0.0065, tick, LIME_DIM);
+  drawDrone(data, width, height, x0 + (x1 - x0) * ((tick * 0.002 + 0.5) % 1), y + min * 0.036, min * 0.0055, tick + 40, MAGENTA);
+}
+function drawCarrierScene(data, width, height, tick) {
+  const min = Math.min(width, height);
+  const core = sceneCore(width, height, "carrier");
+  drawGlow(data, width, height, core.x, core.y, min * 0.075, LIME, 0.12);
+  drawDisc(data, width, height, core.x, core.y, min * 0.0065, LIME, 0.92);
+  const nodes = width < 1000 ? 5 : 7;
+  const rx = width * 0.36;
+  const ry = height * 0.22;
+  for (let i = 0;i < nodes; i += 1) {
+    const a = i / nodes * Math.PI * 2 - Math.PI / 2 + tick * 0.006;
+    const x = core.x + Math.cos(a) * rx;
+    const y = core.y + Math.sin(a) * ry;
+    const color = i % 2 ? CYAN : LIME_DIM;
+    drawLine(data, width, height, core.x, core.y, x, y, color, 0.055, Math.max(0.7, min * 0.0008));
+    drawGlow(data, width, height, x, y, min * 0.018, color, 0.055);
+    drawDisc(data, width, height, x, y, min * 0.0048, color, 0.62);
+    drawDrone(data, width, height, x, y - min * 0.018, min * 0.005, tick + i * 9, color);
+  }
+  const packets = width < 1000 ? 30 : 72;
+  for (let i = 0;i < packets; i += 1) {
+    const lane = i % nodes;
+    const a = lane / nodes * Math.PI * 2 - Math.PI / 2 + tick * 0.006;
+    const nx = core.x + Math.cos(a) * rx;
+    const ny = core.y + Math.sin(a) * ry;
+    const p = (seededUnit(37120 + i * 37) + tick * (0.003 + seededUnit(37376 + i * 43) * 0.009)) % 1;
+    const x = core.x + (nx - core.x) * p;
+    const y = core.y + (ny - core.y) * p;
+    const color = seededUnit(37632 + i * 47) < 0.35 ? CYAN : LIME_DIM;
+    drawDisc(data, width, height, x, y, Math.max(1.2, min * 0.002), color, 0.48);
+    drawGlow(data, width, height, x, y, min * 0.008, color, 0.035);
+  }
+}
+function drawBackground(data, width, height, tick, scene) {
+  fillRgba(data, BG, BG_WORD);
+  const kind = visualSceneKind(scene);
+  drawGlow(data, width, height, width * 0.82, height * 0.04, Math.min(width, height) * 0.22, LIME, 0.035);
+  drawGlow(data, width, height, width * 0.12, height * 0.18, Math.min(width, height) * 0.17, CYAN, 0.025);
+  drawMarketingRails(data, width, height, kind, tick);
+  if (kind === "loop")
+    drawLoopScene(data, width, height, tick);
+  else if (kind === "carrier")
+    drawCarrierScene(data, width, height, tick);
+  else
+    drawDispatchScene(data, width, height, tick);
+}
+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";
+  return `${layer}:${width}x${height}:${input.layout.width}x${input.layout.height}:${input.scene}:${input.tick}:${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 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 data = new Uint8ClampedArray(byteCount);
+  drawBackground(data, width, height, input.tick, input.scene);
+  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 createImageWorker() {
+  if (process.env.RIG_OPENTUI_IMAGE_WORKER === "0")
+    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;
+  }
+}
+function panelFps() {
+  const raw = Number.parseFloat(process.env.RIG_OPENTUI_PANEL_FPS ?? "");
+  if (Number.isFinite(raw) && raw > 0)
+    return Math.max(4, Math.min(60, raw));
+  return DEFAULT_PANEL_FPS;
+}
+function panelLayerScale() {
+  const raw = Number.parseFloat(process.env.RIG_OPENTUI_PANEL_SCALE ?? "");
+  if (Number.isFinite(raw) && raw > 0)
+    return Math.max(0.18, Math.min(1, raw));
+  return DEFAULT_PANEL_LAYER_SCALE;
+}
+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;
+  protocol;
+  transport = imageTransport();
+  frameIntervalMs = 1000 / imageFps();
+  panelIntervalMs = 1000 / panelFps();
+  maxOutputBacklogBytes = imageOutputBacklogBytes();
+  outputBytesPerSecond = imageOutputBytesPerSecond();
+  outputBudgetBytes = imageOutputBytesPerSecond();
+  lastBudgetAtMs = Date.now();
+  motionSlot = this.createSlot();
+  panelSlot = this.createSlot();
+  chromeSlot = this.createSlot();
+  pendingFrames = new Map;
+  recentWrittenKeys = [];
+  requestId = 0;
+  lastMotionFrameIndex = -1;
+  lastPanelFrameIndex = -1;
+  lastChromeKey = "";
+  destroyed = false;
+  constructor(stdout = process.stdout) {
+    this.stdout = stdout;
+    this.protocol = getCapabilities().images;
+    if (this.enabled) {
+      this.startWorker(this.motionSlot);
+      this.startWorker(this.panelSlot);
+      this.startWorker(this.chromeSlot);
+    }
+  }
+  get enabled() {
+    return isModernImageTerminal(this.protocol);
+  }
+  clear() {
+    if (this.enabled) {
+      this.stdout.write([this.imageId, ...this.panelImageIds, ...this.panelChromeImageIds].map((id) => deleteKittyImage(id)).join("") + "\x1B[?25h");
+      this.pendingFrames.clear();
+      this.recentWrittenKeys.length = 0;
+      this.resetSlot(this.motionSlot);
+      this.resetSlot(this.panelSlot);
+      this.resetSlot(this.chromeSlot);
+      this.lastMotionFrameIndex = -1;
+      this.lastPanelFrameIndex = -1;
+      this.lastChromeKey = "";
+      this.outputBudgetBytes = this.outputBytesPerSecond;
+      this.lastBudgetAtMs = Date.now();
+      this.motionSlot.clearedThroughRequestId = this.requestId;
+      this.panelSlot.clearedThroughRequestId = this.requestId;
+      this.chromeSlot.clearedThroughRequestId = this.requestId;
+    }
+  }
+  destroy() {
+    if (this.destroyed)
+      return;
+    this.clear();
+    this.destroyed = true;
+    const workers = [this.motionSlot.worker, this.panelSlot.worker, this.chromeSlot.worker];
+    this.motionSlot.worker = null;
+    this.panelSlot.worker = null;
+    this.chromeSlot.worker = null;
+    for (const worker of workers)
+      if (worker)
+        worker.terminate().catch(() => {
+          return;
+        });
+  }
+  render(input) {
+    if (!this.enabled || this.destroyed)
+      return;
+    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 now = Date.now();
+    const visualTick = Math.floor(now / (1000 / 60));
+    const useDynamicSplit = Boolean(this.motionSlot.worker && this.panelSlot.worker && this.chromeSlot.worker && this.transport === "png" && process.env.RIG_OPENTUI_DYNAMIC_SPLIT !== "0");
+    if (!useDynamicSplit) {
+      const frameIndex = Math.floor(now / this.frameIntervalMs);
+      if (!input.force && frameIndex === this.lastMotionFrameIndex)
+        return;
+      this.scheduleRender(this.motionSlot, { ...input, tick: visualTick, layer: "full" }, this.imageId, -10, input.force);
+      this.lastMotionFrameIndex = frameIndex;
+      return;
+    }
+    const motionFrameIndex = Math.floor(now / this.frameIntervalMs);
+    if ((input.force || motionFrameIndex !== this.lastMotionFrameIndex) && this.outputBudgetBytes >= MIN_BACKGROUND_BUDGET_BYTES) {
+      this.scheduleRender(this.motionSlot, { ...input, pixelSize: scaledPixelSize(input.pixelSize, droneLayerScale(), input.layout), panels: [], tick: visualTick, layer: "background" }, this.imageId, -30, input.force);
+      this.lastMotionFrameIndex = motionFrameIndex;
+    }
+    const panelFrameIndex = Math.floor(now / this.panelIntervalMs);
+    if ((input.force || panelFrameIndex !== this.lastPanelFrameIndex) && this.outputBudgetBytes >= MIN_PANEL_BUDGET_BYTES) {
+      this.scheduleRender(this.panelSlot, { ...input, pixelSize: scaledPixelSize(input.pixelSize, panelLayerScale(), input.layout), tick: visualTick, layer: "panel-patches" }, this.imageId, -12, input.force, this.panelImageIds);
+      this.lastPanelFrameIndex = panelFrameIndex;
+    }
+    const chromeInput = { ...input, tick: 0, layer: "panel-chrome" };
+    const chromeKey = imageVisualFrameKey(chromeInput);
+    if (input.force || chromeKey !== this.lastChromeKey) {
+      this.scheduleRender(this.chromeSlot, chromeInput, this.imageId, -8, input.force, this.panelChromeImageIds);
+      this.lastChromeKey = chromeKey;
+    }
+  }
+  flush() {
+    if (this.pendingFrames.size === 0)
+      return false;
+    this.refillOutputBudget();
+    if (this.isOutputBackedUp()) {
+      const chrome = this.pendingFrames.get("panel-chrome");
+      this.pendingFrames.clear();
+      if (chrome)
+        this.pendingFrames.set("panel-chrome", chrome);
+      return false;
+    }
+    const framePriority = (frame) => {
+      const layer = pendingLayerKey(frame.key);
+      if (layer === "panel-chrome")
+        return 0;
+      if (layer === "background")
+        return 1;
+      if (layer === "panel-patches")
+        return 2;
+      return 2;
+    };
+    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);
+      if (candidateBytes <= this.outputBudgetBytes) {
+        selected.push(frame);
+        sequence = candidate;
+        byteLength = candidateBytes;
+      } else if (pendingLayerKey(frame.key) === "panel-chrome") {
+        retained.set(pendingLayerKey(frame.key), 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?.();
+    return accepted;
+  }
+  createSlot() {
+    return { worker: null, busy: false, queuedRequest: null, inFlightKey: "", queuedKey: "", clearedThroughRequestId: 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;
+  }
+  scheduleRender(slot, input, imageId, zIndex, force, imageIds) {
+    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
+    };
+    if (slot.worker) {
+      this.enqueueWorkerRender(slot, request);
+      return;
+    }
+    this.renderSync(slot, request);
+  }
+  startWorker(slot) {
+    const worker = createImageWorker();
+    if (!worker)
+      return;
+    slot.worker = worker;
+    worker.on("message", (message) => this.handleWorkerMessage(slot, message));
+    worker.once("error", () => this.disableWorker(slot));
+    worker.once("exit", () => this.disableWorker(slot));
+  }
+  disableWorker(slot) {
+    if (this.destroyed)
+      return;
+    slot.worker = null;
+    slot.busy = false;
+    slot.inFlightKey = "";
+    const queued = slot.queuedRequest;
+    slot.queuedRequest = null;
+    slot.queuedKey = "";
+    if (queued?.layer === "full")
+      this.renderSync(slot, queued);
+  }
+  enqueueWorkerRender(slot, request) {
+    if (!slot.worker) {
+      this.renderSync(slot, request);
+      return;
+    }
+    if (slot.busy) {
+      slot.queuedRequest = request;
+      slot.queuedKey = request.key;
+      return;
+    }
+    this.dispatchWorkerRender(slot, request);
+  }
+  dispatchWorkerRender(slot, request) {
+    if (!slot.worker) {
+      this.renderSync(slot, request);
+      return;
+    }
+    slot.busy = true;
+    slot.inFlightKey = request.key;
+    slot.worker.postMessage(request);
+  }
+  handleWorkerMessage(slot, message) {
+    if (this.destroyed || !message || typeof message !== "object")
+      return;
+    const response = message;
+    slot.busy = false;
+    slot.inFlightKey = "";
+    if (response.requestId <= slot.clearedThroughRequestId)
+      return;
+    if (response.error) {
+      this.disableWorker(slot);
+      return;
+    }
+    if (response.sequence && !this.isKnownKey(slot, response.key) && (!this.isOutputBackedUp() || pendingLayerKey(response.key) === "panel-chrome")) {
+      this.stageFrame({ key: response.key, sequence: response.sequence });
+    }
+    const next = slot.queuedRequest;
+    slot.queuedRequest = null;
+    slot.queuedKey = "";
+    if (next && !this.isKnownKey(slot, next.key))
+      this.dispatchWorkerRender(slot, next);
+  }
+  renderSync(slot, request) {
+    const result = renderImageVisualFrame(request);
+    if (!result || this.isKnownKey(slot, result.key) || this.isOutputBackedUp())
+      return;
+    this.stageFrame(result);
+  }
+}
+var BG, PANEL, PANEL_HEADER, PANEL_LINE, LIME, LIME_DIM, CYAN, MAGENTA, INK_DIM, PNG_SIGNATURE, CRC_TABLE, MAX_IMAGE_BYTES, KITTY_CHUNK_SIZE = 4096, PANEL_BLUR_SCALE = 5, PANEL_MASK_CACHE_LIMIT = 16, ZLIB_LEVEL = 1, DEFAULT_DRONE_LAYER_SCALE = 0.18, DEFAULT_IMAGE_FPS = 24, panelMaskCache, BG_WORD, RECENT_WRITTEN_LIMIT = 24, DEFAULT_PANEL_FPS = 24, DEFAULT_PANEL_LAYER_SCALE = 0.22, DEFAULT_IMAGE_OUTPUT_BACKLOG_BYTES, DEFAULT_IMAGE_OUTPUT_BYTES_PER_SECOND, MIN_BACKGROUND_BUDGET_BYTES, MIN_PANEL_BUDGET_BYTES;
+var init_image_visual_layer = __esm(() => {
+  BG = [7, 8, 9, 255];
+  PANEL = [16, 17, 21, 184];
+  PANEL_HEADER = [16, 17, 21, 190];
+  PANEL_LINE = [255, 255, 255, 24];
+  LIME = [204, 255, 77, 255];
+  LIME_DIM = [169, 214, 63, 255];
+  CYAN = [86, 216, 255, 255];
+  MAGENTA = [255, 121, 176, 255];
+  INK_DIM = [108, 110, 121, 255];
+  PNG_SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
+  CRC_TABLE = makeCrcTable();
+  MAX_IMAGE_BYTES = 48 * 1024 * 1024;
+  panelMaskCache = new Map;
+  BG_WORD = rgbaWord(BG);
+  DEFAULT_IMAGE_OUTPUT_BACKLOG_BYTES = 256 * 1024;
+  DEFAULT_IMAGE_OUTPUT_BYTES_PER_SECOND = 850 * 1024;
+  MIN_BACKGROUND_BUDGET_BYTES = 24 * 1024;
+  MIN_PANEL_BUDGET_BYTES = 56 * 1024;
+});
+
+// packages/cli/src/app-opentui/render/image-visual-layer-native-canvas.ts
+var exports_image_visual_layer_native_canvas = {};
+__export(exports_image_visual_layer_native_canvas, {
+  renderNativeCanvasImageVisualFrame: () => renderNativeCanvasImageVisualFrame
+});
+import { mkdirSync, writeFileSync } from "fs";
+import { join } from "path";
+import { tmpdir } from "os";
+import { clearAllCache, createCanvas } from "@napi-rs/canvas";
+function droneLayerScale2() {
+  const raw = Number.parseFloat(process.env.RIG_OPENTUI_DRONE_SCALE ?? "");
+  if (Number.isFinite(raw) && raw > 0)
+    return Math.max(0.15, Math.min(1, raw));
+  return DEFAULT_DRONE_LAYER_SCALE2;
+}
+function kittyTransmission() {
+  return process.env.RIG_OPENTUI_KITTY_TRANSMISSION === "temp-file" ? "temp-file" : "direct";
+}
+function motionDensity() {
+  const raw = Number.parseFloat(process.env.RIG_OPENTUI_MOTION_DENSITY ?? "");
+  if (Number.isFinite(raw) && raw > 0)
+    return Math.max(0.2, Math.min(1.4, raw));
+  return DEFAULT_MOTION_DENSITY;
+}
+function motionSpeed() {
+  const raw = Number.parseFloat(process.env.RIG_OPENTUI_MOTION_SPEED ?? "");
+  if (Number.isFinite(raw) && raw > 0)
+    return Math.max(0.25, Math.min(1.5, raw));
+  return DEFAULT_MOTION_SPEED;
+}
+function resetContext(ctx, width, height) {
+  ctx.reset();
+  ctx.clearRect(0, 0, width, height);
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+}
+function reusableCanvas(width, height) {
+  if (!frameCanvas || !frameCtx || frameCanvas.width !== width || frameCanvas.height !== height) {
+    frameCanvas = createCanvas(width, height);
+    frameCtx = frameCanvas.getContext("2d");
+  }
+  resetContext(frameCtx, width, height);
+  return { canvas: frameCanvas, ctx: frameCtx };
+}
+function reusableSceneCanvas(width, height) {
+  if (!sceneCanvas || !sceneCtx || sceneCanvas.width !== width || sceneCanvas.height !== height) {
+    sceneCanvas = createCanvas(width, height);
+    sceneCtx = sceneCanvas.getContext("2d");
+  }
+  resetContext(sceneCtx, width, height);
+  return { canvas: sceneCanvas, ctx: sceneCtx };
+}
+function reusablePatchCanvas(width, height) {
+  if (!patchCanvas || !patchCtx || patchCanvas.width !== width || patchCanvas.height !== height) {
+    patchCanvas = createCanvas(width, height);
+    patchCtx = patchCanvas.getContext("2d");
+  }
+  resetContext(patchCtx, width, height);
+  return { canvas: patchCanvas, ctx: patchCtx };
+}
+function css(color, alphaScale = 1) {
+  return `rgba(${color[0]},${color[1]},${color[2]},${Math.max(0, Math.min(1, color[3] / 255 * alphaScale))})`;
+}
+function visualSceneKind2(scene) {
+  if (scene === "tasks")
+    return "loop";
+  if (scene === "help")
+    return "carrier";
+  return "dispatch";
+}
+function seededUnit2(seed) {
+  let value = seed >>> 0;
+  value = value * 1664525 + 1013904223 >>> 0;
+  return value / 4294967295;
+}
+function sceneCore2(width, height, kind) {
+  if (kind === "dispatch")
+    return { x: width * 0.3, y: height * 0.45 };
+  if (kind === "carrier")
+    return { x: width * 0.5, y: height * 0.54 };
+  return { x: width * 0.09, y: height * 0.56 };
+}
+function dispatchLane2(width, index, count) {
+  const a = seededUnit2(28672 + index * 101);
+  const b = seededUnit2(36864 + index * 131);
+  const c = seededUnit2(45056 + index * 151);
+  const ang = (-0.9 + 1.8 * (index / Math.max(1, count - 1))) * (Math.PI * 0.5);
+  return { ang, len: width * (0.32 + a * 0.42), curve: (b - 0.5) * 0.7, phase: c * Math.PI * 2 };
+}
+function lanePoint2(width, height, lane, p, kind = "dispatch") {
+  const core = sceneCore2(width, height, kind);
+  const dist = lane.len * p;
+  const bend = Math.sin(p * Math.PI) * lane.curve * Math.min(width, height) * 0.035;
+  const ux = Math.cos(lane.ang);
+  const uy = Math.sin(lane.ang);
+  return { x: core.x + ux * dist + -uy * bend, y: core.y + uy * dist + ux * bend };
+}
+function drawGlow2(ctx, cx, cy, radius, color, alpha = 0.18) {
+  if (radius <= 0)
+    return;
+  const gradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
+  gradient.addColorStop(0, css(color, alpha));
+  gradient.addColorStop(0.45, css(color, alpha * 0.28));
+  gradient.addColorStop(1, css(color, 0));
+  ctx.fillStyle = gradient;
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.fill();
+}
+function drawDisc2(ctx, cx, cy, radius, color, alpha = 1) {
+  if (radius <= 0)
+    return;
+  ctx.fillStyle = css(color, alpha);
+  ctx.beginPath();
+  ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+  ctx.fill();
+}
+function drawLine2(ctx, x0, y0, x1, y1, color, alpha = 0.5, thickness = 1.4) {
+  ctx.save();
+  ctx.strokeStyle = css(color, alpha);
+  ctx.lineWidth = thickness * 2;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "round";
+  ctx.beginPath();
+  ctx.moveTo(x0, y0);
+  ctx.lineTo(x1, y1);
+  ctx.stroke();
+  ctx.restore();
+}
+function drawDrone2(ctx, x, y, scale, tick, color) {
+  const speed = motionSpeed();
+  const wobble = Math.sin(tick * 0.055 * speed) * scale * 0.35;
+  const cy = y + wobble;
+  drawGlow2(ctx, x, cy, scale * 7, color, 0.18);
+  drawDisc2(ctx, x, cy, scale * 1.45, color, 0.92);
+  drawDisc2(ctx, x, cy, scale * 0.55, [235, 255, 176, 255], 0.85);
+  const arm = scale * 4.1;
+  const rotor = scale * 1.6;
+  const arms = [[-arm, -arm * 0.72], [arm, -arm * 0.72], [-arm, arm * 0.72], [arm, arm * 0.72]];
+  for (const [dx, dy] of arms) {
+    drawLine2(ctx, x, cy, x + dx, cy + dy, color, 0.42, Math.max(1, scale * 0.22));
+    drawGlow2(ctx, x + dx, cy + dy, rotor * 2.6, color, 0.1);
+    drawDisc2(ctx, x + dx, cy + dy, rotor, color, 0.34 + 0.12 * Math.sin(tick * 0.15 * speed));
+  }
+}
+function drawMarketingRails2(ctx, width, height, kind, tick) {
+  const density = motionDensity();
+  const speed = motionSpeed();
+  const ys = kind === "loop" ? [0.18, 0.5, 0.82] : kind === "carrier" ? [0.24, 0.54, 0.82] : [0.18, 0.58, 0.82];
+  ys.forEach((ratio, index) => {
+    const y = height * ratio + Math.sin(tick * 0.018 * speed + index) * Math.max(2, height * 0.0025);
+    const color = index === 2 ? CYAN2 : index === 1 ? LIME2 : LIME_DIM2;
+    drawLine2(ctx, width * 0.06, y, width * 0.94, y + Math.sin(index) * height * 0.002, color, index === 1 ? 0.09 : 0.055, Math.max(0.8, height * 0.0012));
+    const spacing = (0.18 + index * 0.02) / density;
+    for (let p = (tick * 0.004 * speed + index * 0.21) % 1;p < 1; p += spacing) {
+      const x = width * (0.06 + 0.88 * p);
+      drawDisc2(ctx, x, y, Math.max(1.2, height * (0.0017 + index * 0.0004)), color, 0.18);
+      drawGlow2(ctx, x, y, Math.max(5, height * 0.006), color, 0.026);
+    }
+  });
+}
+function drawDispatchScene2(ctx, width, height, tick) {
+  const density = motionDensity();
+  const speed = motionSpeed();
+  const core = sceneCore2(width, height, "dispatch");
+  const min = Math.min(width, height);
+  drawGlow2(ctx, core.x, core.y, min * 0.085, LIME2, 0.12);
+  drawDisc2(ctx, core.x, core.y, min * 0.0065, LIME2, 0.85);
+  const laneCount = Math.max(4, Math.round((width < 1000 ? 7 : 12) * (0.65 + density * 0.35)));
+  const lanes = Array.from({ length: laneCount }, (_, index) => dispatchLane2(width, index, laneCount));
+  lanes.forEach((lane) => {
+    let prev = lanePoint2(width, height, lane, 0);
+    ctx.beginPath();
+    ctx.moveTo(prev.x, prev.y);
+    for (let step = 1;step <= 32; step += 1) {
+      const next = lanePoint2(width, height, lane, step / 32);
+      ctx.lineTo(next.x, next.y);
+      prev = next;
+    }
+    ctx.strokeStyle = css(lane.phase > Math.PI ? CYAN2 : LIME_DIM2, 0.045);
+    ctx.lineWidth = Math.max(0.7, min * 0.0009) * 2;
+    ctx.lineCap = "round";
+    ctx.stroke();
+  });
+  const packets = Math.max(24, Math.round((width < 1000 ? 70 : 150) * density));
+  for (let i = 0;i < packets; i += 1) {
+    const lane = lanes[i % lanes.length];
+    const packetSpeed = (0.003 + seededUnit2(12288 + i * 17) * 0.009) * speed;
+    const p = (seededUnit2(16384 + i * 19) + tick * packetSpeed) % 1;
+    const pt = lanePoint2(width, height, lane, p);
+    const wobble = (seededUnit2(20480 + i * 23) - 0.5) * min * 0.012;
+    const fade = p < 0.1 ? p / 0.1 : p > 0.88 ? (1 - p) / 0.12 : 1;
+    const color = seededUnit2(24576 + i * 29) < 0.22 ? CYAN2 : LIME_DIM2;
+    const y = pt.y + wobble * Math.sin(p * Math.PI * 2);
+    drawLine2(ctx, pt.x - min * 0.012, y - min * 0.002, pt.x, y, color, 0.08 * fade, Math.max(0.7, min * 0.0008));
+    drawDisc2(ctx, pt.x, y, Math.max(1.3, min * 0.0022), color, 0.5 * fade);
+    drawGlow2(ctx, pt.x, y, Math.max(4, min * 0.008), color, 0.045 * fade);
+  }
+  const droneCount = Math.max(2, Math.round((width < 1000 ? 4 : 8) * density));
+  for (let i = 0;i < droneCount; i += 1) {
+    const lane = lanes[i % lanes.length];
+    const p = (tick * 0.002 * speed + i * 0.13) % 1;
+    const pt = lanePoint2(width, height, lane, p);
+    drawDrone2(ctx, pt.x, pt.y + Math.sin(tick * 0.04 * speed + i) * min * 0.004, min * (0.006 + i % 2 * 0.0015), tick + i * 11, i % 3 === 0 ? CYAN2 : LIME_DIM2);
+  }
+}
+function drawLoopScene2(ctx, width, height, tick) {
+  const density = motionDensity();
+  const speed = motionSpeed();
+  const min = Math.min(width, height);
+  const y = height * 0.56;
+  const x0 = width * 0.09;
+  const x1 = width * 0.91;
+  drawLine2(ctx, x0, y, x1, y, LIME_DIM2, 0.12, Math.max(0.8, min * 0.001));
+  const gates = width < 1000 ? 4 : 5;
+  const active = Math.floor(tick * speed / 20) % gates;
+  for (let i = 0;i < gates; i += 1) {
+    const x = x0 + (x1 - x0) * (i / Math.max(1, gates - 1));
+    const color = i === active ? LIME2 : i <= active ? LIME_DIM2 : INK_DIM2;
+    drawLine2(ctx, x, y - min * 0.05, x, y + min * 0.05, color, i === active ? 0.25 : 0.08, Math.max(0.8, min * 0.001));
+    drawDisc2(ctx, x, y, i === active ? min * 0.006 : min * 0.0035, color, i === active ? 0.72 : 0.25);
+    drawGlow2(ctx, x, y, i === active ? min * 0.018 : min * 0.01, color, i === active ? 0.1 : 0.035);
+  }
+  const packets = Math.max(16, Math.round((width < 1000 ? 36 : 84) * density));
+  for (let i = 0;i < packets; i += 1) {
+    const p = (seededUnit2(33024 + i * 13) + tick * (0.0022 + seededUnit2(33280 + i * 17) * 0.004) * speed) % 1;
+    const x = x0 + (x1 - x0) * p;
+    const segment = Math.min(gates - 1, Math.floor(p * gates));
+    const color = segment < active ? LIME_DIM2 : segment === active ? CYAN2 : INK_DIM2;
+    const py = y + (seededUnit2(33536 + i * 19) - 0.5) * min * 0.018 * Math.sin(p * Math.PI * 2);
+    drawLine2(ctx, x - min * 0.014, py, x, py, color, 0.1, Math.max(0.7, min * 0.0008));
+    drawDisc2(ctx, x, py, Math.max(1.2, min * 0.002), color, color === INK_DIM2 ? 0.22 : 0.58);
+  }
+  drawDrone2(ctx, x0 + (x1 - x0) * (tick * 0.003 * speed % 1), y - min * 0.04, min * 0.0065, tick, LIME_DIM2);
+  drawDrone2(ctx, x0 + (x1 - x0) * ((tick * 0.002 * speed + 0.5) % 1), y + min * 0.036, min * 0.0055, tick + 40, MAGENTA2);
+}
+function drawCarrierScene2(ctx, width, height, tick) {
+  const density = motionDensity();
+  const speed = motionSpeed();
+  const min = Math.min(width, height);
+  const core = sceneCore2(width, height, "carrier");
+  drawGlow2(ctx, core.x, core.y, min * 0.075, LIME2, 0.12);
+  drawDisc2(ctx, core.x, core.y, min * 0.0065, LIME2, 0.92);
+  const nodes = Math.max(4, Math.round((width < 1000 ? 5 : 7) * (0.75 + density * 0.25)));
+  const rx = width * 0.36;
+  const ry = height * 0.22;
+  for (let i = 0;i < nodes; i += 1) {
+    const a = i / nodes * Math.PI * 2 - Math.PI / 2 + tick * 0.006 * speed;
+    const x = core.x + Math.cos(a) * rx;
+    const y = core.y + Math.sin(a) * ry;
+    const color = i % 2 ? CYAN2 : LIME_DIM2;
+    drawLine2(ctx, core.x, core.y, x, y, color, 0.055, Math.max(0.7, min * 0.0008));
+    drawGlow2(ctx, x, y, min * 0.018, color, 0.055);
+    drawDisc2(ctx, x, y, min * 0.0048, color, 0.62);
+    drawDrone2(ctx, x, y - min * 0.018, min * 0.005, tick + i * 9, color);
+  }
+  const packets = Math.max(14, Math.round((width < 1000 ? 30 : 72) * density));
+  for (let i = 0;i < packets; i += 1) {
+    const lane = i % nodes;
+    const a = lane / nodes * Math.PI * 2 - Math.PI / 2 + tick * 0.006 * speed;
+    const nx = core.x + Math.cos(a) * rx;
+    const ny = core.y + Math.sin(a) * ry;
+    const p = (seededUnit2(37120 + i * 37) + tick * (0.003 + seededUnit2(37376 + i * 43) * 0.009) * speed) % 1;
+    const x = core.x + (nx - core.x) * p;
+    const y = core.y + (ny - core.y) * p;
+    const color = seededUnit2(37632 + i * 47) < 0.35 ? CYAN2 : LIME_DIM2;
+    drawDisc2(ctx, x, y, Math.max(1.2, min * 0.002), color, 0.48);
+    drawGlow2(ctx, x, y, min * 0.008, color, 0.035);
+  }
+}
+function drawBackground2(ctx, width, height, tick, scene) {
+  ctx.fillStyle = css(BG2);
+  ctx.fillRect(0, 0, width, height);
+  const kind = visualSceneKind2(scene);
+  drawGlow2(ctx, width * 0.82, height * 0.04, Math.min(width, height) * 0.22, LIME2, 0.035);
+  drawGlow2(ctx, width * 0.12, height * 0.18, Math.min(width, height) * 0.17, CYAN2, 0.025);
+  drawMarketingRails2(ctx, width, height, kind, tick);
+  if (kind === "loop")
+    drawLoopScene2(ctx, width, height, tick);
+  else if (kind === "carrier")
+    drawCarrierScene2(ctx, width, height, tick);
+  else
+    drawDispatchScene2(ctx, width, height, tick);
+}
+function drawScaledDroneLayer(ctx, width, height, tick, scene) {
+  const scale = droneLayerScale2();
+  if (scale >= 0.99) {
+    drawBackground2(ctx, width, height, tick, scene);
+    return;
+  }
+  const sceneWidth = Math.max(1, Math.round(width * scale));
+  const sceneHeight = Math.max(1, Math.round(height * scale));
+  const { canvas, ctx: sceneCtx2 } = reusableSceneCanvas(sceneWidth, sceneHeight);
+  drawBackground2(sceneCtx2, sceneWidth, sceneHeight, tick, scene);
+  ctx.save();
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(canvas, 0, 0, sceneWidth, sceneHeight, 0, 0, width, height);
+  ctx.restore();
+}
+function panelPlacement(layout, panel, size) {
+  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 > 8 && height > 8 ? { left, top, width, height, leftCells, topCells, widthCells, heightCells } : null;
+}
+function panelRect2(layout, panel, size) {
+  return panelPlacement(layout, panel, size);
+}
+function clipRoundRect(ctx, rect, radius) {
+  ctx.beginPath();
+  ctx.roundRect(rect.left, rect.top, rect.width, rect.height, radius);
+  ctx.clip();
+}
+function strokeRoundRect(ctx, rect, radius) {
+  ctx.beginPath();
+  ctx.roundRect(rect.left + 0.75, rect.top + 0.75, rect.width - 1.5, rect.height - 1.5, Math.max(1, radius - 0.75));
+  ctx.stroke();
+}
+function compositePanel2(ctx, sourceCanvas, rect, headerPx) {
+  const radius = Math.max(14, Math.min(34, Math.round(Math.min(rect.width, rect.height) * 0.035)));
+  const { canvas: patch, ctx: patchCtx2 } = reusablePatchCanvas(rect.width, rect.height);
+  patchCtx2.drawImage(sourceCanvas, rect.left, rect.top, rect.width, rect.height, 0, 0, rect.width, rect.height);
+  ctx.save();
+  clipRoundRect(ctx, rect, radius);
+  ctx.filter = `blur(${Math.max(10, Math.round(Math.min(rect.width, rect.height) * 0.018))}px)`;
+  ctx.drawImage(patch, 0, 0, rect.width, rect.height, rect.left, rect.top, rect.width, rect.height);
+  ctx.filter = "none";
+  ctx.fillStyle = css(PANEL2);
+  ctx.fillRect(rect.left, rect.top, rect.width, rect.height);
+  ctx.fillStyle = css(PANEL_HEADER2);
+  ctx.fillRect(rect.left, rect.top, rect.width, headerPx);
+  ctx.restore();
+  ctx.save();
+  ctx.strokeStyle = css(PANEL_LINE2, 0.8);
+  ctx.lineWidth = 1.5;
+  strokeRoundRect(ctx, rect, radius);
+  ctx.restore();
+  const dividerY = Math.round(rect.top + headerPx);
+  if (dividerY > rect.top && dividerY < rect.top + rect.height) {
+    drawLine2(ctx, rect.left + radius, dividerY, rect.left + rect.width - radius, dividerY, PANEL_LINE2, 0.28, 0.7);
+  }
+}
+function compositePanelPatch(ctx, sourceCanvas, width, height, headerPx) {
+  const rect = { left: 0, top: 0, width, height };
+  const radius = Math.max(14, Math.min(34, Math.round(Math.min(width, height) * 0.035)));
+  ctx.save();
+  clipRoundRect(ctx, rect, radius);
+  ctx.filter = `blur(${Math.max(10, Math.round(Math.min(width, height) * 0.018))}px)`;
+  ctx.drawImage(sourceCanvas, 0, 0, width, height);
+  ctx.filter = "none";
+  ctx.fillStyle = css(PANEL2);
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = css(PANEL_HEADER2);
+  ctx.fillRect(0, 0, width, headerPx);
+  ctx.restore();
+}
+function compositePanelChromePatch(ctx, width, height, headerPx) {
+  const radius = Math.max(14, Math.min(34, Math.round(Math.min(width, height) * 0.035)));
+  ctx.clearRect(0, 0, width, height);
+  const dividerY = Math.round(headerPx);
+  if (dividerY > 0 && dividerY < height)
+    drawLine2(ctx, radius, dividerY, width - radius, dividerY, PANEL_LINE2, 0.22, 0.65);
+}
+async function encodePanelPatch(input, placement, imageId, headerPx) {
+  const { canvas: sourceCanvas, ctx: sourceCtx } = reusableSceneCanvas(placement.width, placement.height);
+  sourceCtx.save();
+  sourceCtx.translate(-placement.left, -placement.top);
+  drawScaledDroneLayer(sourceCtx, input.pixelSize.width, input.pixelSize.height, input.tick, input.scene);
+  sourceCtx.restore();
+  const { canvas: patchCanvas2, ctx: patchCtx2 } = reusablePatchCanvas(placement.width, placement.height);
+  compositePanelPatch(patchCtx2, sourceCanvas, placement.width, placement.height, headerPx);
+  const png = await patchCanvas2.encode("png");
+  const sequence = kittyPngFrameSequence(png, { columns: Math.max(1, Math.round(placement.widthCells)), rows: Math.max(1, Math.round(placement.heightCells)), imageId, zIndex: -12 });
+  return `\x1B[${Math.max(1, Math.round(placement.topCells) + 1)};${Math.max(1, Math.round(placement.leftCells) + 1)}H${sequence}`;
+}
+async function encodePanelChromePatch(placement, imageId, headerPx) {
+  const { canvas: patchCanvas2, ctx: patchCtx2 } = reusablePatchCanvas(placement.width, placement.height);
+  compositePanelChromePatch(patchCtx2, placement.width, placement.height, headerPx);
+  const png = await patchCanvas2.encode("png");
+  const sequence = kittyPngFrameSequence(png, { columns: Math.max(1, Math.round(placement.widthCells)), rows: Math.max(1, Math.round(placement.heightCells)), imageId, zIndex: -8 });
+  return `\x1B[${Math.max(1, Math.round(placement.topCells) + 1)};${Math.max(1, Math.round(placement.leftCells) + 1)}H${sequence}`;
+}
+function kittyImageSequence2(base64, options) {
+  const params = [`a=T`, `f=100`, `q=2`, `C=1`, `c=${options.columns}`, `r=${options.rows}`, `i=${options.imageId}`, `z=${options.zIndex}`];
+  if (base64.length <= KITTY_CHUNK_SIZE2)
+    return `\x1B_G${params.join(",")};${base64}\x1B\\`;
+  const chunks = [];
+  for (let offset = 0;offset < base64.length; offset += KITTY_CHUNK_SIZE2) {
+    const part = base64.slice(offset, offset + KITTY_CHUNK_SIZE2);
+    const last = offset + KITTY_CHUNK_SIZE2 >= base64.length;
+    chunks.push(`\x1B_G${offset === 0 ? `${params.join(",")},` : ""}m=${last ? 0 : 1};${part}\x1B\\`);
+  }
+  return chunks.join("");
+}
+function kittyTempFileImageSequence(png, options) {
+  mkdirSync(TEMP_GRAPHICS_DIR, { recursive: true });
+  const path = join(TEMP_GRAPHICS_DIR, `frame-${process.pid}-${Date.now()}-${encodedFrames}.tty-graphics-protocol.png`);
+  writeFileSync(path, png);
+  const payload = Buffer.from(path).toString("base64");
+  const params = [`a=T`, `f=100`, `t=t`, `S=${png.byteLength}`, `q=2`, `C=1`, `c=${options.columns}`, `r=${options.rows}`, `i=${options.imageId}`, `z=${options.zIndex}`];
+  return `\x1B_G${params.join(",")};${payload}\x1B\\`;
+}
+function kittyPngFrameSequence(png, options) {
+  if (kittyTransmission() === "temp-file")
+    return kittyTempFileImageSequence(png, options);
+  return kittyImageSequence2(png.toString("base64"), options);
+}
+async function renderNativeCanvasImageVisualFrame(input) {
+  if (input.transport !== "png")
+    return null;
+  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_BYTES2)
+    return null;
+  const layer = input.layer ?? "full";
+  if (layer === "split") {
+    const backgroundScale = droneLayerScale2();
+    const backgroundWidth = Math.max(input.layout.width, Math.round(width * backgroundScale));
+    const backgroundHeight = Math.max(input.layout.height, Math.round(height * backgroundScale));
+    const { canvas: backgroundCanvas, ctx: backgroundCtx } = reusableCanvas(backgroundWidth, backgroundHeight);
+    drawBackground2(backgroundCtx, backgroundWidth, backgroundHeight, input.tick, input.scene);
+    const backgroundPng = await backgroundCanvas.encode("png");
+    const sequences = [kittyPngFrameSequence(backgroundPng, { columns: input.layout.width, rows: input.layout.height, imageId: input.imageId, zIndex: -30 })];
+    let panelIndex = 0;
+    for (const panel of input.panels) {
+      if (panel.chrome !== "ad-terminal")
+        continue;
+      const placement = panelPlacement(input.layout, panel, { width, height });
+      if (!placement)
+        continue;
+      const imageId = input.imageIds?.[panelIndex] ?? (input.imageId + 1000 + panelIndex >>> 0 || panelIndex + 1);
+      const cellH = height / input.layout.height;
+      const headerPx = Math.max(cellH * 3, (panel.headerHeight ?? 3) * cellH);
+      sequences.push(await encodePanelPatch(input, placement, imageId, headerPx));
+      panelIndex += 1;
+    }
+    encodedFrames += 1;
+    if (encodedFrames % SKIA_CACHE_CLEAR_INTERVAL === 0)
+      clearAllCache();
+    return {
+      key: imageVisualFrameKey(input),
+      sequence: sequences.join("")
+    };
+  }
+  if (layer === "panel-patches") {
+    const sequences = [];
+    let panelIndex = 0;
+    for (const panel of input.panels) {
+      if (panel.chrome !== "ad-terminal")
+        continue;
+      const placement = panelPlacement(input.layout, panel, { width, height });
+      if (!placement)
+        continue;
+      const imageId = input.imageIds?.[panelIndex] ?? (input.imageId + 1000 + panelIndex >>> 0 || panelIndex + 1);
+      const cellH = height / input.layout.height;
+      const headerPx = Math.max(cellH * 3, (panel.headerHeight ?? 3) * cellH);
+      sequences.push(await encodePanelPatch(input, placement, imageId, headerPx));
+      panelIndex += 1;
+    }
+    encodedFrames += 1;
+    if (encodedFrames % SKIA_CACHE_CLEAR_INTERVAL === 0)
+      clearAllCache();
+    return {
+      key: imageVisualFrameKey(input),
+      sequence: sequences.join("")
+    };
+  }
+  if (layer === "panel-chrome") {
+    const sequences = [];
+    let panelIndex = 0;
+    for (const panel of input.panels) {
+      if (panel.chrome !== "ad-terminal")
+        continue;
+      const placement = panelPlacement(input.layout, panel, { width, height });
+      if (!placement)
+        continue;
+      const imageId = input.imageIds?.[panelIndex] ?? (input.imageId + 2000 + panelIndex >>> 0 || panelIndex + 1);
+      const cellH = height / input.layout.height;
+      const headerPx = Math.max(cellH * 3, (panel.headerHeight ?? 3) * cellH);
+      sequences.push(await encodePanelChromePatch(placement, imageId, headerPx));
+      panelIndex += 1;
+    }
+    encodedFrames += 1;
+    if (encodedFrames % SKIA_CACHE_CLEAR_INTERVAL === 0)
+      clearAllCache();
+    return {
+      key: imageVisualFrameKey(input),
+      sequence: sequences.join("")
+    };
+  }
+  const { canvas, ctx } = reusableCanvas(width, height);
+  if (layer === "background") {
+    drawBackground2(ctx, width, height, input.tick, input.scene);
+  } else if (layer === "panels") {
+    const { canvas: sourceCanvas, ctx: sourceCtx } = reusableSceneCanvas(width, height);
+    drawScaledDroneLayer(sourceCtx, width, height, input.tick, input.scene);
+    for (const panel of input.panels) {
+      if (panel.chrome !== "ad-terminal")
+        continue;
+      const rect = panelRect2(input.layout, panel, { width, height });
+      if (!rect)
+        continue;
+      const cellH = height / input.layout.height;
+      const headerPx = Math.max(cellH * 3, (panel.headerHeight ?? 3) * cellH);
+      compositePanel2(ctx, sourceCanvas, rect, headerPx);
+    }
+  } else {
+    drawScaledDroneLayer(ctx, width, height, input.tick, input.scene);
+    for (const panel of input.panels) {
+      if (panel.chrome !== "ad-terminal")
+        continue;
+      const rect = panelRect2(input.layout, panel, { width, height });
+      if (!rect)
+        continue;
+      const cellH = height / input.layout.height;
+      const headerPx = Math.max(cellH * 3, (panel.headerHeight ?? 3) * cellH);
+      compositePanel2(ctx, canvas, rect, headerPx);
+    }
+  }
+  const png = await canvas.encode("png");
+  encodedFrames += 1;
+  if (encodedFrames % SKIA_CACHE_CLEAR_INTERVAL === 0)
+    clearAllCache();
+  return {
+    key: imageVisualFrameKey(input),
+    sequence: kittyPngFrameSequence(png, { columns: input.layout.width, rows: input.layout.height, imageId: input.imageId, zIndex: input.zIndex })
+  };
+}
+var BG2, PANEL2, PANEL_HEADER2, PANEL_LINE2, LIME2, LIME_DIM2, CYAN2, MAGENTA2, INK_DIM2, KITTY_CHUNK_SIZE2 = 4096, MAX_IMAGE_BYTES2, SKIA_CACHE_CLEAR_INTERVAL = 240, DEFAULT_DRONE_LAYER_SCALE2 = 0.18, DEFAULT_MOTION_DENSITY = 0.42, DEFAULT_MOTION_SPEED = 0.55, TEMP_GRAPHICS_DIR, frameCanvas = null, frameCtx = null, sceneCanvas = null, sceneCtx = null, patchCanvas = null, patchCtx = null, encodedFrames = 0;
+var init_image_visual_layer_native_canvas = __esm(() => {
+  init_image_visual_layer();
+  BG2 = [7, 8, 9, 255];
+  PANEL2 = [16, 17, 21, 184];
+  PANEL_HEADER2 = [16, 17, 21, 190];
+  PANEL_LINE2 = [255, 255, 255, 24];
+  LIME2 = [204, 255, 77, 255];
+  LIME_DIM2 = [169, 214, 63, 255];
+  CYAN2 = [86, 216, 255, 255];
+  MAGENTA2 = [255, 121, 176, 255];
+  INK_DIM2 = [108, 110, 121, 255];
+  MAX_IMAGE_BYTES2 = 48 * 1024 * 1024;
+  TEMP_GRAPHICS_DIR = join(tmpdir(), "rig-tty-graphics-protocol");
+});
+
+// packages/cli/src/app-opentui/render/image-visual-layer-worker.ts
+init_image_visual_layer();
+import { parentPort } from "worker_threads";
+var nativeCanvasRenderer;
+async function renderFrame(request) {
+  if (process.env.RIG_OPENTUI_IMAGE_BACKEND !== "ts" && request.transport === "png") {
+    if (nativeCanvasRenderer === undefined) {
+      try {
+        const mod = await Promise.resolve().then(() => (init_image_visual_layer_native_canvas(), exports_image_visual_layer_native_canvas));
+        nativeCanvasRenderer = mod.renderNativeCanvasImageVisualFrame;
+      } catch {
+        nativeCanvasRenderer = null;
+      }
+    }
+    if (nativeCanvasRenderer) {
+      try {
+        const native = await nativeCanvasRenderer(request);
+        if (native)
+          return native;
+      } catch {
+        nativeCanvasRenderer = null;
+      }
+    }
+  }
+  return renderImageVisualFrame(request);
+}
+function isImageVisualWorkerRequest(value) {
+  if (!value || typeof value !== "object")
+    return false;
+  const record = value;
+  return typeof record.requestId === "number" && typeof record.key === "string" && typeof record.tick === "number" && typeof record.scene === "string" && typeof record.imageId === "number" && typeof record.zIndex === "number" && (record.transport === "rgba-zlib" || record.transport === "png") && typeof record.layout === "object" && typeof record.pixelSize === "object" && Array.isArray(record.panels);
+}
+var port = parentPort;
+if (!port)
+  throw new Error("image visual layer worker requires parentPort");
+port.on("message", (message) => {
+  (async () => {
+    try {
+      if (!isImageVisualWorkerRequest(message))
+        throw new Error("Invalid image visual worker request");
+      const result = await renderFrame(message);
+      const response = {
+        requestId: message.requestId,
+        key: message.key,
+        sequence: result?.sequence
+      };
+      port.postMessage(response);
+    } catch (error) {
+      const requestId = isImageVisualWorkerRequest(message) ? message.requestId : -1;
+      const key = isImageVisualWorkerRequest(message) ? message.key : "";
+      const response = {
+        requestId,
+        key,
+        error: error instanceof Error ? error.message : String(error)
+      };
+      port.postMessage(response);
+    }
+  })();
+});