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

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

@@ -0,0 +1,1834 @@
+// @bun
+// packages/cli/src/app-opentui/react/Backdrop.tsx
+import { useEffect, useRef } from "react";
+import { useRenderer } from "@opentui/react";
+
+// packages/cli/src/app-opentui/layout.ts
+var MIN_TERMINAL_WIDTH = 48;
+var MIN_TERMINAL_HEIGHT = 16;
+function computeStageLayout(width, height) {
+  const rawWidth = Math.trunc(width || 80);
+  const rawHeight = Math.trunc(height || 24);
+  const tooSmall = rawWidth < MIN_TERMINAL_WIDTH || rawHeight < MIN_TERMINAL_HEIGHT;
+  const safeWidth = Math.max(40, rawWidth);
+  const safeHeight = Math.max(18, rawHeight);
+  const compact = safeWidth < 92 || safeHeight < 30;
+  const horizontalGutter = compact ? 1 : 2;
+  const centerWidth = Math.max(36, safeWidth - horizontalGutter * 2);
+  const centerLeft = horizontalGutter;
+  const footerTop = Math.max(0, safeHeight - 1);
+  const typeBarTop = Math.max(0, footerTop - 1);
+  const centerTop = compact ? 1 : Math.max(1, Math.floor(safeHeight * 0.055));
+  const centerHeight = Math.max(6, typeBarTop - centerTop);
+  return { width: safeWidth, height: safeHeight, centerWidth, centerLeft, centerTop, centerHeight, typeBarTop, footerTop, compact, tooSmall };
+}
+
+// packages/cli/src/app-opentui/render/graphics.ts
+import { FrameBufferRenderable, RGBA } from "@opentui/core";
+
+// packages/cli/src/app-opentui/theme.ts
+import {
+  bold as otuiBold,
+  dim as otuiDim,
+  fg as otuiFg,
+  t,
+  TextAttributes
+} from "@opentui/core";
+var RIG_UI = {
+  bg: "#070809",
+  bg2: "#0b0c0e",
+  panel: "#101115",
+  panel2: "#14161b",
+  glass: "#1e2230",
+  border: "#2a2e3a",
+  ink: "#f4f5f8",
+  ink2: "#c7c9d3",
+  ink3: "#9aa0ae",
+  ink4: "#787b86",
+  lime: "#ccff4d",
+  limeDim: "#a9d63f",
+  cyan: "#56d8ff",
+  cyanDim: "#3f9fbd",
+  red: "#ff5d5d",
+  yellow: "#ffd24d",
+  magenta: "#ff79b0"
+};
+var styles = {
+  ink: otuiFg(RIG_UI.ink),
+  ink2: otuiFg(RIG_UI.ink2),
+  ink3: otuiFg(RIG_UI.ink3),
+  ink4: otuiFg(RIG_UI.ink4),
+  lime: otuiFg(RIG_UI.lime),
+  limeDim: otuiFg(RIG_UI.limeDim),
+  cyan: otuiFg(RIG_UI.cyan),
+  red: otuiFg(RIG_UI.red),
+  yellow: otuiFg(RIG_UI.yellow),
+  magenta: otuiFg(RIG_UI.magenta)
+};
+
+// packages/cli/src/app-opentui/render/ascii-fleet.ts
+var LEAD_DRONE = [
+  "  .-=-.                   .-=-.   ",
+  " ( !!! )                 ( !!! )  ",
+  "  '-=-'._               _.'-=-'   ",
+  "        '._           _.'         ",
+  "           '=$$$$$$$=.'           ",
+  "          =$$$$$$$$$$$=           ",
+  "         $$$@@@@@@@@@@$$$         ",
+  "        $$$@@        @@$$$        ",
+  "        $$@    ?     @$$$         ",
+  "        $$$@   '-'   @$$$         ",
+  "        $$$@@        @@$$$        ",
+  "         $$$@@@@@@@@@@$$$         ",
+  "          =$$$$$$$$$$$=           ",
+  "           '=$$$$$$$=.'           ",
+  "        _.'           '._         ",
+  "  .-=-.'                 '.-=-.   ",
+  " ( !!! )                 ( !!! )  ",
+  "  '-=-'                   '-=-'   "
+];
+var MINI_DRONE = [
+  "(!!!)   (!!!)",
+  "  \\%==%/  ",
+  "   %%?%%   ",
+  "  /%==%\\  ",
+  "(!!!)   (!!!)"
+];
+var ROTORS = ["---", "\\\\\\", "|||", "///"];
+var FLEET_GRID_WIDTH = 52;
+var FLEET_GRID_HEIGHT = 27;
+var FLEET = [
+  { art: MINI_DRONE, x: 0, y: 2, amp: 1, speed: 0.05, phase: 0, dx: 1, driftSpeed: 0.02 },
+  { art: MINI_DRONE, x: 39, y: 2, amp: 1, speed: 0.044, phase: 2.1, dx: 1, driftSpeed: 0.017 },
+  { art: MINI_DRONE, x: 1, y: 20, amp: 1, speed: 0.048, phase: 4.2, dx: 1, driftSpeed: 0.023 },
+  { art: MINI_DRONE, x: 38, y: 20, amp: 1, speed: 0.041, phase: 1.3, dx: 1, driftSpeed: 0.015 },
+  { art: LEAD_DRONE, x: 10, y: 5, amp: 2, speed: 0.04, phase: 0, dx: 0, driftSpeed: 0.011 }
+];
+function fleetRows(tick, options = {}) {
+  const animate = options.animate ?? true;
+  const t2 = animate ? tick : 0;
+  const blade = ROTORS[Math.floor(t2 / 4) % ROTORS.length];
+  const pulse = Math.sin(t2 * 0.07);
+  const eye = pulse > 0.45 ? "@" : pulse > -0.1 ? "o" : ".";
+  const grid = Array.from({ length: FLEET_GRID_HEIGHT }, () => Array.from({ length: FLEET_GRID_WIDTH }, () => " "));
+  for (const drone of FLEET) {
+    const yOffset = drone.y + Math.round(drone.amp * Math.sin(t2 * drone.speed + drone.phase));
+    const xOffset = drone.x + Math.round(drone.dx * Math.sin(t2 * drone.driftSpeed + drone.phase));
+    for (let row = 0;row < drone.art.length; row += 1) {
+      const source = drone.art[row];
+      const targetY = yOffset + row;
+      if (targetY < 0 || targetY >= FLEET_GRID_HEIGHT)
+        continue;
+      for (let col = 0;col < source.length; col += 1) {
+        let char = source[col];
+        if (char === " ")
+          continue;
+        const targetX = xOffset + col;
+        if (targetX < 0 || targetX >= FLEET_GRID_WIDTH)
+          continue;
+        if (source.slice(col, col + 3) === "!!!") {
+          for (let rotorIndex = 0;rotorIndex < 3; rotorIndex += 1) {
+            if (targetX + rotorIndex < FLEET_GRID_WIDTH)
+              grid[targetY][targetX + rotorIndex] = blade[rotorIndex];
+          }
+          col += 2;
+          continue;
+        }
+        if (char === "?")
+          char = eye;
+        grid[targetY][targetX] = char;
+      }
+    }
+  }
+  return grid.map((row) => row.join("").replace(/\s+$/, ""));
+}
+
+// packages/cli/src/app-opentui/render/panel-layout.ts
+function panelCellRect(layout, panel) {
+  const left = Math.max(0, Math.min(layout.width - 1, layout.centerLeft + (panel.left ?? 0)));
+  const desiredWidth = panel.width ?? layout.centerWidth;
+  const width = Math.max(1, Math.min(layout.width - left, desiredWidth));
+  const top = Math.max(0, Math.min(layout.height - 1, layout.centerTop + panel.top));
+  const height = Math.max(1, Math.min(layout.height - top, panel.height));
+  if (width <= 3 || height <= 3)
+    return null;
+  const right = left + width - 1;
+  const bottom = top + height - 1;
+  const headerHeight = panel.chrome === "ad-terminal" ? Math.max(3, Math.min(height - 2, panel.headerHeight ?? 3)) : 0;
+  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;
+var LCG_INCREMENT = 1013904223;
+var LCG_DIVISOR = 4294967295;
+var PACKET_CYAN_PROBABILITY = 0.22;
+var LANE_INTERP_STEPS = 32;
+var LANE_LEN_BASE = 0.32;
+var LANE_LEN_SPREAD = 0.42;
+var LANE_CURVE_RANGE = 0.7;
+var PACKET_SPEED_BASE = 0.003;
+var PACKET_SPEED_SPREAD = 0.009;
+var DISPATCH_LANES_COMPACT = 7;
+var DISPATCH_LANES_WIDE = 12;
+var DISPATCH_PACKETS_COMPACT = 70;
+var DISPATCH_PACKETS_WIDE = 150;
+var CARRIER_NODES_COMPACT = 5;
+var CARRIER_NODES_WIDE = 7;
+var LOOP_GATES_COMPACT = 4;
+var LOOP_GATES_WIDE = 5;
+var DISPATCH_DRONES_COMPACT = 4;
+var DISPATCH_DRONES_WIDE = 8;
+var CORE_DISPATCH_X = 0.3;
+var CORE_DISPATCH_Y = 0.45;
+var CORE_CARRIER_X = 0.5;
+var CORE_CARRIER_Y = 0.54;
+var CORE_LOOP_X = 0.09;
+var CORE_LOOP_Y = 0.56;
+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;
+var BRAILLE_SAMPLES_Y = 4;
+var TRANSPARENT = RGBA.fromValues(0, 0, 0, 0);
+var BACKDROP = RGBA.fromHex(RIG_UI.bg);
+var PANEL_BG = RGBA.fromInts(16, 17, 21, 184);
+var PANEL_HEADER_BG = RGBA.fromInts(16, 17, 21, 188);
+var PANEL_LINE = RGBA.fromInts(255, 255, 255, 20);
+var PANEL_LINE_DIM = RGBA.fromInts(255, 255, 255, 8);
+var PANEL_TEXT_DIM = RGBA.fromInts(108, 110, 121, 255);
+var AC_RGB = [204, 255, 77];
+var C2_RGB = [86, 216, 255];
+var MG_RGB = [255, 121, 176];
+var INK_RGB = [108, 110, 121];
+var BRAILLE_BITS = [
+  [1, 8],
+  [2, 16],
+  [4, 32],
+  [64, 128]
+];
+function sceneKind(scene) {
+  if (scene === "tasks")
+    return "loop";
+  if (scene === "help")
+    return "carrier";
+  return "dispatch";
+}
+function seeded(seed) {
+  let value = seed >>> 0;
+  return () => {
+    value = value * LCG_MULTIPLIER + LCG_INCREMENT >>> 0;
+    return value / LCG_DIVISOR;
+  };
+}
+function channelBuffer(canvas, channel) {
+  switch (channel) {
+    case 0:
+      return canvas.ac;
+    case 1:
+      return canvas.c2;
+    case 2:
+      return canvas.mg;
+    case 3:
+      return canvas.ink;
+  }
+}
+function addSample(canvas, channel, x, y, value) {
+  const ix = Math.trunc(x);
+  const iy = Math.trunc(y);
+  if (ix < 0 || iy < 0 || ix >= canvas.width || iy >= canvas.height)
+    return;
+  const buffer = channelBuffer(canvas, channel);
+  const index = iy * canvas.width + ix;
+  buffer[index] = Math.min(1, buffer[index] + value);
+}
+function drawDot(canvas, channel, cx, cy, radius, value) {
+  const minX = Math.floor(cx - radius);
+  const maxX = Math.ceil(cx + radius);
+  const minY = Math.floor(cy - radius);
+  const maxY = Math.ceil(cy + radius);
+  for (let y = minY;y <= maxY; y += 1) {
+    for (let x = minX;x <= maxX; x += 1) {
+      const dx = x - cx;
+      const dy = y - cy;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > radius)
+        continue;
+      const falloff = 1 - distance / Math.max(0.001, radius);
+      addSample(canvas, channel, x, y, value * (0.28 + falloff * 0.72));
+    }
+  }
+}
+function drawGlow(canvas, channel, cx, cy, radius, value) {
+  const minX = Math.floor(cx - radius);
+  const maxX = Math.ceil(cx + radius);
+  const minY = Math.floor(cy - radius);
+  const maxY = Math.ceil(cy + radius);
+  for (let y = minY;y <= maxY; y += 1) {
+    for (let x = minX;x <= maxX; x += 1) {
+      const dx = x - cx;
+      const dy = y - cy;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > radius)
+        continue;
+      const falloff = Math.pow(1 - distance / Math.max(0.001, radius), GLOW_FALLOFF_EXP_ASCII);
+      addSample(canvas, channel, x, y, value * falloff);
+    }
+  }
+}
+function drawLine(canvas, channel, x0, y0, x1, y1, value, width = 0.8) {
+  const dx = x1 - x0;
+  const dy = y1 - y0;
+  const steps = Math.max(1, Math.ceil(Math.hypot(dx, dy) * 1.7));
+  for (let step = 0;step <= steps; step += 1) {
+    const t2 = step / steps;
+    const x = x0 + dx * t2;
+    const y = y0 + dy * t2;
+    drawDot(canvas, channel, x, y, width, value);
+  }
+}
+function drawCircleStroke(canvas, channel, cx, cy, radius, value) {
+  const steps = Math.max(18, Math.ceil(radius * 8));
+  for (let step = 0;step < steps; step += 1) {
+    const a = step / steps * Math.PI * 2;
+    drawDot(canvas, channel, cx + Math.cos(a) * radius, cy + Math.sin(a) * radius, 0.72, value);
+  }
+}
+function paletteColor(ac, c2, mg, ink) {
+  const total = Math.max(0.001, ac + c2 + mg + ink);
+  const r = (AC_RGB[0] * ac + C2_RGB[0] * c2 + MG_RGB[0] * mg + INK_RGB[0] * ink) / total;
+  const g = (AC_RGB[1] * ac + C2_RGB[1] * c2 + MG_RGB[1] * mg + INK_RGB[1] * ink) / total;
+  const b = (AC_RGB[2] * ac + C2_RGB[2] * c2 + MG_RGB[2] * mg + INK_RGB[2] * ink) / total;
+  const intensity = Math.min(1, total / 4);
+  const lift = 0.34 + intensity * 0.66;
+  return RGBA.fromInts(Math.round(r * lift), Math.round(g * lift), Math.round(b * lift), 255);
+}
+function clearCanvas(canvas) {
+  canvas.ac.fill(0);
+  canvas.c2.fill(0);
+  canvas.mg.fill(0);
+  canvas.ink.fill(0);
+}
+function makeCanvas(layout) {
+  const width = Math.max(1, layout.width * BRAILLE_SAMPLES_X);
+  const height = Math.max(1, layout.height * BRAILLE_SAMPLES_Y);
+  const size = width * height;
+  return {
+    width,
+    height,
+    ac: new Float32Array(size),
+    c2: new Float32Array(size),
+    mg: new Float32Array(size),
+    ink: new Float32Array(size)
+  };
+}
+
+class MarketingGlyphCanvas {
+  rand = seeded(6221137);
+  canvas;
+  layout;
+  activeKind = null;
+  lanes = [];
+  motes = [];
+  packets = [];
+  constructor(layout) {
+    this.layout = layout;
+    this.canvas = makeCanvas(layout);
+    this.reset("dispatch");
+  }
+  resize(layout) {
+    if (layout.width === this.layout.width && layout.height === this.layout.height)
+      return;
+    this.layout = layout;
+    this.canvas = makeCanvas(layout);
+    this.reset(this.activeKind ?? "dispatch");
+  }
+  render(layer, scene, tick) {
+    const kind = sceneKind(scene);
+    if (kind !== this.activeKind)
+      this.reset(kind);
+    clearCanvas(this.canvas);
+    this.drawMarketingRails(kind, tick);
+    if (kind === "loop")
+      this.drawLoop(tick);
+    else if (kind === "carrier")
+      this.drawCarrier(tick);
+    else
+      this.drawDispatch(tick);
+    this.blit(layer);
+  }
+  reset(kind) {
+    this.activeKind = kind;
+    this.lanes = [];
+    this.motes = [];
+    this.packets = [];
+    if (kind === "dispatch")
+      this.setupDispatch();
+    else if (kind === "loop")
+      this.setupLoop();
+    else
+      this.setupCarrier();
+  }
+  setupDispatch() {
+    const count = this.layout.compact ? DISPATCH_LANES_COMPACT : DISPATCH_LANES_WIDE;
+    for (let i = 0;i < count; i += 1) {
+      const ang = (-0.9 + 1.8 * (i / Math.max(1, count - 1))) * (Math.PI * 0.5);
+      this.lanes.push({ ang, len: this.canvas.width * (LANE_LEN_BASE + this.rand() * LANE_LEN_SPREAD), curve: (this.rand() - 0.5) * LANE_CURVE_RANGE, phase: this.rand() * Math.PI * 2 });
+    }
+    const packets = this.layout.compact ? DISPATCH_PACKETS_COMPACT : DISPATCH_PACKETS_WIDE;
+    for (let i = 0;i < packets; i += 1)
+      this.packets.push(this.packet(true));
+  }
+  setupLoop() {
+    const lanes = this.layout.compact ? 4 : 7;
+    for (let i = 0;i < lanes; i += 1)
+      this.packets.push(this.packet(true));
+  }
+  setupCarrier() {
+    const nodes = this.layout.compact ? CARRIER_NODES_COMPACT : CARRIER_NODES_WIDE;
+    for (let i = 0;i < nodes * 6; i += 1)
+      this.packets.push(this.packet(true));
+  }
+  packet(random = false) {
+    return {
+      lane: Math.floor(this.rand() * Math.max(1, this.lanes.length || 7)),
+      p: random ? this.rand() : 0,
+      spd: PACKET_SPEED_BASE + this.rand() * PACKET_SPEED_SPREAD,
+      channel: this.rand() < PACKET_CYAN_PROBABILITY ? 1 : 0,
+      wobble: (this.rand() - 0.5) * 7,
+      size: 0.8 + this.rand() * 1.3
+    };
+  }
+  core(kind) {
+    if (kind === "dispatch")
+      return { x: this.canvas.width * CORE_DISPATCH_X, y: this.canvas.height * CORE_DISPATCH_Y };
+    if (kind === "carrier")
+      return { x: this.canvas.width * CORE_CARRIER_X, y: this.canvas.height * CORE_CARRIER_Y };
+    return { x: this.canvas.width * CORE_LOOP_X, y: this.canvas.height * CORE_LOOP_Y };
+  }
+  lanePoint(lane, p, kind = "dispatch") {
+    const core = this.core(kind);
+    const dist = lane.len * p;
+    const bend = Math.sin(p * Math.PI) * lane.curve * 28;
+    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 };
+  }
+  drawMotes(tick) {
+    for (const mote of this.motes) {
+      mote.x += 0.1 * mote.z;
+      if (mote.x > this.canvas.width + 2)
+        mote.x = -2;
+      const alpha = (0.035 + 0.08 * mote.z) * (0.55 + 0.45 * Math.sin(tick * 0.03 + mote.tw));
+      drawDot(this.canvas, mote.channel, mote.x, mote.y, 0.45 * mote.z, alpha);
+    }
+  }
+  drawMarketingRails(kind, tick) {
+    const ys = kind === "loop" ? RAIL_YS_LOOP : kind === "carrier" ? RAIL_YS_CARRIER : RAIL_YS_DISPATCH;
+    ys.forEach((ratio, index) => {
+      const y = this.canvas.height * ratio + Math.sin(tick * 0.018 + index) * 1.8;
+      drawLine(this.canvas, index === 1 ? 0 : 1, this.canvas.width * 0.06, y, this.canvas.width * 0.94, y + Math.sin(index) * 2, index === 1 ? 0.11 : 0.07, 0.55);
+      for (let p = (tick * 0.004 + index * 0.21) % 1;p < 1; p += 0.18 + index * 0.02) {
+        const x = this.canvas.width * (0.06 + 0.88 * p);
+        drawDot(this.canvas, index === 2 ? 1 : 0, x, y, 1 + index * 0.25, 0.24);
+        drawGlow(this.canvas, index === 2 ? 1 : 0, x, y, 3.8, 0.035);
+      }
+    });
+  }
+  drawDispatch(tick) {
+    const core = this.core("dispatch");
+    drawGlow(this.canvas, 0, core.x, core.y, 30, 0.12);
+    drawDot(this.canvas, 0, core.x, core.y, 2.2, 0.85);
+    for (const lane of this.lanes) {
+      let prev = this.lanePoint(lane, 0);
+      for (let i = 1;i <= LANE_INTERP_STEPS; i += 1) {
+        const next = this.lanePoint(lane, i / LANE_INTERP_STEPS);
+        drawLine(this.canvas, lane.phase > Math.PI ? 1 : 0, prev.x, prev.y, next.x, next.y, 0.045, 0.38);
+        prev = next;
+      }
+    }
+    for (const packet of this.packets) {
+      packet.p += packet.spd;
+      if (packet.p > 1)
+        Object.assign(packet, this.packet(false));
+      const lane = this.lanes[packet.lane % Math.max(1, this.lanes.length)];
+      if (!lane)
+        continue;
+      const pt = this.lanePoint(lane, packet.p);
+      const fade = packet.p < 0.1 ? packet.p / 0.1 : packet.p > 0.88 ? (1 - packet.p) / 0.12 : 1;
+      const y = pt.y + packet.wobble * Math.sin(packet.p * Math.PI * 2);
+      drawLine(this.canvas, packet.channel, pt.x - 4, y - 1, pt.x, y, 0.08 * fade, 0.38);
+      drawDot(this.canvas, packet.channel, pt.x, y, packet.size, 0.5 * fade);
+      drawGlow(this.canvas, packet.channel, pt.x, y, packet.size * 4, 0.045 * fade);
+    }
+    for (let i = 0;i < (this.layout.compact ? DISPATCH_DRONES_COMPACT : DISPATCH_DRONES_WIDE); i += 1) {
+      const lane = this.lanes[i % Math.max(1, this.lanes.length)];
+      if (!lane)
+        continue;
+      const p = (tick * 0.002 + i * 0.13) % 1;
+      const pt = this.lanePoint(lane, p);
+      this.drawDrone(pt.x, pt.y + Math.sin(tick * 0.04 + i) * 2, 2.6 + i % 2 * 0.6, tick + i * 11, i % 3 === 0 ? 1 : 0);
+    }
+  }
+  drawLoop(tick) {
+    const y = this.canvas.height * 0.56;
+    const x0 = this.canvas.width * 0.09;
+    const x1 = this.canvas.width * 0.91;
+    drawLine(this.canvas, 0, x0, y, x1, y, 0.12, 0.55);
+    const gates = this.layout.compact ? LOOP_GATES_COMPACT : LOOP_GATES_WIDE;
+    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));
+      drawLine(this.canvas, i === active ? 0 : 3, x, y - 22, x, y + 22, i === active ? 0.25 : 0.08, i === active ? 0.7 : 0.42);
+      drawDot(this.canvas, i <= active ? 0 : 3, x, y, i === active ? 2.2 : 1.2, i === active ? 0.72 : 0.25);
+      drawCircleStroke(this.canvas, i <= active ? 0 : 3, x, y, i === active ? 4.2 : 2.4, i === active ? 0.18 : 0.08);
+    }
+    for (const packet of this.packets) {
+      packet.p += packet.spd * 0.7;
+      if (packet.p > 1)
+        packet.p = 0;
+      const x = x0 + (x1 - x0) * packet.p;
+      const segment = Math.min(gates - 1, Math.floor(packet.p * gates));
+      const channel = segment < active ? 0 : segment === active ? 1 : 3;
+      const py = y + packet.wobble * Math.sin(packet.p * Math.PI * 2);
+      drawLine(this.canvas, channel, x - 6, py, x, py, 0.1, 0.42);
+      drawDot(this.canvas, channel, x, py, packet.size, channel === 3 ? 0.22 : 0.58);
+      drawGlow(this.canvas, channel, x, py, 3.8, channel === 3 ? 0.02 : 0.04);
+    }
+    this.drawDrone(x0 + (x1 - x0) * (tick * 0.003 % 1), y - 18, 2.7, tick, 0);
+    this.drawDrone(x0 + (x1 - x0) * ((tick * 0.002 + 0.5) % 1), y + 16, 2.2, tick + 40, 2);
+  }
+  drawCarrier(tick) {
+    const core = this.core("carrier");
+    drawGlow(this.canvas, 0, core.x, core.y, 26, 0.12);
+    drawDot(this.canvas, 0, core.x, core.y, 2.4, 0.92);
+    drawCircleStroke(this.canvas, 0, core.x, core.y, 8 + Math.sin(tick * 0.06) * 2, 0.14);
+    const nodes = this.layout.compact ? CARRIER_NODES_COMPACT : CARRIER_NODES_WIDE;
+    const rx = this.canvas.width * 0.36;
+    const ry = this.canvas.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;
+      drawLine(this.canvas, i % 2 ? 1 : 0, core.x, core.y, x, y, 0.055, 0.36);
+      drawCircleStroke(this.canvas, i % 2 ? 1 : 0, x, y, 4.2, 0.15);
+      drawDot(this.canvas, i % 2 ? 1 : 0, x, y, 1.7, 0.62);
+      this.drawDrone(x, y - 8, 2.1, tick + i * 9, i % 2 ? 1 : 0);
+    }
+    for (const packet of this.packets) {
+      packet.p += packet.spd;
+      if (packet.p > 1)
+        packet.p = 0;
+      const lane = packet.lane % 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 x = core.x + (nx - core.x) * packet.p;
+      const y = core.y + (ny - core.y) * packet.p;
+      drawDot(this.canvas, packet.channel, x, y, packet.size, 0.48);
+      drawGlow(this.canvas, packet.channel, x, y, 3.2, 0.035);
+    }
+  }
+  drawDrone(x, y, scale, tick, channel) {
+    const wobble = Math.sin(tick * 0.08) * 0.7;
+    drawDot(this.canvas, channel, x, y + wobble, scale, 0.58);
+    drawDot(this.canvas, 3, x, y + wobble, Math.max(0.6, scale * 0.28), 0.42);
+    const rotor = scale * 1.75;
+    const arms = [
+      [-rotor, -rotor * 0.75],
+      [rotor, -rotor * 0.75],
+      [-rotor, rotor * 0.75],
+      [rotor, rotor * 0.75]
+    ];
+    for (const [dx, dy] of arms) {
+      drawLine(this.canvas, channel, x, y + wobble, x + dx, y + dy + wobble, 0.11, 0.38);
+      drawCircleStroke(this.canvas, channel, x + dx, y + dy + wobble, scale * (0.65 + Math.abs(Math.sin(tick * 0.18)) * 0.25), 0.16);
+      drawDot(this.canvas, channel, x + dx, y + dy + wobble, 0.7, 0.25);
+    }
+    drawLine(this.canvas, channel === 1 ? 0 : 1, x - rotor * 2.4, y + wobble + 1.2, x - rotor * 1.2, y + wobble, 0.05, 0.35);
+  }
+  blit(layer) {
+    const fb = layer.frameBuffer;
+    fb.clear(BACKDROP);
+    const { width, height, ac, c2, mg, ink } = this.canvas;
+    for (let cy = 0;cy < this.layout.height; cy += 1) {
+      for (let cx = 0;cx < this.layout.width; cx += 1) {
+        let bits = 0;
+        let acSum = 0;
+        let c2Sum = 0;
+        let mgSum = 0;
+        let inkSum = 0;
+        for (let sy = 0;sy < BRAILLE_SAMPLES_Y; sy += 1) {
+          for (let sx = 0;sx < BRAILLE_SAMPLES_X; sx += 1) {
+            const px = cx * BRAILLE_SAMPLES_X + sx;
+            const py = cy * BRAILLE_SAMPLES_Y + sy;
+            if (px >= width || py >= height)
+              continue;
+            const index = py * width + px;
+            const a = ac[index];
+            const c = c2[index];
+            const m = mg[index];
+            const k = ink[index];
+            const total2 = a + c + m + k;
+            acSum += a;
+            c2Sum += c;
+            mgSum += m;
+            inkSum += k;
+            if (total2 > 0.11)
+              bits |= BRAILLE_BITS[sy][sx];
+          }
+        }
+        const total = acSum + c2Sum + mgSum + inkSum;
+        if (bits === 0 || total <= 0.02)
+          continue;
+        const char = String.fromCharCode(10240 + bits);
+        fb.setCellWithAlphaBlending(cx, cy, char, paletteColor(acSum, c2Sum, mgSum, inkSum), TRANSPARENT);
+      }
+    }
+  }
+}
+function createGraphicsLayer(renderer, layout) {
+  const layer = new FrameBufferRenderable(renderer, {
+    id: "rig-marketing-glyph-canvas",
+    width: layout.width,
+    height: layout.height,
+    position: "absolute",
+    left: 0,
+    top: 0,
+    respectAlpha: true
+  });
+  layer.__rigMarketingCanvas = new MarketingGlyphCanvas(layout);
+  return layer;
+}
+function resizeGraphicsLayer(layer, layout) {
+  if (layer.width !== layout.width)
+    layer.width = layout.width;
+  if (layer.height !== layout.height)
+    layer.height = layout.height;
+  layer.__rigMarketingCanvas?.resize(layout);
+}
+function clearGraphicsLayer(layer) {
+  layer.frameBuffer.clear(BACKDROP);
+  layer.__rigAmbientKey = undefined;
+}
+function writeCell(layer, x, y, char, fg, bg) {
+  layer.frameBuffer.setCellWithAlphaBlending(x, y, char, fg, bg);
+}
+function drawFullCell(layer, x, y, bg) {
+  writeCell(layer, x, y, " ", TRANSPARENT, bg);
+}
+function drawCornerCut(layer, x, y, char, fg) {
+  writeCell(layer, x, y, char, fg, BACKDROP);
+}
+function drawRoundedFill(layer, left, top, right, bottom, dividerY) {
+  const bgForY = (y) => y < dividerY ? PANEL_HEADER_BG : PANEL_BG;
+  for (let y = top;y <= bottom; y += 1) {
+    const bg = bgForY(y);
+    for (let x = left;x <= right; x += 1)
+      drawFullCell(layer, x, y, bg);
+  }
+  drawCornerCut(layer, left, top, "\u2597", PANEL_HEADER_BG);
+  drawCornerCut(layer, right, top, "\u2596", PANEL_HEADER_BG);
+  drawCornerCut(layer, left, bottom, "\u259D", PANEL_BG);
+  drawCornerCut(layer, right, bottom, "\u2598", PANEL_BG);
+}
+function drawAdTerminalPanel(layer, layout, panel) {
+  const rect = panelCellRect(layout, panel);
+  if (!rect)
+    return;
+  const { left, top, width, right, bottom, headerHeight, dividerY } = rect;
+  drawRoundedFill(layer, left, top, right, bottom, dividerY);
+  if (dividerY > top && dividerY < bottom) {
+    for (let x = left + 2;x < right - 1; x += 1) {
+      writeCell(layer, x, dividerY, "\u2500", PANEL_LINE_DIM, PANEL_BG);
+    }
+  }
+  if (panel.headerText) {
+    const x = left + Math.max(2, Math.min(5, panel.paddingX ?? 4));
+    const y = top + Math.max(1, Math.floor(headerHeight / 2));
+    layer.frameBuffer.drawText(panel.headerText.slice(0, Math.max(0, width - 8)), x, y, PANEL_TEXT_DIM, TRANSPARENT);
+  }
+}
+function drawPanelChrome(layer, layout, panels) {
+  for (const panel of panels) {
+    if (panel.chrome === "ad-terminal")
+      drawAdTerminalPanel(layer, layout, panel);
+  }
+}
+function staticFleetTick(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 withAlpha(hex, alpha) {
+  const a = Math.max(0, Math.min(255, Math.round(alpha * 255)));
+  const [r, g, b] = RGBA.fromHex(hex).toInts();
+  return RGBA.fromInts(r, g, b, a);
+}
+function asciiFleetColor(char, row, alpha) {
+  if (char === "@" || char === "$" || char === "o")
+    return withAlpha(RIG_UI.lime, alpha);
+  if (char === "%" || char === "!" || char === "/" || char === "\\" || char === "|")
+    return withAlpha(RIG_UI.cyan, alpha);
+  if (char === "." || char === "'" || char === "_" || row < 3 || row > FLEET_GRID_HEIGHT - 4) {
+    return RGBA.fromInts(108, 110, 121, Math.min(170, Math.max(0, Math.min(255, Math.round(alpha * 255)))));
+  }
+  return withAlpha(RIG_UI.limeDim, alpha);
+}
+var AMBIENT_LOAD_BUCKETS = 5;
+function ambientLoadBucket(load) {
+  if (!Number.isFinite(load))
+    return 0;
+  return Math.max(0, Math.min(AMBIENT_LOAD_BUCKETS, Math.round(load * AMBIENT_LOAD_BUCKETS)));
+}
+function drawAmbientField(layer, layout, _tick, scene = "fleet", load = 0, activeRuns = 0) {
+  const bucket = ambientLoadBucket(load);
+  const rows = fleetRows(staticFleetTick(scene), { animate: true });
+  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, Math.floor(activeRuns)));
+  const key = `${layout.width}x${layout.height}|${scene}|l${bucket}|d${litTarget}`;
+  if (layer.__rigAmbientKey === key)
+    return;
+  const fb = layer.frameBuffer;
+  fb.clear(BACKDROP);
+  const left = Math.floor((layout.width - FLEET_GRID_WIDTH) / 2);
+  const top = Math.floor((layout.height - FLEET_GRID_HEIGHT) / 2);
+  const baseAlpha = 0.62 + bucket / AMBIENT_LOAD_BUCKETS * 0.18;
+  let droneIndex = 0;
+  for (let row = 0;row < rows.length; row += 1) {
+    const y = top + row;
+    if (y < 0 || y >= layout.height)
+      continue;
+    const line = rows[row];
+    for (let col = 0;col < line.length; col += 1) {
+      const x = left + col;
+      if (x < 0 || x >= layout.width)
+        continue;
+      const char = line[col];
+      if (char === " ")
+        continue;
+      const isDrone = char === "@" || char === "$" || char === "%";
+      const lit = isDrone && droneIndex < litTarget;
+      if (isDrone)
+        droneIndex += 1;
+      const alpha = lit ? 1 : baseAlpha;
+      fb.setCellWithAlphaBlending(x, y, char, asciiFleetColor(char, row, alpha), TRANSPARENT);
+    }
+  }
+  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",
+  "preparing",
+  "created",
+  "validating",
+  "reviewing",
+  "closing-out",
+  "stopping",
+  "loading"
+]);
+function normalizeStatus(status) {
+  return status.replace(/_/g, "-").toLowerCase();
+}
+function runsFromState(state) {
+  const fleet = state.data.fleet;
+  if (!fleet || typeof fleet !== "object" || Array.isArray(fleet))
+    return [];
+  const runs = fleet.runs;
+  return Array.isArray(runs) ? runs : [];
+}
+function computeFleetStats(runs) {
+  const byStatus = new Map;
+  let active = 0;
+  let succeeded = 0;
+  let failed = 0;
+  for (const run of runs) {
+    const status = normalizeStatus(run.status ?? "");
+    byStatus.set(status, (byStatus.get(status) ?? 0) + 1);
+    if (ACTIVE_STATUSES.has(status))
+      active += 1;
+    else if (status === "success" || status === "completed" || status === "merged")
+      succeeded += 1;
+    else if (status === "failed" || status === "error")
+      failed += 1;
+  }
+  const total = runs.length;
+  const load = total === 0 ? 0 : active / total;
+  const sparkline = buildSparklineSeries(active, succeeded, failed);
+  return { total, active, succeeded, failed, byStatus, load, sparkline };
+}
+function buildSparklineSeries(active, succeeded, failed) {
+  const peak = Math.max(1, active, succeeded, failed);
+  const base = [succeeded, Math.round(succeeded * 0.6 + failed * 0.4), failed, Math.round((active + failed) / 2), active];
+  return base.map((value) => Math.max(0, Math.min(peak, value)) / peak);
+}
+function fleetStatsFromState(state) {
+  return computeFleetStats(runsFromState(state));
+}
+
+// packages/cli/src/app-opentui/react/Backdrop.tsx
+var ANIMATION_SLOWDOWN = 1;
+function isTerminalScene(scene) {
+  return scene === "handoff" || scene === "command";
+}
+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;
+    }
+    return () => {
+      imageRef.current?.destroy();
+      const graphics = graphicsRef.current;
+      if (graphics) {
+        try {
+          renderer.root.remove(graphics.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 (layout.tooSmall) {
+      image?.clear();
+      if (graphics)
+        clearGraphicsLayer(graphics);
+      return;
+    }
+    const stats = fleetStatsFromState(props.state);
+    const tick = props.state.tick;
+    const animationTick = Math.floor(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);
+      }
+    }
+  });
+  return null;
+}
+export {
+  Backdrop
+};