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

package/dist/src/app-opentui/render/graphics.d.ts

@@ -0,0 +1,39 @@
+import { FrameBufferRenderable, RGBA, type CliRenderer } from "@opentui/core";
+import type { StageLayout } from "../layout";
+import type { AppSceneId, AppScenePanel } from "../types";
+export type RigGraphicsLayer = FrameBufferRenderable & {
+    __rigMarketingCanvas?: MarketingGlyphCanvas;
+};
+declare class MarketingGlyphCanvas {
+    private rand;
+    private canvas;
+    private layout;
+    private activeKind;
+    private lanes;
+    private motes;
+    private packets;
+    constructor(layout: StageLayout);
+    resize(layout: StageLayout): void;
+    render(layer: RigGraphicsLayer, scene: AppSceneId, tick: number): void;
+    private reset;
+    private setupDispatch;
+    private setupLoop;
+    private setupCarrier;
+    private packet;
+    private core;
+    private lanePoint;
+    private drawMotes;
+    private drawMarketingRails;
+    private drawDispatch;
+    private drawLoop;
+    private drawCarrier;
+    private drawDrone;
+    private blit;
+}
+export declare function createGraphicsLayer(renderer: CliRenderer, layout: StageLayout): RigGraphicsLayer;
+export declare function resizeGraphicsLayer(layer: RigGraphicsLayer, layout: StageLayout): void;
+export declare function clearGraphicsLayer(layer: RigGraphicsLayer): void;
+export declare function drawPanelChrome(layer: RigGraphicsLayer, layout: StageLayout, panels: readonly AppScenePanel[]): void;
+export declare function drawAmbientField(layer: RigGraphicsLayer, layout: StageLayout, tick: number, scene?: AppSceneId): void;
+export declare function drawSparkline(layer: RigGraphicsLayer, x: number, y: number, values: readonly number[], color?: RGBA): void;
+export {};

package/dist/src/app-opentui/render/graphics.js

@@ -0,0 +1,537 @@
+// @bun
+// 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: "#101115",
+  glass: "#14161b",
+  ink: "#f2f3f6",
+  ink2: "#aeb0ba",
+  ink3: "#6c6e79",
+  ink4: "#44464f",
+  lime: "#ccff4d",
+  limeDim: "#a9d63f",
+  cyan: "#56d8ff",
+  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/graphics.ts
+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 * 1664525 + 1013904223 >>> 0;
+    return value / 4294967295;
+  };
+}
+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), 2.2);
+      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 * 2);
+  const height = Math.max(1, layout.height * 4);
+  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 ? 7 : 12;
+    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 * (0.32 + this.rand() * 0.42), curve: (this.rand() - 0.5) * 0.7, phase: this.rand() * Math.PI * 2 });
+    }
+    const packets = this.layout.compact ? 70 : 150;
+    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 ? 5 : 7;
+    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: 0.003 + this.rand() * 0.009,
+      channel: this.rand() < 0.22 ? 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 * 0.3, y: this.canvas.height * 0.45 };
+    if (kind === "carrier")
+      return { x: this.canvas.width * 0.5, y: this.canvas.height * 0.54 };
+    return { x: this.canvas.width * 0.09, y: this.canvas.height * 0.56 };
+  }
+  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" ? [0.18, 0.5, 0.82] : kind === "carrier" ? [0.24, 0.54, 0.82] : [0.18, 0.58, 0.82];
+    ys.forEach((ratio, index) => {
+      const y = 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 <= 32; i += 1) {
+        const next = this.lanePoint(lane, i / 32);
+        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 ? 4 : 8); 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 ? 4 : 5;
+    const active = Math.floor(tick / 16) % gates;
+    for (let i = 0;i < gates; i += 1) {
+      const x = x0 + (x1 - x0) * (i / Math.max(1, gates - 1));
+      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 ? 5 : 7;
+    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 < 4; sy += 1) {
+          for (let sx = 0;sx < 2; sx += 1) {
+            const px = cx * 2 + sx;
+            const py = cy * 4 + 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);
+}
+function panelRect(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));
+  return width > 3 && height > 3 ? { left, top, width, height } : null;
+}
+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 = panelRect(layout, panel);
+  if (!rect)
+    return;
+  const { left, top, width, height } = rect;
+  const right = left + width - 1;
+  const bottom = top + height - 1;
+  const headerHeight = Math.max(3, Math.min(height - 2, panel.headerHeight ?? 3));
+  const dividerY = Math.min(bottom - 1, top + headerHeight);
+  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 drawAmbientField(layer, layout, tick, scene = "fleet") {
+  layer.__rigMarketingCanvas?.render(layer, scene, tick);
+}
+function drawSparkline(layer, x, y, values, color = RGBA.fromHex(RIG_UI.cyan)) {
+  const chars = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+  values.forEach((value, index) => {
+    const level = Math.max(0, Math.min(chars.length - 1, Math.round(value * (chars.length - 1))));
+    layer.frameBuffer.setCell(x + index, y, chars[level], color, TRANSPARENT);
+  });
+}
+export {
+  resizeGraphicsLayer,
+  drawSparkline,
+  drawPanelChrome,
+  drawAmbientField,
+  createGraphicsLayer,
+  clearGraphicsLayer
+};

package/dist/src/app-opentui/render/image-visual-layer-native-canvas.d.ts

@@ -0,0 +1,2 @@
+import { type ImageVisualRenderRequest, type ImageVisualRenderResult } from "./image-visual-layer.ts";
+export declare function renderNativeCanvasImageVisualFrame(input: ImageVisualRenderRequest): Promise<ImageVisualRenderResult | null>;