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

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

@@ -0,0 +1,165 @@
+// @bun
+// 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/preloader.ts
+var PRELOADER_MIN_DURATION_MS = 520;
+var PRELOADER_MAX_DURATION_MS = 5000;
+function maybeStartPreloaderTransition(transition, scene, now = Date.now()) {
+  if (transition.scene === scene)
+    return;
+  transition.scene = scene;
+  transition.startedAtMs = now;
+  transition.minUntilMs = now + PRELOADER_MIN_DURATION_MS;
+}
+function isPreloaderActive(transition, targetReady, now = Date.now()) {
+  if (now < transition.minUntilMs)
+    return true;
+  if (!targetReady && now - transition.startedAtMs < PRELOADER_MAX_DURATION_MS)
+    return true;
+  return false;
+}
+function preloaderLine(line, options = {}) {
+  return { text: line, bg: RIG_UI.bg, ...options };
+}
+function blockLine(text, leftPad, fg) {
+  return preloaderLine(`${" ".repeat(Math.max(0, leftPad))}${text.padEnd(FLEET_GRID_WIDTH)}`, { fg });
+}
+function renderAsciiPreloaderFrame(scene, layout, tick) {
+  const sprite = fleetRows(tick);
+  const leftPad = Math.max(0, Math.floor((layout.width - FLEET_GRID_WIDTH) / 2));
+  const blank = () => preloaderLine("");
+  const body = [
+    ...sprite.map((text, index) => blockLine(text, leftPad, index >= 7 && index <= 18 ? RIG_UI.lime : RIG_UI.limeDim))
+  ];
+  const topPadding = Math.max(0, Math.floor((layout.height - body.length) / 2));
+  const bottomPadding = Math.max(0, layout.height - body.length - topPadding);
+  return {
+    scene,
+    title: "Preloader",
+    lines: [...Array.from({ length: topPadding }, blank), ...body, ...Array.from({ length: bottomPadding }, blank)],
+    live: true,
+    fullScreen: true,
+    hideTypeBar: true,
+    footer: { message: "" }
+  };
+}
+export {
+  renderAsciiPreloaderFrame,
+  maybeStartPreloaderTransition,
+  isPreloaderActive
+};

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,6 +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;

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

@@ -36,19 +36,25 @@ 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"
 };
+var SELECTION_MARKER = "\u258C";
+var SELECTION_MARKER_IDLE = " ";
+var LABEL_WIDTH = 14;
+var COLUMN_GUTTER = "  ";
 var styles = {
   ink: otuiFg(RIG_UI.ink),
   ink2: otuiFg(RIG_UI.ink2),
@@ -62,6 +68,134 @@ var styles = {
   magenta: otuiFg(RIG_UI.magenta)
 };
 
+// packages/cli/src/app-opentui/drone.ts
+import { RGBA, StyledText, TextAttributes as TextAttributes2 } from "@opentui/core";
+var MINI_DRONE = [
+  "(!!!)   (!!!)",
+  "  \\%==%/  ",
+  "   %%?%%   ",
+  "  /%==%\\  ",
+  "(!!!)   (!!!)"
+];
+var LEAD_MARK = [
+  " .-=-. ",
+  "=%%?%%=",
+  " '-=-' "
+];
+var BLADE_FRAMES = ["---", "\\\\\\", "|||", "///"];
+var EYE_FRAMES = ["o", "@", "\u2022", "."];
+var COLOR = {
+  body: RGBA.fromHex(RIG_UI.lime),
+  mini: RGBA.fromHex(RIG_UI.limeDim),
+  rotor: RGBA.fromHex(RIG_UI.cyan),
+  path: RGBA.fromHex(RIG_UI.cyan),
+  eye: RGBA.fromHex(RIG_UI.ink),
+  dim: RGBA.fromHex(RIG_UI.ink4),
+  ink: RGBA.fromHex(RIG_UI.ink2)
+};
+function bladeForTick(tick, phase = 0) {
+  return BLADE_FRAMES[(Math.floor(tick / 3) + phase) % BLADE_FRAMES.length];
+}
+function eyeForTick(tick, phase = 0) {
+  const pulse = Math.sin(tick * 0.09 + phase);
+  return pulse > 0.55 ? EYE_FRAMES[1] : pulse > 0.1 ? EYE_FRAMES[0] : pulse > -0.45 ? EYE_FRAMES[2] : EYE_FRAMES[3];
+}
+function chunk(text, fg, bold = false, dim = false) {
+  let attributes = TextAttributes2.NONE;
+  if (bold)
+    attributes |= TextAttributes2.BOLD;
+  if (dim)
+    attributes |= TextAttributes2.DIM;
+  return { __isChunk: true, text, fg, ...attributes !== TextAttributes2.NONE ? { attributes } : {} };
+}
+function styledLine(text, colorFor) {
+  const chunks = [];
+  let run = "";
+  let runColor = null;
+  const flush = () => {
+    if (!run || !runColor)
+      return;
+    chunks.push(chunk(run, COLOR[runColor], runColor === "body" || runColor === "eye", runColor === "dim"));
+    run = "";
+  };
+  for (const char of text) {
+    const next = colorFor(char);
+    if (next !== runColor) {
+      flush();
+      runColor = next;
+    }
+    run += char;
+  }
+  flush();
+  return new StyledText(chunks.length > 0 ? chunks : [chunk("", COLOR.ink)]);
+}
+function droneColor(char) {
+  if (char === "?" || char === "o" || char === "@" || char === "\u2022")
+    return "eye";
+  if (char === "%" || char === "=")
+    return "mini";
+  if (char === "$")
+    return "body";
+  if (char === "(" || char === ")" || char === "/" || char === "\\" || char === "|" || char === "-")
+    return "rotor";
+  if (char === "\xB7" || char === "\u2022" || char === "'" || char === ".")
+    return "path";
+  if (char.trim() === "")
+    return "dim";
+  return "ink";
+}
+function motionColor(char) {
+  if (char === "\u25CF" || char === "\u25C6" || char === "\u25C9")
+    return "body";
+  if (char === "\u2022" || char === "\xB7" || char === "\u2500" || char === "\u2502" || char === "\u2571" || char === "\u2572" || char === "\u256D" || char === "\u256E" || char === "\u2570" || char === "\u256F")
+    return "path";
+  if (char === "\u258C" || char === "\u2590" || char === "\u2581" || char === "\u2594")
+    return "mini";
+  return droneColor(char);
+}
+function materializeDrone(lines, tick, phase = 0) {
+  const blade = bladeForTick(tick, phase);
+  const eye = eyeForTick(tick, phase);
+  return lines.map((line) => line.replaceAll("!!!", blade).replaceAll("?", eye));
+}
+function miniDroneLines(tick, align = "left", phase = 0) {
+  return materializeDrone(MINI_DRONE, tick, phase).map((text) => ({
+    text,
+    styledText: styledLine(text, droneColor),
+    fg: RIG_UI.limeDim,
+    align
+  }));
+}
+function brandFleetLines(tick, align = "center") {
+  const left = materializeDrone(MINI_DRONE, tick, 0);
+  const right = materializeDrone(MINI_DRONE, tick, 2);
+  const lead = materializeDrone(LEAD_MARK, tick, 1);
+  const packet = ["\xB7", "\u2022", "\u25CF", "\u2022"][Math.floor(tick / 2) % 4];
+  const bridge = [
+    `    ${left[0]}       ${lead[0]}       ${right[0]}`,
+    `    ${left[1]}   \xB7\u2500\u2500${packet}\u2500\u2500\xB7   ${lead[1]}   \xB7\u2500\u2500${packet}\u2500\u2500\xB7   ${right[1]}`,
+    `    ${left[2]}  \xB7'       '${lead[2]}'       '\xB7  ${right[2]}`,
+    `    ${left[3]}       \u2572  signal bus  \u2571       ${right[3]}`,
+    `    ${left[4]}    \xB7\u2500\u2500\u2500${packet}\u2500\u2500\u2500\u2500\u2500\u2500${packet}\u2500\u2500\u2500\xB7    ${right[4]}`
+  ];
+  return bridge.map((text) => ({
+    text,
+    styledText: styledLine(text, motionColor),
+    fg: RIG_UI.limeDim,
+    align
+  }));
+}
+function actionDrone(tick, phase = 0) {
+  const blade = bladeForTick(tick, phase);
+  const eye = eyeForTick(tick, phase);
+  return `(${blade})\u2572${eye}\u2571(${blade})`;
+}
+function actionDroneLine(tick, text, fg = RIG_UI.ink2) {
+  const prefix = actionDrone(tick);
+  const content = `${prefix}  ${text}`;
+  return { text: content, styledText: styledLine(content, motionColor), fg, align: "center" };
+}
+
 // packages/cli/src/app-opentui/render/scene.ts
 function line(text, options = {}) {
   return { text, ...options };
@@ -85,6 +219,52 @@ function deckRow(input) {
 function kv(label, value, fg = RIG_UI.ink2) {
   return line(`  ${label.toUpperCase().padEnd(10)} ${value}`, { fg });
 }
+function selectionLine(input) {
+  const marker = input.active ? SELECTION_MARKER : SELECTION_MARKER_IDLE;
+  return line(`${marker} ${input.text}`, {
+    fg: input.active ? RIG_UI.lime : RIG_UI.ink2,
+    bold: input.active,
+    bg: input.active ? RIG_UI.glass : undefined,
+    selectableIndex: input.index,
+    activateOnClick: input.activateOnClick
+  });
+}
+function tableHeaderLine(columns) {
+  return line(columns.join(COLUMN_GUTTER), { fg: RIG_UI.ink, bold: true, bg: RIG_UI.glass });
+}
+function labeledLine(label, value, fg = RIG_UI.ink2) {
+  return line(`${COLUMN_GUTTER}${label.toUpperCase().padEnd(LABEL_WIDTH)}${COLUMN_GUTTER}${value}`, { fg });
+}
+function loadingLine(message = "loading") {
+  return line(`  \u27F2 ${message}`, { fg: RIG_UI.limeDim });
+}
+function emptyLine(message = "nothing here yet") {
+  return line(`  ${message}`, { fg: RIG_UI.ink4 });
+}
+function errorLine(message) {
+  return line(`  ! ${message}`, { fg: RIG_UI.magenta, bold: true });
+}
+function loadingRows(label, tick = 0, compact = false) {
+  const mascot = compact ? miniDroneLines(tick, "center") : brandFleetLines(tick, "center");
+  return [
+    blank(),
+    ...mascot,
+    blank(),
+    { ...actionDroneLine(tick, `loading ${label}\u2026`, RIG_UI.cyan), align: "center" }
+  ];
+}
+function errorBanner(message, hint) {
+  return [
+    line(`\u2717 failed to load \u2014 ${message}`, { fg: RIG_UI.red, bold: true }),
+    ...hint ? [line(`  ${hint}`, { fg: RIG_UI.ink3 })] : [],
+    line("  select refresh/retry below", { fg: RIG_UI.ink4 }),
+    line("", { fg: RIG_UI.ink3 })
+  ];
+}
+function lastRefreshError(state) {
+  const value = state.data.lastRefreshError;
+  return typeof value === "string" && value.trim() ? value : undefined;
+}
 function fitSceneLine(input, layout) {
   const fitted = truncateText(input.text, layout.centerWidth);
   return {
@@ -99,11 +279,20 @@ function makeSceneFrame(input) {
   return input;
 }
 export {
+  tableHeaderLine,
+  selectionLine,
   makeSceneFrame,
+  loadingRows,
+  loadingLine,
   line,
+  lastRefreshError,
+  labeledLine,
   kv,
   fitSceneLines,
   fitSceneLine,
+  errorLine,
+  errorBanner,
+  emptyLine,
   deckRow,
   center,
   blank

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

@@ -1,5 +1,11 @@
-import { TextRenderable, type CliRenderer, type MouseEvent } from "@opentui/core";
+import { RGBA, TextRenderable, type CliRenderer, type MouseEvent } from "@opentui/core";
 import type { AppSceneLine } from "../types";
+/** The "no background" sentinel: a line with no `bg` paints nothing and lets the
+ * opaque panel ground (render/panels.ts) show through. A line WITH a `bg` (e.g.
+ * a selected row, set via RIG_UI.glass) paints a raised bar on that ground —
+ * this is the one selection-highlight mechanism, plumbed end-to-end here so
+ * scenes only set `bg` on the AppSceneLine and never touch RGBA. */
+export declare const TRANSPARENT: RGBA;
 export type TextLineRenderable = TextRenderable & {
     setRigSceneLine?(line: AppSceneLine | undefined): void;
 };

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

@@ -1,6 +1,6 @@
 // @bun
 // packages/cli/src/app-opentui/render/text.ts
-import { TextAttributes as TextAttributes2, TextRenderable } from "@opentui/core";
+import { RGBA, TextAttributes as TextAttributes2, TextRenderable } from "@opentui/core";
 
 // packages/cli/src/app-opentui/theme.ts
 import {
@@ -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"
@@ -41,6 +43,7 @@ var styles = {
 };
 
 // packages/cli/src/app-opentui/render/text.ts
+var TRANSPARENT = RGBA.fromInts(0, 0, 0, 0);
 function selectableMouseHandler(currentLineRef, onLineMouseDown) {
   return (event) => {
     const currentLine = currentLineRef();
@@ -91,6 +94,7 @@ function applyTextLine(renderable, line, top, left, width) {
   renderable.width = width;
   renderable.content = line?.styledText ?? line?.text ?? "";
   renderable.fg = line?.fg ?? RIG_UI.ink2;
+  renderable.bg = line?.bg ?? TRANSPARENT;
   renderable.attributes = line?.bold ? TextAttributes2.BOLD : line?.dim ? TextAttributes2.DIM : 0;
 }
 function applyFlowTextLine(renderable, line, width) {
@@ -100,6 +104,7 @@ function applyFlowTextLine(renderable, line, width) {
   renderable.width = Math.max(1, width);
   renderable.content = line?.styledText ?? line?.text ?? "";
   renderable.fg = line?.fg ?? RIG_UI.ink2;
+  renderable.bg = line?.bg ?? TRANSPARENT;
   renderable.attributes = line?.bold ? TextAttributes2.BOLD : line?.dim ? TextAttributes2.DIM : 0;
 }
 function clearTextLines(renderables, from = 0) {
@@ -110,6 +115,7 @@ function clearTextLines(renderables, from = 0) {
     renderable.top = -1;
     renderable.left = 0;
     renderable.width = 1;
+    renderable.bg = TRANSPARENT;
   }
 }
 export {
@@ -117,5 +123,6 @@ export {
   createFlowTextLine,
   clearTextLines,
   applyTextLine,
-  applyFlowTextLine
+  applyFlowTextLine,
+  TRANSPARENT
 };

package/dist/src/app-opentui/render/type-bar.d.ts

@@ -1,6 +1,7 @@
-import { InputRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
+import { BoxRenderable, InputRenderable, TextRenderable, type CliRenderer } from "@opentui/core";
 import type { AppFooterState, AppTypeBarState } from "../types";
 export type TypeBarRenderables = {
+    readonly background: BoxRenderable;
     readonly input: InputRenderable;
     readonly prefix: TextRenderable;
     readonly footer: TextRenderable;