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

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

@@ -108,7 +108,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];
@@ -126,6 +135,12 @@ 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() {
@@ -217,17 +232,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) {
@@ -237,26 +260,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);
@@ -339,6 +366,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));
@@ -351,11 +395,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));
@@ -459,7 +512,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);
@@ -514,7 +567,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) {
@@ -533,16 +586,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") {
@@ -589,7 +675,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;
@@ -973,6 +1061,7 @@ function forceModernImageVisuals() {
 export {
   renderImageVisualFrame,
   pixelSizeForRenderer,
+  loadBucket,
   imageVisualFrameKey,
   forceModernImageVisuals,
   ImageVisualLayer

package/dist/src/app-opentui/render/native-host.d.ts

@@ -0,0 +1,37 @@
+import { BoxRenderable, CodeRenderable, DiffRenderable, ScrollBoxRenderable, TextRenderable, TextTableRenderable, type CliRenderer } from "@opentui/core";
+import type { StageLayout } from "../layout";
+export type NativeMountKind = "code" | "diff" | "markdown" | "table";
+/** A scene's request to render native content in a rectangle of its panel. */
+export type NativeMount = {
+    readonly kind: NativeMountKind;
+    /** Source/markdown/diff text. */
+    readonly content: string;
+    /** Rows for `kind: "table"` — first row is the header. */
+    readonly rows?: readonly (readonly string[])[];
+    /** Tree-sitter filetype for `kind: "code"` (e.g. "typescript", "json"). */
+    readonly filetype?: string;
+    /** Cell rectangle to occupy (defaults to the centered content area). */
+    readonly top?: number;
+    readonly left?: number;
+    readonly width?: number;
+    readonly height?: number;
+    /** Pin to the bottom (log/diff tails). */
+    readonly stickyBottom?: boolean;
+};
+export type NativeHost = {
+    readonly scrollBox: ScrollBoxRenderable;
+    code: CodeRenderable | null;
+    diff: DiffRenderable | null;
+    table: TextTableRenderable | null;
+    active: NativeMountKind | null;
+    lastKey: string;
+};
+export declare function createNativeHost(renderer: CliRenderer): NativeHost | null;
+export declare function hideNativeHost(host: NativeHost | null): void;
+/** Position + populate the native host for a scene's mount request. Returns true
+ * if it rendered natively; false means the caller should fall back to lines. */
+export declare function applyNativeHost(host: NativeHost | null, mount: NativeMount, layout: StageLayout): boolean;
+export declare function destroyNativeHost(host: NativeHost | null): void;
+/** A tiny title bar the scene can keep above the native host (line-rendered). */
+export declare function nativeTitleBar(renderer: CliRenderer, id: string): TextRenderable;
+export { BoxRenderable };

package/dist/src/app-opentui/render/native-host.js

@@ -0,0 +1,179 @@
+// @bun
+// packages/cli/src/app-opentui/render/native-host.ts
+import {
+  BoxRenderable,
+  CodeRenderable,
+  DiffRenderable,
+  RGBA,
+  ScrollBoxRenderable,
+  SyntaxStyle,
+  TextRenderable,
+  TextTableRenderable
+} 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/native-host.ts
+var syntaxStyle = null;
+function rigSyntaxStyle() {
+  if (syntaxStyle)
+    return syntaxStyle;
+  syntaxStyle = SyntaxStyle.fromStyles({
+    keyword: { fg: RGBA.fromHex(RIG_UI.magenta), bold: true },
+    string: { fg: RGBA.fromHex(RIG_UI.lime) },
+    number: { fg: RGBA.fromHex(RIG_UI.cyan) },
+    comment: { fg: RGBA.fromHex(RIG_UI.ink4), italic: true },
+    function: { fg: RGBA.fromHex(RIG_UI.cyan) },
+    type: { fg: RGBA.fromHex(RIG_UI.limeDim) },
+    constant: { fg: RGBA.fromHex(RIG_UI.yellow) },
+    default: { fg: RGBA.fromHex(RIG_UI.ink2) }
+  });
+  return syntaxStyle;
+}
+function tableContent(rows) {
+  return rows.map((row, rowIndex) => row.map((cell) => [{ __isChunk: true, text: cell, fg: RGBA.fromHex(rowIndex === 0 ? RIG_UI.ink3 : RIG_UI.ink2) }]));
+}
+function createNativeHost(renderer) {
+  try {
+    const scrollBox = new ScrollBoxRenderable(renderer, {
+      id: "rig-native-scrollbox",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: 1,
+      height: 1,
+      scrollY: true,
+      zIndex: 9,
+      visible: false
+    });
+    renderer.root.add(scrollBox);
+    return { scrollBox, code: null, diff: null, table: null, active: null, lastKey: "" };
+  } catch {
+    return null;
+  }
+}
+function hideAllChildren(host) {
+  if (host.code)
+    host.code.visible = false;
+  if (host.diff)
+    host.diff.visible = false;
+  if (host.table)
+    host.table.visible = false;
+}
+function hideNativeHost(host) {
+  if (!host)
+    return;
+  host.scrollBox.visible = false;
+  hideAllChildren(host);
+  host.active = null;
+}
+function applyNativeHost(host, mount, layout) {
+  if (!host)
+    return false;
+  try {
+    const left = mount.left ?? layout.centerLeft;
+    const top = mount.top ?? layout.centerTop;
+    const width = Math.max(8, mount.width ?? layout.centerWidth);
+    const height = Math.max(3, mount.height ?? layout.centerHeight);
+    host.scrollBox.left = left;
+    host.scrollBox.top = top;
+    host.scrollBox.width = width;
+    host.scrollBox.height = height;
+    host.scrollBox.visible = true;
+    hideAllChildren(host);
+    const rowCount = mount.rows?.length ?? 0;
+    const key = `${mount.kind}:${width}x${height}:${mount.content.length}:${mount.filetype ?? ""}:${rowCount}`;
+    if (mount.kind === "table") {
+      if (!host.table) {
+        host.table = new TextTableRenderable(host.scrollBox.ctx, { id: "rig-native-table", content: [], width: "100%", showBorders: true, columnWidthMode: "full", borderColor: RIG_UI.ink4 });
+        host.scrollBox.add(host.table);
+      }
+      if (host.lastKey !== key)
+        host.table.content = tableContent(mount.rows ?? []);
+      host.table.visible = true;
+    } else if (mount.kind === "diff") {
+      if (!host.diff) {
+        host.diff = new DiffRenderable(host.scrollBox.ctx, { id: "rig-native-diff", diff: "", width: "100%" });
+        host.scrollBox.add(host.diff);
+      }
+      if (host.lastKey !== key)
+        host.diff.diff = mount.content;
+      host.diff.visible = true;
+    } else {
+      const filetype = mount.kind === "markdown" ? "markdown" : mount.filetype ?? "text";
+      if (!host.code) {
+        host.code = new CodeRenderable(host.scrollBox.ctx, { id: "rig-native-code", content: "", filetype, syntaxStyle: rigSyntaxStyle(), width: "100%" });
+        host.scrollBox.add(host.code);
+      }
+      if (host.lastKey !== key) {
+        host.code.filetype = filetype;
+        host.code.content = mount.content;
+      }
+      host.code.visible = true;
+    }
+    host.active = mount.kind;
+    host.lastKey = key;
+    if (mount.stickyBottom)
+      host.scrollBox.scrollTo?.({ x: 0, y: Number.MAX_SAFE_INTEGER });
+    return true;
+  } catch {
+    hideNativeHost(host);
+    return false;
+  }
+}
+function destroyNativeHost(host) {
+  if (!host)
+    return;
+  try {
+    host.scrollBox.destroy?.();
+  } catch {}
+}
+function nativeTitleBar(renderer, id) {
+  return new TextRenderable(renderer, { id, content: "", position: "absolute", left: 0, top: 0, fg: RIG_UI.ink3, zIndex: 10, visible: false });
+}
+export {
+  nativeTitleBar,
+  hideNativeHost,
+  destroyNativeHost,
+  createNativeHost,
+  applyNativeHost,
+  BoxRenderable
+};

package/dist/src/app-opentui/render/panels.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"
@@ -112,6 +114,8 @@ function applyFlowTextLine(renderable, line, width) {
 // packages/cli/src/app-opentui/render/panels.ts
 var TRANSPARENT2 = RGBA2.fromInts(0, 0, 0, 0);
 var MAX_PANEL_LINES = 420;
+var PANEL_OPAQUE_ALPHA = 255;
+var PANEL_BORDER = hexToRgba(RIG_UI.border, 255);
 function hexToRgba(hex, alpha) {
   const clean = hex.replace(/^#/, "");
   const full = clean.length === 3 ? clean.split("").map((part) => `${part}${part}`).join("") : clean;
@@ -121,10 +125,12 @@ function hexToRgba(hex, alpha) {
   return RGBA2.fromInts(value >> 16 & 255, value >> 8 & 255, value & 255, alpha);
 }
 function panelBackground(panel) {
-  return hexToRgba(panel.backgroundColor ?? RIG_UI.panel, panel.backgroundAlpha ?? 184);
+  return hexToRgba(panel.backgroundColor ?? RIG_UI.panel, PANEL_OPAQUE_ALPHA);
 }
 function panelBorder(panel) {
-  return panel.borderColor ? hexToRgba(panel.borderColor, panel.borderAlpha ?? 54) : TRANSPARENT2;
+  if (panel.borderColor)
+    return hexToRgba(panel.borderColor, panel.borderAlpha ?? 255);
+  return PANEL_BORDER;
 }
 function createScrollPanelLayer(renderer, id, onLineMouseDown) {
   const panel = new ScrollBoxRenderable(renderer, {
@@ -208,9 +214,10 @@ function applyScrollPanels(panels, layout, scenePanels) {
     renderable.height = height;
     renderable.zIndex = panel.zIndex ?? 6;
     renderable.opacity = panel.opacity ?? 1;
-    renderable.backgroundColor = panel.chrome === "ad-terminal" ? TRANSPARENT2 : panelBackground(panel);
-    renderable.border = panel.chrome === "ad-terminal" ? false : panel.border ?? false;
-    renderable.borderColor = panelBorder(panel);
+    const adTerminal = panel.chrome === "ad-terminal";
+    renderable.backgroundColor = adTerminal ? TRANSPARENT2 : panelBackground(panel);
+    renderable.border = adTerminal ? false : true;
+    renderable.borderColor = adTerminal ? TRANSPARENT2 : panelBorder(panel);
     renderable.paddingX = paddingX;
     renderable.paddingY = paddingY;
     renderable.stickyScroll = panel.stickyScroll ?? false;

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

@@ -11,15 +11,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"

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

@@ -1,5 +1,5 @@
 import { type StageLayout } from "../layout";
-import type { AppSceneFrame, AppSceneLine } from "../types";
+import type { AppSceneFrame, AppSceneLine, AppState } from "../types";
 export declare function line(text: string, options?: Omit<AppSceneLine, "text">): AppSceneLine;
 export declare function blank(): AppSceneLine;
 export declare function center(text: string, fg?: string, bold?: boolean): AppSceneLine;
@@ -11,9 +11,58 @@ export declare function deckRow(input: {
     readonly activateOnClick?: boolean;
 }): AppSceneLine;
 export declare function kv(label: string, value: string, fg?: string): AppSceneLine;
+/**
+ * The canonical selectable row — the one selection-highlight mechanism for the
+ * whole shell (the dense tables already do this; this lifts the pattern out of
+ * each scene so they converge). A selected row gets the solid left rule
+ * (`SELECTION_MARKER`), lime+bold text, and `RIG_UI.glass` as the row `bg` so it
+ * paints a raised bar on the opaque panel ground (render/text.ts plumbs `bg` →
+ * RGBA). An idle row keeps a same-width blank marker so labels stay
+ * column-aligned whether or not a row is selected. `selectableIndex` makes the
+ * row clickable/navigable; pass the list index.
+ */
+export declare function selectionLine(input: {
+    readonly text: string;
+    readonly active: boolean;
+    readonly index?: number;
+    readonly activateOnClick?: boolean;
+}): AppSceneLine;
+/**
+ * A dense-table header row: bold ink heading text on the `RIG_UI.glass` bar, the
+ * same raised-bar treatment a selected row gets, so a table's header and its
+ * selection share one visual language. Columns are joined with the shared
+ * `COLUMN_GUTTER`; pass already-padded column labels.
+ */
+export declare function tableHeaderLine(columns: readonly string[]): AppSceneLine;
+/**
+ * A `LABEL  value` definition row padded to the shared `LABEL_WIDTH`, the
+ * canonical width for kv/deck rows across the shell (scenes had diverged on
+ * 10/22/26). The label is upper-cased chrome; the value carries the data tone.
+ */
+export declare function labeledLine(label: string, value: string, fg?: string): AppSceneLine;
 export declare function loadingLine(message?: string): AppSceneLine;
 export declare function emptyLine(message?: string): AppSceneLine;
 export declare function errorLine(message: string): AppSceneLine;
+/**
+ * Per-scene preloader shown while a scene's primary data slice is still absent
+ * during a `loading` status (#22). Uses the Rig drone mascot — the animated
+ * signal-bus fleet sized for a panel body — with a captioned drone underneath,
+ * so a slow fetch reads as a live, branded "fetching" state rather than an empty
+ * panel. `tick` (from AppState.tick) drives the animation; pass it from the
+ * scene. `compact` swaps the full fleet for a single mini drone in tight panels.
+ */
+export declare function loadingRows(label: string, tick?: number, compact?: boolean): AppSceneLine[];
+/**
+ * Non-destructive failure banner for a degraded background refresh. Surfaces
+ * the error text without wiping the last-known data, and points the operator at
+ * the existing refresh/retry deck row below.
+ */
+export declare function errorBanner(message: string, hint?: string): AppSceneLine[];
+/**
+ * Typed reader for the background-refresh error string the data adapters write
+ * onto `state.data.lastRefreshError` (cleared on a successful refresh).
+ */
+export declare function lastRefreshError(state: AppState): string | undefined;
 export declare function fitSceneLine(input: AppSceneLine, layout: StageLayout): AppSceneLine;
 export declare function fitSceneLines(lines: readonly AppSceneLine[], layout: StageLayout): AppSceneLine[];
 export declare function makeSceneFrame(input: AppSceneFrame): AppSceneFrame;