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

package/dist/src/app-opentui/render/panel-layout.d.ts

@@ -0,0 +1,38 @@
+import type { StageLayout } from "../layout";
+import type { AppScenePanel } from "../types";
+export type PanelCellRect = {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly headerHeight: number;
+    readonly dividerY: number;
+};
+export type PanelContentRect = {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+    readonly paddingX: number;
+    readonly paddingY: number;
+    readonly contentWidth: number;
+};
+export type PanelPixelSize = {
+    readonly width: number;
+    readonly height: number;
+};
+export type PanelPixelPlacement = {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+    readonly leftCells: number;
+    readonly topCells: number;
+    readonly widthCells: number;
+    readonly heightCells: number;
+};
+export declare function panelCellRect(layout: StageLayout, panel: AppScenePanel): PanelCellRect | null;
+export declare function panelContentRect(layout: StageLayout, panel: AppScenePanel): PanelContentRect | null;
+export declare function panelPixelPlacement(layout: StageLayout, panel: AppScenePanel, size: PanelPixelSize, minPixels?: number): PanelPixelPlacement | null;

package/dist/src/app-opentui/render/panel-layout.js

@@ -0,0 +1,48 @@
+// @bun
+// packages/cli/src/app-opentui/render/panel-layout.ts
+function panelCellRect(layout, panel) {
+  const left = Math.max(0, Math.min(layout.width - 1, layout.centerLeft + (panel.left ?? 0)));
+  const desiredWidth = panel.width ?? layout.centerWidth;
+  const width = Math.max(1, Math.min(layout.width - left, desiredWidth));
+  const top = Math.max(0, Math.min(layout.height - 1, layout.centerTop + panel.top));
+  const height = Math.max(1, Math.min(layout.height - top, panel.height));
+  if (width <= 3 || height <= 3)
+    return null;
+  const right = left + width - 1;
+  const bottom = top + height - 1;
+  const headerHeight = panel.chrome === "ad-terminal" ? Math.max(3, Math.min(height - 2, panel.headerHeight ?? 3)) : 0;
+  const dividerY = headerHeight ? Math.min(bottom - 1, top + headerHeight) : top;
+  return { left, top, width, height, right, bottom, headerHeight, dividerY };
+}
+function panelContentRect(layout, panel) {
+  const rect = panelCellRect(layout, panel);
+  if (!rect)
+    return null;
+  const chromeInset = panel.chrome === "ad-terminal" ? 1 : 0;
+  const left = rect.left + chromeInset;
+  const top = rect.top + rect.headerHeight + chromeInset;
+  const width = Math.max(1, Math.min(layout.width - left, rect.width - chromeInset * 2));
+  const height = Math.max(1, Math.min(layout.height - top, rect.height - rect.headerHeight - chromeInset * 2));
+  const paddingX = panel.paddingX ?? (panel.chrome === "ad-terminal" ? 5 : 2);
+  const paddingY = panel.paddingY ?? (panel.chrome === "ad-terminal" ? 2 : 1);
+  const contentWidth = Math.max(1, width - paddingX * 2 - 1);
+  return { left, top, width, height, paddingX, paddingY, contentWidth };
+}
+function panelPixelPlacement(layout, panel, size, minPixels = 8) {
+  const cellW = size.width / layout.width;
+  const cellH = size.height / layout.height;
+  const leftCells = layout.centerLeft + (panel.left ?? 0);
+  const topCells = layout.centerTop + panel.top;
+  const widthCells = panel.width ?? layout.centerWidth;
+  const heightCells = panel.height;
+  const left = Math.round(leftCells * cellW);
+  const top = Math.round(topCells * cellH);
+  const width = Math.round(widthCells * cellW);
+  const height = Math.round(heightCells * cellH);
+  return width > minPixels && height > minPixels ? { left, top, width, height, leftCells, topCells, widthCells, heightCells } : null;
+}
+export {
+  panelPixelPlacement,
+  panelContentRect,
+  panelCellRect
+};

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

@@ -4,6 +4,8 @@ import type { AppSceneLine, AppScenePanel } from "../types";
 import { type TextLineRenderable } from "./text";
 export type ScrollPanelRenderable = ScrollBoxRenderable & {
     __rigTextLines: TextLineRenderable[];
+    __rigRenderer: CliRenderer;
+    __rigOnLineMouseDown?: (line: AppSceneLine, event: MouseEvent) => void;
     __rigPanelId?: string;
 };
 export declare function createScrollPanelLayer(renderer: CliRenderer, id: string, onLineMouseDown?: (line: AppSceneLine, event: MouseEvent) => void): ScrollPanelRenderable;

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

@@ -1,6 +1,6 @@
 // @bun
 // packages/cli/src/app-opentui/render/panels.ts
-import { RGBA, ScrollBoxRenderable } from "@opentui/core";
+import { RGBA as RGBA2, ScrollBoxRenderable } from "@opentui/core";
 
 // packages/cli/src/app-opentui/theme.ts
 import {
@@ -40,8 +40,39 @@ var styles = {
   magenta: otuiFg(RIG_UI.magenta)
 };
 
+// packages/cli/src/app-opentui/render/panel-layout.ts
+function panelCellRect(layout, panel) {
+  const left = Math.max(0, Math.min(layout.width - 1, layout.centerLeft + (panel.left ?? 0)));
+  const desiredWidth = panel.width ?? layout.centerWidth;
+  const width = Math.max(1, Math.min(layout.width - left, desiredWidth));
+  const top = Math.max(0, Math.min(layout.height - 1, layout.centerTop + panel.top));
+  const height = Math.max(1, Math.min(layout.height - top, panel.height));
+  if (width <= 3 || height <= 3)
+    return null;
+  const right = left + width - 1;
+  const bottom = top + height - 1;
+  const headerHeight = panel.chrome === "ad-terminal" ? Math.max(3, Math.min(height - 2, panel.headerHeight ?? 3)) : 0;
+  const dividerY = headerHeight ? Math.min(bottom - 1, top + headerHeight) : top;
+  return { left, top, width, height, right, bottom, headerHeight, dividerY };
+}
+function panelContentRect(layout, panel) {
+  const rect = panelCellRect(layout, panel);
+  if (!rect)
+    return null;
+  const chromeInset = panel.chrome === "ad-terminal" ? 1 : 0;
+  const left = rect.left + chromeInset;
+  const top = rect.top + rect.headerHeight + chromeInset;
+  const width = Math.max(1, Math.min(layout.width - left, rect.width - chromeInset * 2));
+  const height = Math.max(1, Math.min(layout.height - top, rect.height - rect.headerHeight - chromeInset * 2));
+  const paddingX = panel.paddingX ?? (panel.chrome === "ad-terminal" ? 5 : 2);
+  const paddingY = panel.paddingY ?? (panel.chrome === "ad-terminal" ? 2 : 1);
+  const contentWidth = Math.max(1, width - paddingX * 2 - 1);
+  return { left, top, width, height, paddingX, paddingY, contentWidth };
+}
+
 // 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";
+var TRANSPARENT = RGBA.fromInts(0, 0, 0, 0);
 function selectableMouseHandler(currentLineRef, onLineMouseDown) {
   return (event) => {
     const currentLine = currentLineRef();
@@ -74,25 +105,26 @@ 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;
 }
 
 // packages/cli/src/app-opentui/render/panels.ts
-var TRANSPARENT = RGBA.fromInts(0, 0, 0, 0);
+var TRANSPARENT2 = RGBA2.fromInts(0, 0, 0, 0);
 var MAX_PANEL_LINES = 420;
 function hexToRgba(hex, alpha) {
   const clean = hex.replace(/^#/, "");
   const full = clean.length === 3 ? clean.split("").map((part) => `${part}${part}`).join("") : clean;
   const value = Number.parseInt(full, 16);
   if (!Number.isFinite(value))
-    return RGBA.fromInts(14, 15, 17, alpha);
-  return RGBA.fromInts(value >> 16 & 255, value >> 8 & 255, value & 255, alpha);
+    return RGBA2.fromInts(14, 15, 17, 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);
 }
 function panelBorder(panel) {
-  return panel.borderColor ? hexToRgba(panel.borderColor, panel.borderAlpha ?? 54) : TRANSPARENT;
+  return panel.borderColor ? hexToRgba(panel.borderColor, panel.borderAlpha ?? 54) : TRANSPARENT2;
 }
 function createScrollPanelLayer(renderer, id, onLineMouseDown) {
   const panel = new ScrollBoxRenderable(renderer, {
@@ -102,7 +134,7 @@ function createScrollPanelLayer(renderer, id, onLineMouseDown) {
     top: -2,
     width: 1,
     height: 1,
-    backgroundColor: TRANSPARENT,
+    backgroundColor: TRANSPARENT2,
     border: false,
     shouldFill: true,
     opacity: 1,
@@ -118,7 +150,7 @@ function createScrollPanelLayer(renderer, id, onLineMouseDown) {
       visible: false,
       width: 1,
       trackOptions: {
-        backgroundColor: TRANSPARENT,
+        backgroundColor: TRANSPARENT2,
         foregroundColor: hexToRgba(RIG_UI.ink4, 84)
       }
     },
@@ -126,18 +158,24 @@ function createScrollPanelLayer(renderer, id, onLineMouseDown) {
       height: 0,
       visible: false,
       trackOptions: {
-        backgroundColor: TRANSPARENT,
-        foregroundColor: TRANSPARENT
+        backgroundColor: TRANSPARENT2,
+        foregroundColor: TRANSPARENT2
       }
     }
   });
   panel.__rigTextLines = [];
-  for (let index = 0;index < MAX_PANEL_LINES; index += 1) {
-    const line = createFlowTextLine(renderer, `${id}-line-${index}`, onLineMouseDown);
+  panel.__rigRenderer = renderer;
+  panel.__rigOnLineMouseDown = onLineMouseDown;
+  return panel;
+}
+function ensurePanelLineCount(panel, desiredCount) {
+  const target = Math.min(MAX_PANEL_LINES, Math.max(0, desiredCount));
+  while (panel.__rigTextLines.length < target) {
+    const index = panel.__rigTextLines.length;
+    const line = createFlowTextLine(panel.__rigRenderer, `${panel.id}-line-${index}`, panel.__rigOnLineMouseDown);
     panel.__rigTextLines.push(line);
     panel.add(line);
   }
-  return panel;
 }
 function hidePanel(panel) {
   panel.visible = false;
@@ -145,7 +183,7 @@ function hidePanel(panel) {
   panel.left = 0;
   panel.width = 1;
   panel.height = 1;
-  panel.backgroundColor = TRANSPARENT;
+  panel.backgroundColor = TRANSPARENT2;
   panel.border = false;
   panel.__rigPanelId = undefined;
   panel.__rigTextLines.forEach((line) => applyFlowTextLine(line, undefined, 1));
@@ -157,19 +195,12 @@ function applyScrollPanels(panels, layout, scenePanels) {
       hidePanel(renderable);
       return;
     }
-    const cardLeft = Math.max(0, Math.min(layout.width - 1, layout.centerLeft + (panel.left ?? 0)));
-    const desiredWidth = panel.width ?? layout.centerWidth;
-    const cardWidth = Math.max(1, Math.min(layout.width - cardLeft, desiredWidth));
-    const cardTop = Math.max(0, Math.min(layout.height - 1, layout.centerTop + panel.top));
-    const cardHeight = Math.max(1, Math.min(layout.height - cardTop, panel.height));
-    const headerHeight = panel.chrome === "ad-terminal" ? Math.max(3, Math.min(cardHeight - 2, panel.headerHeight ?? 3)) : 0;
-    const left = cardLeft + (panel.chrome === "ad-terminal" ? 1 : 0);
-    const top = cardTop + headerHeight + (panel.chrome === "ad-terminal" ? 1 : 0);
-    const width = Math.max(1, Math.min(layout.width - left, cardWidth - (panel.chrome === "ad-terminal" ? 2 : 0)));
-    const height = Math.max(1, Math.min(layout.height - top, cardHeight - headerHeight - (panel.chrome === "ad-terminal" ? 2 : 0)));
-    const paddingX = panel.paddingX ?? (panel.chrome === "ad-terminal" ? 5 : 2);
-    const paddingY = panel.paddingY ?? (panel.chrome === "ad-terminal" ? 2 : 1);
-    const contentWidth = Math.max(1, width - paddingX * 2 - 1);
+    const contentRect = panelContentRect(layout, panel);
+    if (!contentRect) {
+      hidePanel(renderable);
+      return;
+    }
+    const { left, top, width, height, paddingX, paddingY, contentWidth } = contentRect;
     renderable.visible = true;
     renderable.left = left;
     renderable.top = top;
@@ -177,7 +208,7 @@ function applyScrollPanels(panels, layout, scenePanels) {
     renderable.height = height;
     renderable.zIndex = panel.zIndex ?? 6;
     renderable.opacity = panel.opacity ?? 1;
-    renderable.backgroundColor = panel.chrome === "ad-terminal" ? TRANSPARENT : panelBackground(panel);
+    renderable.backgroundColor = panel.chrome === "ad-terminal" ? TRANSPARENT2 : panelBackground(panel);
     renderable.border = panel.chrome === "ad-terminal" ? false : panel.border ?? false;
     renderable.borderColor = panelBorder(panel);
     renderable.paddingX = paddingX;
@@ -190,8 +221,10 @@ function applyScrollPanels(panels, layout, scenePanels) {
       renderable.__rigPanelId = panel.id;
       renderable.scrollTo(0);
     }
+    const lineCount = Math.min(panel.lines.length, MAX_PANEL_LINES);
+    ensurePanelLineCount(renderable, lineCount);
     renderable.__rigTextLines.forEach((line, lineIndex) => {
-      applyFlowTextLine(line, panel.lines[lineIndex], contentWidth);
+      applyFlowTextLine(line, lineIndex < lineCount ? panel.lines[lineIndex] : undefined, contentWidth);
     });
   });
 }

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

@@ -0,0 +1,10 @@
+import type { StageLayout } from "../layout";
+import type { AppSceneFrame, AppSceneId } from "../types";
+export type PreloaderTransitionState = {
+    scene: AppSceneId | null;
+    startedAtMs: number;
+    minUntilMs: number;
+};
+export declare function maybeStartPreloaderTransition(transition: PreloaderTransitionState, scene: AppSceneId, now?: number): void;
+export declare function isPreloaderActive(transition: PreloaderTransitionState, targetReady: boolean, now?: number): boolean;
+export declare function renderAsciiPreloaderFrame(scene: AppSceneId, layout: StageLayout, tick: number): AppSceneFrame;

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

@@ -0,0 +1,163 @@
+// @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: "#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/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

@@ -11,6 +11,9 @@ export declare function deckRow(input: {
     readonly activateOnClick?: boolean;
 }): AppSceneLine;
 export declare function kv(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;
 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

@@ -85,6 +85,15 @@ function deckRow(input) {
 function kv(label, value, fg = RIG_UI.ink2) {
   return line(`  ${label.toUpperCase().padEnd(10)} ${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 fitSceneLine(input, layout) {
   const fitted = truncateText(input.text, layout.centerWidth);
   return {
@@ -100,10 +109,13 @@ function makeSceneFrame(input) {
 }
 export {
   makeSceneFrame,
+  loadingLine,
   line,
   kv,
   fitSceneLines,
   fitSceneLine,
+  errorLine,
+  emptyLine,
   deckRow,
   center,
   blank

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 {
@@ -41,6 +41,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 +92,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 +102,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 +113,7 @@ function clearTextLines(renderables, from = 0) {
     renderable.top = -1;
     renderable.left = 0;
     renderable.width = 1;
+    renderable.bg = TRANSPARENT;
   }
 }
 export {

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;

package/dist/src/app-opentui/render/type-bar.js

@@ -1,6 +1,6 @@
 // @bun
 // packages/cli/src/app-opentui/render/type-bar.ts
-import { InputRenderable, InputRenderableEvents, TextRenderable } from "@opentui/core";
+import { BoxRenderable, InputRenderable, InputRenderableEvents, RGBA, TextRenderable } from "@opentui/core";
 
 // packages/cli/src/app-opentui/theme.ts
 import {
@@ -53,48 +53,72 @@ function truncateText(text, width) {
 }
 
 // packages/cli/src/app-opentui/render/type-bar.ts
+var TYPEBAR_BG = RGBA.fromInts(20, 25, 14, 224);
+var TYPEBAR_BORDER = RGBA.fromInts(204, 255, 77, 92);
 function createTypeBar(renderer) {
-  const prefix = new TextRenderable(renderer, {
-    id: "rig-typebar-prefix",
-    content: " rig \u203A",
+  const background = new BoxRenderable(renderer, {
+    id: "typebar-card",
     position: "absolute",
     left: 0,
     top: 0,
+    width: 1,
+    height: 1,
+    backgroundColor: TYPEBAR_BG,
+    border: true,
+    borderColor: TYPEBAR_BORDER,
+    zIndex: 4
+  });
+  const prefix = new TextRenderable(renderer, {
+    id: "typebar-prefix",
+    content: " \u203A",
+    position: "absolute",
+    left: 1,
+    top: 0,
     fg: RIG_UI.lime,
+    zIndex: 7,
     selectable: true
   });
   const input = new InputRenderable(renderer, {
-    id: "rig-typebar-input",
+    id: "typebar-input",
     position: "absolute",
-    left: 7,
+    left: 4,
     top: 0,
     width: 40,
-    placeholder: "fleet \xB7 tasks \xB7 run next \xB7 help",
+    placeholder: "runs \xB7 tasks \xB7 run next \xB7 help",
     textColor: RIG_UI.ink,
     cursorColor: RIG_UI.lime,
     cursorStyle: { style: "block", blinking: false },
     showCursor: true,
+    zIndex: 7,
     selectable: true
   });
   const footer = new TextRenderable(renderer, {
-    id: "rig-footer",
+    id: "footer",
     content: "",
     position: "absolute",
     left: 0,
     top: 1,
     width: "100%",
     fg: RIG_UI.ink4,
+    zIndex: 7,
     selectable: true
   });
   input.focus();
-  return { input, prefix, footer };
+  return { background, input, prefix, footer };
 }
 function positionTypeBar(renderables, input, footer, width, typeBarTop, footerTop) {
-  renderables.prefix.content = " rig \u203A";
+  renderables.background.visible = true;
+  const cardTop = Math.max(0, typeBarTop - 1);
+  renderables.background.left = 0;
+  renderables.background.top = cardTop;
+  renderables.background.width = width;
+  renderables.background.height = Math.max(3, footerTop - cardTop + 1);
+  renderables.prefix.content = " \u203A";
+  renderables.prefix.left = 2;
   renderables.prefix.top = typeBarTop;
   renderables.input.top = typeBarTop;
-  renderables.input.left = 7;
-  renderables.input.width = Math.max(10, width - 9);
+  renderables.input.left = 5;
+  renderables.input.width = Math.max(10, width - 8);
   renderables.input.placeholder = input.placeholder;
   renderables.input.showCursor = true;
   renderables.footer.top = footerTop;
@@ -104,6 +128,8 @@ function positionTypeBar(renderables, input, footer, width, typeBarTop, footerTo
     renderables.input.focus();
 }
 function hideTypeBar(renderables, height) {
+  renderables.background.visible = false;
+  renderables.background.top = height + 1;
   renderables.prefix.content = "";
   renderables.prefix.top = height + 1;
   renderables.input.value = "";
@@ -119,13 +145,22 @@ function bindTypeBar(renderables, handlers) {
   renderables.input.on(InputRenderableEvents.INPUT, (value) => handlers.onInput(value));
   renderables.input.on(InputRenderableEvents.ENTER, (value) => handlers.onEnter(value));
 }
+function safeFooterMessage(message) {
+  const trimmed = message?.trim();
+  if (!trimmed)
+    return null;
+  if (/https?:|\b[a-z0-9-]+\.[a-z]{2,}\b|\brig\b/i.test(trimmed))
+    return null;
+  return trimmed;
+}
 function formatFooter(footer, width) {
+  const safeMessage = safeFooterMessage(footer.message);
   const parts = [
-    footer.project ? `project ${footer.project}` : null,
-    footer.server ? `server ${footer.server}` : null,
-    footer.auth ? `auth ${footer.auth}` : null,
+    footer.project ? "workspace" : null,
+    footer.server ? "server selected" : null,
+    footer.auth ? "auth ready" : null,
     footer.run ? `run ${footer.run}` : null,
-    footer.message ?? null
+    safeMessage
   ].filter((part) => Boolean(part));
   return ` ${truncateText(parts.join("  \xB7  "), Math.max(8, width - 2))}`;
 }