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

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,22 @@ 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 });
 }
@@ -94,6 +244,27 @@ function emptyLine(message = "nothing here yet") {
 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 {
@@ -108,13 +279,19 @@ function makeSceneFrame(input) {
   return input;
 }
 export {
+  tableHeaderLine,
+  selectionLine,
   makeSceneFrame,
+  loadingRows,
   loadingLine,
   line,
+  lastRefreshError,
+  labeledLine,
   kv,
   fitSceneLines,
   fitSceneLine,
   errorLine,
+  errorBanner,
   emptyLine,
   deckRow,
   center,

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

@@ -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"
@@ -121,5 +123,6 @@ export {
   createFlowTextLine,
   clearTextLines,
   applyTextLine,
-  applyFlowTextLine
+  applyFlowTextLine,
+  TRANSPARENT
 };

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

@@ -1,6 +1,6 @@
 // @bun
 // packages/cli/src/app-opentui/render/type-bar.ts
-import { BoxRenderable, InputRenderable, InputRenderableEvents, RGBA, TextRenderable } from "@opentui/core";
+import { BoxRenderable, InputRenderable, InputRenderableEvents, RGBA, StyledText, 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"
@@ -44,13 +46,6 @@ var styles = {
 function visibleWidth(text) {
   return [...text].length;
 }
-function truncateText(text, width) {
-  if (visibleWidth(text) <= width)
-    return text;
-  if (width <= 1)
-    return "\u2026";
-  return `${[...text].slice(0, Math.max(0, width - 1)).join("")}\u2026`;
-}
 
 // packages/cli/src/app-opentui/render/type-bar.ts
 var TYPEBAR_BG = RGBA.fromInts(20, 25, 14, 224);
@@ -99,33 +94,49 @@ function createTypeBar(renderer) {
     left: 0,
     top: 1,
     width: "100%",
-    fg: RIG_UI.ink4,
+    fg: RIG_UI.ink3,
     zIndex: 7,
     selectable: true
   });
-  input.focus();
   return { background, input, prefix, footer };
 }
+function modePrefix(mode) {
+  switch (mode) {
+    case "search":
+      return { glyph: " /", color: RIG_UI.cyan };
+    case "command":
+      return { glyph: " /", color: RIG_UI.lime };
+    case "prompt":
+      return { glyph: " ?", color: RIG_UI.yellow };
+    default:
+      return { glyph: " \u203A", color: RIG_UI.ink3 };
+  }
+}
 function positionTypeBar(renderables, input, footer, width, typeBarTop, footerTop) {
+  const mode = input.mode ?? "nav";
+  const editing = mode !== "nav";
+  const { glyph, color } = modePrefix(mode);
   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.content = glyph;
+  renderables.prefix.fg = color;
   renderables.prefix.left = 2;
   renderables.prefix.top = typeBarTop;
   renderables.input.top = typeBarTop;
   renderables.input.left = 5;
   renderables.input.width = Math.max(10, width - 8);
-  renderables.input.placeholder = input.placeholder;
-  renderables.input.showCursor = true;
+  renderables.input.value = editing ? input.value : "";
+  renderables.input.placeholder = editing ? mode === "prompt" ? input.prompt?.label ?? "type a value" : mode === "command" ? "rig \u2026" : "filter\u2026" : input.placeholder;
+  renderables.input.showCursor = editing;
+  if (renderables.input.focused)
+    renderables.input.blur();
   renderables.footer.top = footerTop;
   renderables.footer.width = "100%";
   renderables.footer.content = formatFooter(footer, width);
-  if (!renderables.input.focused)
-    renderables.input.focus();
 }
 function hideTypeBar(renderables, height) {
   renderables.background.visible = false;
@@ -153,16 +164,44 @@ function safeFooterMessage(message) {
     return null;
   return trimmed;
 }
-function formatFooter(footer, width) {
+function liveCell(live) {
+  const connected = live.trimStart().startsWith("\u25CF");
+  return { text: live, style: connected ? styles.cyan : styles.ink3 };
+}
+function footerCells(footer) {
   const safeMessage = safeFooterMessage(footer.message);
-  const parts = [
-    footer.project ? "workspace" : null,
-    footer.server ? "server selected" : null,
-    footer.auth ? "auth ready" : null,
-    footer.run ? `run ${footer.run}` : null,
-    safeMessage
-  ].filter((part) => Boolean(part));
-  return ` ${truncateText(parts.join("  \xB7  "), Math.max(8, width - 2))}`;
+  const cells = [
+    footer.section ? { text: `\u25B8 ${footer.section}`, style: (s) => otuiBold(styles.ink2(s)) } : null,
+    footer.live ? liveCell(footer.live) : null,
+    footer.project ? { text: "workspace", style: styles.ink3 } : null,
+    footer.server ? { text: "server selected", style: styles.ink3 } : null,
+    footer.auth ? { text: "auth ready", style: styles.ink3 } : null,
+    footer.run ? { text: `run ${footer.run}`, style: styles.ink3 } : null,
+    safeMessage ? { text: safeMessage, style: styles.ink2 } : null,
+    footer.updated ? { text: footer.updated, style: styles.ink3 } : null
+  ];
+  return cells.filter((cell) => cell !== null);
+}
+var FOOTER_SEPARATOR = "  \xB7  ";
+function formatFooter(footer, width) {
+  const budget = Math.max(8, width - 2);
+  const chunks = [styles.ink3(" ")];
+  let used = 1;
+  footerCells(footer).forEach((cell, index) => {
+    const sep = index === 0 ? "" : FOOTER_SEPARATOR;
+    const remaining = budget - used - visibleWidth(sep);
+    if (remaining <= 0)
+      return;
+    if (sep) {
+      chunks.push(styles.ink4(sep));
+      used += visibleWidth(sep);
+    }
+    const fits = visibleWidth(cell.text) <= remaining;
+    const text = fits ? cell.text : remaining <= 1 ? "\u2026" : `${[...cell.text].slice(0, Math.max(0, remaining - 1)).join("")}\u2026`;
+    chunks.push(cell.style(text));
+    used += visibleWidth(text);
+  });
+  return new StyledText(chunks);
 }
 export {
   positionTypeBar,

package/dist/src/app-opentui/runtime.d.ts

@@ -1,2 +1,45 @@
-import type { AppLaunchOptions } from "./types";
+import { StyledText, type CliRenderer } from "@opentui/core";
+import { createAppStore } from "./state";
+import type { AppIntent, AppLaunchOptions, AppRuntime, AppSceneId, AppSelectableItem, AppState } from "./types";
+import { type NativeHost } from "./render/native-host";
+/** Total per-scene entry intent for back-navigation (#13). Every AppSceneId
+ * resolves to an intent that re-enters THAT scene with its real data refresh —
+ * so popping the back-stack restores the exact prior scene, never dumping home
+ * from an unrelated origin. Transient PTY scenes (command/handoff) can't be
+ * "restored" from a closed terminal, so they re-enter their owning section. */
+export declare function entryIntentForScene(scene: AppSceneId): AppIntent;
+/** Readable section name for the persistent footer breadcrumb. */
+export declare function sceneSectionLabel(scene: AppSceneId): string;
+/** Footer freshness indicator (#6): push-connected vs polling fallback, so the
+ * UI never silently lies about whether it is live. */
+export declare function liveLinkLabel(status: "connecting" | "connected" | "disconnected"): string;
+/** Build the persistent top-nav strip as styled text: every section label with
+ * the ACTIVE one highlighted (lime + bold), Inbox carrying a live pending-count
+ * badge. Rendered on every scene so the operator always sees the sections and
+ * where they are (#2). Returns a StyledText for a single absolute TextRenderable. */
+export declare function buildNavStrip(state: AppState): StyledText;
+/** Test-only: the id of the nav section that should light up for a scene (#2). */
+export declare function __activeNavSectionIdForTest(scene: AppSceneId): string;
+/** Test-only: the intent esc/back resolves to given a back-stack — proving back
+ * restores the ACTUAL prior scene, never dumping home from an unrelated origin
+ * (#13). Mirrors runtime.goBack's resolution (pop → entryIntentForScene). */
+export declare function __backTargetIntentForTest(history: readonly AppSceneId[]): AppIntent;
+/** Test-only: whether a scene resolves to a REAL renderer (false ⇒ it would hit
+ * the redirect stub). Asserts the stub is unreachable for every real scene (#3). */
+export declare function __sceneHasRendererForTest(scene: AppSceneId, sceneRenderers?: AppLaunchOptions["sceneRenderers"]): boolean;
+export declare function selectIndex(store: ReturnType<typeof createAppStore>, index: number, renderedItems?: readonly AppSelectableItem[]): boolean;
+export declare function moveSelection(store: ReturnType<typeof createAppStore>, delta: number, renderedItems?: readonly AppSelectableItem[]): boolean;
+/** Select the item with this stable id (#12). Clicks resolve by id so a render
+ * between mouse-down and the click callback can't misfire on a shifted row. */
+export declare function selectById(store: ReturnType<typeof createAppStore>, id: string, renderedItems?: readonly AppSelectableItem[]): boolean;
+export declare function activateSelection(runtime: AppRuntime, renderedItems?: readonly AppSelectableItem[]): Promise<boolean>;
+/** Test-only: render a single scene's state to a renderer headlessly so the
+ * FULL scene render path (scene renderer → panels + lines + native mounts) can
+ * be snapshot-verified via @opentui/core's createTestRenderer + captureCharFrame,
+ * without launching the live app. Mirrors the renderable pool the live app
+ * builds, then calls the real `renderNow`. Returns the derived selectable list. */
+export declare function __renderSceneForTest(renderer: CliRenderer, state: AppState, sceneRenderers?: AppLaunchOptions["sceneRenderers"]): {
+    readonly selectables: readonly AppSelectableItem[];
+    readonly nativeHost: NativeHost | null;
+};
 export declare function launchRigOpenTuiApp(options: AppLaunchOptions): Promise<void>;