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

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

@@ -0,0 +1,829 @@
+// @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 };
+}
+
+// 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;
+
+// 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/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 graphicsRef = useRef(null);
+  useEffect(() => {
+    const layout = computeStageLayout(renderer.width, renderer.height);
+    const graphics = createGraphicsLayer(renderer, layout);
+    renderer.root.add(graphics);
+    graphicsRef.current = graphics;
+    return () => {
+      const g = graphicsRef.current;
+      if (g) {
+        try {
+          renderer.root.remove(g.id);
+        } catch {}
+      }
+      graphicsRef.current = null;
+    };
+  }, [renderer]);
+  useEffect(() => {
+    const graphics = graphicsRef.current;
+    if (!graphics)
+      return;
+    const layout = computeStageLayout(renderer.width, renderer.height);
+    if (layout.tooSmall) {
+      clearGraphicsLayer(graphics);
+      return;
+    }
+    const stats = fleetStatsFromState(props.state);
+    const animationTick = Math.floor(props.state.tick / ANIMATION_SLOWDOWN);
+    const panels = (props.frame.panels ?? []).map((panel) => ({ ...panel }));
+    const terminalActive = props.frame.terminalActive ?? isTerminalScene(props.state.scene);
+    const fullScreen = Boolean(props.frame.fullScreen);
+    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
+};