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

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

@@ -0,0 +1,31 @@
+export declare const LCG_MULTIPLIER = 1664525;
+export declare const LCG_INCREMENT = 1013904223;
+export declare const LCG_DIVISOR = 4294967295;
+export declare const PACKET_CYAN_PROBABILITY = 0.22;
+export declare const LANE_INTERP_STEPS = 32;
+export declare const LANE_LEN_BASE = 0.32;
+export declare const LANE_LEN_SPREAD = 0.42;
+export declare const LANE_CURVE_RANGE = 0.7;
+export declare const PACKET_SPEED_BASE = 0.003;
+export declare const PACKET_SPEED_SPREAD = 0.009;
+export declare const DISPATCH_LANES_COMPACT = 7;
+export declare const DISPATCH_LANES_WIDE = 12;
+export declare const DISPATCH_PACKETS_COMPACT = 70;
+export declare const DISPATCH_PACKETS_WIDE = 150;
+export declare const CARRIER_NODES_COMPACT = 5;
+export declare const CARRIER_NODES_WIDE = 7;
+export declare const LOOP_GATES_COMPACT = 4;
+export declare const LOOP_GATES_WIDE = 5;
+export declare const DISPATCH_DRONES_COMPACT = 4;
+export declare const DISPATCH_DRONES_WIDE = 8;
+export declare const CORE_DISPATCH_X = 0.3;
+export declare const CORE_DISPATCH_Y = 0.45;
+export declare const CORE_CARRIER_X = 0.5;
+export declare const CORE_CARRIER_Y = 0.54;
+export declare const CORE_LOOP_X = 0.09;
+export declare const CORE_LOOP_Y = 0.56;
+export declare const RAIL_YS_LOOP: readonly [0.18, 0.5, 0.82];
+export declare const RAIL_YS_CARRIER: readonly [0.24, 0.54, 0.82];
+export declare const RAIL_YS_DISPATCH: readonly [0.18, 0.58, 0.82];
+export declare const GLOW_FALLOFF_EXP_ASCII = 2.2;
+export declare const GLOW_FALLOFF_EXP_IMAGE = 2.4;

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

@@ -0,0 +1,66 @@
+// @bun
+// 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;
+export {
+  RAIL_YS_LOOP,
+  RAIL_YS_DISPATCH,
+  RAIL_YS_CARRIER,
+  PACKET_SPEED_SPREAD,
+  PACKET_SPEED_BASE,
+  PACKET_CYAN_PROBABILITY,
+  LOOP_GATES_WIDE,
+  LOOP_GATES_COMPACT,
+  LCG_MULTIPLIER,
+  LCG_INCREMENT,
+  LCG_DIVISOR,
+  LANE_LEN_SPREAD,
+  LANE_LEN_BASE,
+  LANE_INTERP_STEPS,
+  LANE_CURVE_RANGE,
+  GLOW_FALLOFF_EXP_IMAGE,
+  GLOW_FALLOFF_EXP_ASCII,
+  DISPATCH_PACKETS_WIDE,
+  DISPATCH_PACKETS_COMPACT,
+  DISPATCH_LANES_WIDE,
+  DISPATCH_LANES_COMPACT,
+  DISPATCH_DRONES_WIDE,
+  DISPATCH_DRONES_COMPACT,
+  CORE_LOOP_Y,
+  CORE_LOOP_X,
+  CORE_DISPATCH_Y,
+  CORE_DISPATCH_X,
+  CORE_CARRIER_Y,
+  CORE_CARRIER_X,
+  CARRIER_NODES_WIDE,
+  CARRIER_NODES_COMPACT
+};

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

@@ -3,6 +3,7 @@ import type { StageLayout } from "../layout";
 import type { AppSceneId, AppScenePanel } from "../types";
 export type RigGraphicsLayer = FrameBufferRenderable & {
     __rigMarketingCanvas?: MarketingGlyphCanvas;
+    __rigAmbientKey?: string;
 };
 declare class MarketingGlyphCanvas {
     private rand;
@@ -34,6 +35,6 @@ export declare function createGraphicsLayer(renderer: CliRenderer, layout: Stage
 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 drawAmbientField(layer: RigGraphicsLayer, layout: StageLayout, _tick: number, scene?: AppSceneId, load?: number, activeRuns?: number): 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

@@ -14,15 +14,17 @@ var RIG_UI = {
   bg: "#070809",
   bg2: "#0b0c0e",
   panel: "#101115",
-  panel2: "#101115",
-  glass: "#14161b",
-  ink: "#f2f3f6",
-  ink2: "#aeb0ba",
-  ink3: "#6c6e79",
-  ink4: "#44464f",
+  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"
@@ -133,7 +135,41 @@ function panelCellRect(layout, panel) {
   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);
@@ -161,8 +197,8 @@ function sceneKind(scene) {
 function seeded(seed) {
   let value = seed >>> 0;
   return () => {
-    value = value * 1664525 + 1013904223 >>> 0;
-    return value / 4294967295;
+    value = value * LCG_MULTIPLIER + LCG_INCREMENT >>> 0;
+    return value / LCG_DIVISOR;
   };
 }
 function channelBuffer(canvas, channel) {
@@ -215,7 +251,7 @@ function drawGlow(canvas, channel, cx, cy, radius, value) {
       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);
+      const falloff = Math.pow(1 - distance / Math.max(0.001, radius), GLOW_FALLOFF_EXP_ASCII);
       addSample(canvas, channel, x, y, value * falloff);
     }
   }
@@ -254,8 +290,8 @@ function clearCanvas(canvas) {
   canvas.ink.fill(0);
 }
 function makeCanvas(layout) {
-  const width = Math.max(1, layout.width * 2);
-  const height = Math.max(1, layout.height * 4);
+  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,
@@ -314,12 +350,12 @@ class MarketingGlyphCanvas {
       this.setupCarrier();
   }
   setupDispatch() {
-    const count = this.layout.compact ? 7 : 12;
+    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 * (0.32 + this.rand() * 0.42), curve: (this.rand() - 0.5) * 0.7, phase: this.rand() * Math.PI * 2 });
+      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 ? 70 : 150;
+    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));
   }
@@ -329,7 +365,7 @@ class MarketingGlyphCanvas {
       this.packets.push(this.packet(true));
   }
   setupCarrier() {
-    const nodes = this.layout.compact ? 5 : 7;
+    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));
   }
@@ -337,18 +373,18 @@ class MarketingGlyphCanvas {
     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,
+      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 * 0.3, y: this.canvas.height * 0.45 };
+      return { x: this.canvas.width * CORE_DISPATCH_X, y: this.canvas.height * CORE_DISPATCH_Y };
     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 };
+      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);
@@ -368,7 +404,7 @@ class MarketingGlyphCanvas {
     }
   }
   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];
+    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);
@@ -385,8 +421,8 @@ class MarketingGlyphCanvas {
     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);
+      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;
       }
@@ -405,7 +441,7 @@ class MarketingGlyphCanvas {
       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) {
+    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;
@@ -419,7 +455,7 @@ class MarketingGlyphCanvas {
     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 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));
@@ -447,7 +483,7 @@ class MarketingGlyphCanvas {
     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 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) {
@@ -502,10 +538,10 @@ class MarketingGlyphCanvas {
         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;
+        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;
@@ -553,6 +589,7 @@ function resizeGraphicsLayer(layer, 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);
@@ -604,21 +641,45 @@ function staticFleetTick(scene) {
     hash = hash * 33 + scene.charCodeAt(index) >>> 0;
   return 11 + hash % 97;
 }
-function asciiFleetColor(char, row) {
+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 RGBA.fromHex(RIG_UI.lime);
+    return withAlpha(RIG_UI.lime, alpha);
   if (char === "%" || char === "!" || char === "/" || char === "\\" || char === "|")
-    return RGBA.fromHex(RIG_UI.cyan);
-  if (char === "." || char === "'" || char === "_" || row < 3 || row > FLEET_GRID_HEIGHT - 4)
-    return RGBA.fromInts(108, 110, 121, 170);
-  return RGBA.fromHex(RIG_UI.limeDim);
+    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") {
+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 rows = fleetRows(staticFleetTick(scene), { animate: true });
   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)
@@ -631,9 +692,15 @@ function drawAmbientField(layer, layout, _tick, scene = "fleet") {
       const char = line[col];
       if (char === " ")
         continue;
-      fb.setCellWithAlphaBlending(x, y, char, asciiFleetColor(char, row), TRANSPARENT);
+      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;
 }
 function drawSparkline(layer, x, y, values, color = RGBA.fromHex(RIG_UI.cyan)) {
   const chars = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];

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

@@ -111,7 +111,16 @@ function panelPixelPlacement(layout, panel, size, minPixels = 8) {
   return width > minPixels && height > minPixels ? { left, top, width, height, leftCells, topCells, widthCells, heightCells } : null;
 }
 
+// packages/cli/src/app-opentui/render/constants.ts
+var GLOW_FALLOFF_EXP_IMAGE = 2.4;
+
 // 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];
@@ -128,6 +137,12 @@ var KITTY_CHUNK_SIZE = 4096;
 var PANEL_BLUR_SCALE = 1;
 var PANEL_MASK_CACHE_LIMIT = 16;
 var ZLIB_LEVEL = 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() {
@@ -213,17 +228,25 @@ function drawAsciiGlyph(data, width, height, x, y, cellWidth, cellHeight, char,
     }
   }
 }
-function drawStaticAsciiFleetBackground(data, width, height, scene, layout) {
+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 leftCells = Math.floor((layout.width - FLEET_GRID_WIDTH) / 2);
+  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;
-  drawGlow(data, width, height, width * 0.5, height * 0.5, Math.min(width, height) * 0.4, LIME, 0.03);
-  drawGlow(data, width, height, width * 0.18, height * 0.22, Math.min(width, height) * 0.28, CYAN, 0.022);
-  drawGlow(data, width, height, width * 0.82, height * 0.78, Math.min(width, height) * 0.22, MAGENTA, 0.014);
+  drawGlow(data, width, height, width * 0.5, height * 0.5, Math.min(width, height) * 0.4, LIME, 0.022 + load * 0.03);
+  drawGlow(data, width, height, width * 0.18, height * 0.22, Math.min(width, height) * 0.28, CYAN, 0.018 + load * 0.012);
+  drawGlow(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) {
@@ -233,26 +256,30 @@ function drawStaticAsciiFleetBackground(data, width, height, scene, layout) {
       const x = fleetLeft + col * cellWidth;
       const y = fleetTop + row * cellHeight;
       const color = charColor(char, row, rows.length);
-      drawAsciiGlyph(data, width, height, x + cellWidth * 0.07, y + cellHeight * 0.05, cellWidth, cellHeight, char, color, 0.52);
-      if (char === "@" || char === "$" || char === "%") {
-        drawGlow(data, width, height, x + cellWidth * 0.5, y + cellHeight * 0.5, Math.max(cellWidth, cellHeight) * 0.95, color, 0.02);
+      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;
+        drawGlow(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) {
+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(0.1, Math.min(0.82, 0.12 + Math.pow(distance, 1.65) * 0.62));
+      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);
     }
   }
-  drawGlow(data, width, height, width * 0.82, height * 0.04, Math.min(width, height) * 0.2, LIME, 0.03);
-  drawGlow(data, width, height, width * 0.12, height * 0.18, Math.min(width, height) * 0.16, CYAN, 0.022);
+  drawGlow(data, width, height, width * 0.82, height * 0.04, Math.min(width, height) * 0.2, LIME, 0.024 + load * 0.012);
+  drawGlow(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);
@@ -335,6 +362,23 @@ function blendOver(data, index, color, alphaScale = 1) {
   data[index + 2] = clampByte(color[2] * alpha + data[index + 2] * inv);
   data[index + 3] = 255;
 }
+function drawDisc(data, width, height, cx, cy, radius, color, alpha = 1) {
+  const minX = Math.max(0, Math.floor(cx - radius));
+  const maxX = Math.min(width - 1, Math.ceil(cx + radius));
+  const minY = Math.max(0, Math.floor(cy - radius));
+  const maxY = Math.min(height - 1, Math.ceil(cy + radius));
+  for (let y = minY;y <= maxY; y += 1) {
+    for (let x = minX;x <= maxX; x += 1) {
+      const dx = x + 0.5 - cx;
+      const dy = y + 0.5 - cy;
+      const d = Math.sqrt(dx * dx + dy * dy);
+      if (d > radius)
+        continue;
+      const edge = Math.max(0, Math.min(1, radius - d));
+      blendOver(data, (y * width + x) * 4, color, alpha * Math.min(1, 0.35 + edge));
+    }
+  }
+}
 function drawGlow(data, width, height, cx, cy, radius, color, alpha = 0.18) {
   const minX = Math.max(0, Math.floor(cx - radius));
   const maxX = Math.min(width - 1, Math.ceil(cx + radius));
@@ -347,11 +391,20 @@ function drawGlow(data, width, height, cx, cy, radius, color, alpha = 0.18) {
       const d = Math.sqrt(dx * dx + dy * dy);
       if (d > radius)
         continue;
-      const falloff = Math.pow(1 - d / Math.max(1, radius), 2.4);
+      const falloff = Math.pow(1 - d / Math.max(1, radius), GLOW_FALLOFF_EXP_IMAGE);
       blendOver(data, (y * width + x) * 4, color, alpha * falloff);
     }
   }
 }
+function drawLine(data, width, height, x0, y0, x1, y1, color, alpha = 0.5, thickness = 1.4) {
+  const dx = x1 - x0;
+  const dy = y1 - y0;
+  const steps = Math.max(1, Math.ceil(Math.hypot(dx, dy) * 1.2));
+  for (let i = 0;i <= steps; i += 1) {
+    const t = i / steps;
+    drawDisc(data, width, height, x0 + dx * t, y0 + dy * t, thickness, color, alpha);
+  }
+}
 function 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));
@@ -455,7 +508,7 @@ function getPanelMask(width, height, rect, headerPx, blurScale) {
   const cached = panelMaskCache.get(key);
   if (cached)
     return cached;
-  const radius = Math.max(14, Math.min(34, Math.round(Math.min(rect.width, rect.height) * 0.035)));
+  const 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);
@@ -510,7 +563,7 @@ function getPanelMask(width, height, rect, headerPx, blurScale) {
 function compositePanel(data, width, height, rect, headerPx) {
   const blurScale = PANEL_BLUR_SCALE;
   const sampled = downsampleRegion(data, width, height, rect, blurScale);
-  const blurRadius = Math.max(8, Math.min(28, Math.round(Math.min(rect.width, rect.height) * 0.018)));
+  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) {
@@ -529,16 +582,49 @@ function compositePanel(data, width, height, rect, headerPx) {
     blendOver(data, mask.dividerIndices[i], PANEL_LINE, 0.28);
   }
 }
-function drawBackground(data, width, height, _tick, scene, layout) {
+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);
+  drawGlow(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) {
+      drawLine(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);
-  applyStaticAtmosphere(data, width, height);
+  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";
-  return `${layer}:${width}x${height}:${input.layout.width}x${input.layout.height}:${input.scene}:${input.tick}:${input.panels.map((panel) => `${panel.id}:${panel.top}:${panel.height}:${panel.width ?? ""}:${panel.left ?? ""}:${panel.headerHeight ?? ""}`).join("|")}`;
+  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") {
@@ -585,7 +671,9 @@ function renderImageVisualFrame(input) {
     return null;
   const layer = input.layer ?? "full";
   const data = new Uint8ClampedArray(byteCount);
-  drawBackground(data, width, height, 0, input.scene, input.layout);
+  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;

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

@@ -12,12 +12,15 @@ export type ImageVisualRenderRequest = {
     readonly panels: readonly AppScenePanel[];
     readonly scene: AppSceneId;
     readonly tick: number;
+    readonly load?: number;
+    readonly activeRuns?: number;
     readonly imageId: number;
     readonly imageIds?: readonly number[];
     readonly zIndex: number;
     readonly transport: ImageTransport;
     readonly layer?: ImageVisualLayerKind;
 };
+export declare function loadBucket(load: number | undefined): number;
 export type ImageVisualRenderResult = {
     readonly key: string;
     readonly sequence: string;
@@ -67,6 +70,8 @@ export declare class ImageVisualLayer {
         panels: readonly AppScenePanel[];
         scene: AppSceneId;
         tick: number;
+        load?: number;
+        activeRuns?: number;
     }): boolean;
     render(input: {
         layout: StageLayout;
@@ -74,6 +79,8 @@ export declare class ImageVisualLayer {
         panels: readonly AppScenePanel[];
         scene: AppSceneId;
         tick: number;
+        load?: number;
+        activeRuns?: number;
         force?: boolean;
     }): void;
     flush(): boolean;