@h-rig/cli 0.0.6-alpha.86 → 0.0.6-alpha.88

package/dist/src/app-opentui/react/App.js

@@ -1,6 +1,6 @@
 // @bun
 // packages/cli/src/app-opentui/react/App.tsx
-import { useMemo, useRef as useRef4 } from "react";
+import { useMemo, useRef as useRef4, useSyncExternalStore as useSyncExternalStore2 } from "react";
 import { useKeyboard, useRenderer as useRenderer4, useTerminalDimensions as useTerminalDimensions2 } from "@opentui/react";
 
 // packages/cli/src/app-opentui/layout.ts
@@ -59,6 +59,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",
@@ -1783,395 +1784,10 @@ function intentFromTypeBar(value) {
 }
 
 // packages/cli/src/app-opentui/pi-pty-host.ts
-import { fileURLToPath as fileURLToPath2 } from "url";
-import { basename as basename2 } from "path";
-import { RGBA as RGBA2, StyledText as StyledText2, TextAttributes as TextAttributes3 } from "@opentui/core";
-import { Terminal as XtermTerminal2 } from "@xterm/headless";
-var MIN_COLS2 = 40;
-var MIN_ROWS2 = 12;
-var MAX_ROWS2 = 300;
-var MAX_SNAPSHOT_LINES2 = 360;
-var STYLED_SNAPSHOT_MARGIN = 6;
-var SNAPSHOT_DELAY_MS2 = 120;
-var fallbackChildScriptPath = fileURLToPath2(new URL("./pi-host-child.ts", import.meta.url));
-var activeHost2 = null;
-function clampCols2(cols) {
-  return Math.max(MIN_COLS2, Math.trunc(cols || 100));
-}
-function clampRows2(rows) {
-  return Math.max(MIN_ROWS2, Math.min(MAX_ROWS2, Math.trunc(rows || 35)));
-}
-var XTERM_COLOR_MODE_INDEXED_16 = 16777216;
-var XTERM_COLOR_MODE_INDEXED_256 = 33554432;
-var XTERM_COLOR_MODE_RGB = 50331648;
-function rgbaFromXtermColor(mode, value) {
-  if (mode === 1 || mode === 2 || mode === XTERM_COLOR_MODE_INDEXED_16 || mode === XTERM_COLOR_MODE_INDEXED_256) {
-    return RGBA2.fromIndex(value);
-  }
-  if (mode === 3 || mode === XTERM_COLOR_MODE_RGB) {
-    return RGBA2.fromInts(value >> 16 & 255, value >> 8 & 255, value & 255);
-  }
-  return;
-}
-function textAttributesFromCell(cell) {
-  let attributes = TextAttributes3.NONE;
-  if (cell.isBold())
-    attributes |= TextAttributes3.BOLD;
-  if (cell.isDim())
-    attributes |= TextAttributes3.DIM;
-  if (cell.isItalic())
-    attributes |= TextAttributes3.ITALIC;
-  if (cell.isUnderline())
-    attributes |= TextAttributes3.UNDERLINE;
-  if (cell.isBlink())
-    attributes |= TextAttributes3.BLINK;
-  if (cell.isInverse())
-    attributes |= TextAttributes3.INVERSE;
-  if (cell.isInvisible())
-    attributes |= TextAttributes3.HIDDEN;
-  if (cell.isStrikethrough())
-    attributes |= TextAttributes3.STRIKETHROUGH;
-  return attributes;
-}
-function sameRgba(a, b) {
-  if (!a && !b)
-    return true;
-  return Boolean(a && b && a.equals(b));
-}
-function sameStyle(a, b) {
-  return sameRgba(a.fg, b.fg) && sameRgba(a.bg, b.bg) && (a.attributes ?? 0) === (b.attributes ?? 0);
-}
-function styleFromCell(cell) {
-  return {
-    fg: rgbaFromXtermColor(cell.getFgColorMode(), cell.getFgColor()),
-    bg: rgbaFromXtermColor(cell.getBgColorMode(), cell.getBgColor()),
-    attributes: textAttributesFromCell(cell)
-  };
-}
-function lineToStyledText(line2, cols) {
-  if (!line2)
-    return new StyledText2([{ __isChunk: true, text: "" }]);
-  const chunks = [];
-  let run = "";
-  let runStyle = null;
-  const flush = () => {
-    if (!run)
-      return;
-    chunks.push({
-      __isChunk: true,
-      text: run,
-      ...runStyle?.fg ? { fg: runStyle.fg } : {},
-      ...runStyle?.bg ? { bg: runStyle.bg } : {},
-      ...(runStyle?.attributes ?? 0) !== 0 ? { attributes: runStyle.attributes } : {}
-    });
-    run = "";
-  };
-  for (let index = 0;index < cols; index += 1) {
-    const cell = line2.getCell(index);
-    if (!cell) {
-      if (runStyle !== null)
-        flush();
-      runStyle = null;
-      run += " ";
-      continue;
-    }
-    if (cell.getWidth() === 0)
-      continue;
-    const style = styleFromCell(cell);
-    if (!runStyle || !sameStyle(runStyle, style)) {
-      flush();
-      runStyle = style;
-    }
-    run += cell.getChars() || " ";
-  }
-  flush();
-  return new StyledText2(chunks.length > 0 ? chunks : [{ __isChunk: true, text: "" }]);
-}
-function childCommandPrefix2() {
-  const execName = basename2(process.execPath).toLowerCase();
-  const currentEntry = process.argv[1];
-  if (execName === "bun" || execName === "bun.exe") {
-    return currentEntry ? [process.execPath, currentEntry, "__opentui-pi-host"] : [process.execPath, fallbackChildScriptPath];
-  }
-  return [process.execPath, "__opentui-pi-host"];
-}
-function withEnv2(base) {
-  const env = {};
-  for (const [key, value] of Object.entries(base ?? process.env)) {
-    if (key === "RIG_PLAIN" || key === "RIG_CLI_PLAIN_HELP" || key === "NO_COLOR")
-      continue;
-    if (typeof value === "string")
-      env[key] = value;
-  }
-  return {
-    ...env,
-    TERM: "xterm-256color",
-    COLORTERM: "truecolor",
-    FORCE_COLOR: env.FORCE_COLOR ?? "1",
-    RIG_OPENTUI_PI_HOST: "1"
-  };
-}
 function getActivePiHost() {
-  return activeHost2 && !activeHost2.disposed ? activeHost2 : null;
-}
-function stopActivePiHost(reason = "detach") {
-  activeHost2?.dispose(reason);
-  activeHost2 = null;
-}
-
-class PiPtyHost {
-  runId;
-  projectRoot;
-  onSnapshot;
-  onExit;
-  onError;
-  terminal;
-  disposables = [];
-  decoder = new TextDecoder("utf-8");
-  proc = null;
-  pty = null;
-  status = "starting";
-  cols;
-  rows;
-  message = "starting bundled Pi";
-  lastResizeError = null;
-  exitCode;
-  signal;
-  notifyTimer = null;
-  lastStreamKey = "";
-  _disposed = false;
-  constructor(options) {
-    this.runId = options.runId;
-    this.projectRoot = options.projectRoot;
-    this.cols = clampCols2(options.cols);
-    this.rows = clampRows2(options.rows);
-    this.onSnapshot = options.onSnapshot;
-    this.onExit = options.onExit;
-    this.onError = options.onError;
-    this.terminal = new XtermTerminal2({
-      allowProposedApi: true,
-      cols: this.cols,
-      rows: this.rows,
-      scrollback: 1000
-    });
-    this.registerTerminalResponders();
-    this.disposables.push(this.terminal.onWriteParsed(() => {
-      if (this._disposed)
-        return;
-      const snapshot = this.createSnapshot();
-      const key = snapshot.lines.join(`
-`);
-      if (key === this.lastStreamKey)
-        return;
-      this.lastStreamKey = key;
-      this.onSnapshot?.(snapshot);
-    }));
-  }
-  get disposed() {
-    return this._disposed;
-  }
-  get snapshot() {
-    return this.createSnapshot();
-  }
-  async start() {
-    if (this._disposed)
-      throw new Error("Pi PTY host is disposed.");
-    if (typeof Bun.Terminal !== "function") {
-      throw new Error("Bun native PTY is unavailable in this runtime. Pi host requires Bun.Terminal.");
-    }
-    const spawnOptions = {
-      cwd: this.projectRoot,
-      env: withEnv2(process.env),
-      terminal: {
-        cols: this.cols,
-        rows: this.rows,
-        name: "xterm-256color",
-        data: (_terminal, data) => this.handlePtyData(data)
-      }
-    };
-    const proc = Bun.spawn([
-      ...childCommandPrefix2(),
-      "--run-id",
-      this.runId,
-      "--project-root",
-      this.projectRoot
-    ], spawnOptions);
-    if (!proc.terminal)
-      throw new Error("Bun did not attach a terminal to the bundled Pi child process.");
-    this.proc = proc;
-    this.pty = proc.terminal;
-    this.status = "running";
-    this.message = "bundled Pi running inside this app";
-    this.emitSnapshotSoon(0);
-    proc.exited.then((exitCode) => {
-      if (this._disposed)
-        return;
-      this.status = exitCode === 0 ? "exited" : "failed";
-      this.exitCode = exitCode;
-      this.signal = null;
-      this.message = exitCode === 0 ? "bundled Pi exited" : `bundled Pi exited with code ${exitCode}`;
-      const snapshot = this.createSnapshot();
-      this.onSnapshot?.(snapshot);
-      this.onExit?.(snapshot);
-      if (activeHost2 === this)
-        activeHost2 = null;
-      this.dispose("exit", { kill: false, notify: false });
-    }).catch((error) => {
-      if (this._disposed)
-        return;
-      this.status = "failed";
-      this.message = error instanceof Error ? error.message : String(error);
-      const snapshot = this.createSnapshot();
-      this.onSnapshot?.(snapshot);
-      this.onError?.(error, snapshot);
-      if (activeHost2 === this)
-        activeHost2 = null;
-      this.dispose("error", { kill: false, notify: false });
-    });
-  }
-  write(data) {
-    if (this._disposed || !this.pty)
-      return;
-    try {
-      this.pty.write(data);
-    } catch (error) {
-      this.status = "failed";
-      this.message = error instanceof Error ? error.message : String(error);
-      const snapshot = this.createSnapshot();
-      this.onSnapshot?.(snapshot);
-      this.onError?.(error, snapshot);
-    }
-  }
-  resize(cols, rows) {
-    const nextCols = clampCols2(cols);
-    const nextRows = clampRows2(rows);
-    if (nextCols === this.cols && nextRows === this.rows)
-      return;
-    this.cols = nextCols;
-    this.rows = nextRows;
-    this.terminal.resize(nextCols, nextRows);
-    try {
-      this.pty?.resize(nextCols, nextRows);
-      this.lastResizeError = null;
-    } catch (error) {
-      this.lastResizeError = error instanceof Error ? error.message : String(error);
-    }
-    this.emitSnapshotSoon(0);
-  }
-  detach() {
-    this.dispose("detach");
-    return this.createSnapshot("detached from bundled Pi");
-  }
-  dispose(reason = "dispose", options = {}) {
-    if (this._disposed)
-      return;
-    this._disposed = true;
-    if (this.notifyTimer)
-      clearTimeout(this.notifyTimer);
-    this.notifyTimer = null;
-    for (const disposable of this.disposables.splice(0)) {
-      try {
-        disposable.dispose();
-      } catch {}
-    }
-    if (options.kill !== false) {
-      try {
-        this.proc?.kill("SIGTERM");
-      } catch {}
-    }
-    try {
-      this.pty?.close();
-    } catch {}
-    try {
-      this.terminal.dispose();
-    } catch {}
-    if (activeHost2 === this)
-      activeHost2 = null;
-    if (options.notify) {
-      this.message = reason;
-      this.onSnapshot?.(this.createSnapshot(reason));
-    }
-  }
-  handlePtyData(data) {
-    if (this._disposed)
-      return;
-    const text = this.decoder.decode(data, { stream: true });
-    this.respondToRawTerminalQueries(text);
-    this.terminal.write(data);
-  }
-  emitSnapshotSoon(delayMs = SNAPSHOT_DELAY_MS2) {
-    if (this._disposed || this.notifyTimer)
-      return;
-    this.notifyTimer = setTimeout(() => {
-      this.notifyTimer = null;
-      if (this._disposed)
-        return;
-      this.onSnapshot?.(this.createSnapshot());
-    }, delayMs);
-  }
-  createSnapshot(message = this.message) {
-    const buffer = this.terminal.buffer.active;
-    const end = buffer.length;
-    const start = Math.max(0, end - MAX_SNAPSHOT_LINES2);
-    const styledStart = Math.max(start, end - this.rows - STYLED_SNAPSHOT_MARGIN);
-    const lines = [];
-    const styledLines = [];
-    for (let row = start;row < end; row += 1) {
-      const line2 = buffer.getLine(row);
-      lines.push((line2?.translateToString(false) ?? "").slice(0, this.cols));
-      if (row >= styledStart)
-        styledLines[lines.length - 1] = lineToStyledText(line2, this.cols);
-    }
-    while (lines.length < this.rows) {
-      lines.push("");
-      styledLines[lines.length - 1] = new StyledText2([{ __isChunk: true, text: "" }]);
-    }
-    const resolvedMessage = this.lastResizeError ? `resize degraded: ${this.lastResizeError}` : message;
-    return {
-      runId: this.runId,
-      status: this.status,
-      cols: this.cols,
-      rows: this.rows,
-      lines,
-      styledLines,
-      message: resolvedMessage,
-      ...this.lastResizeError ? { resizeError: this.lastResizeError } : {},
-      ...this.exitCode !== undefined ? { exitCode: this.exitCode } : {},
-      ...this.signal !== undefined ? { signal: this.signal } : {}
-    };
-  }
-  registerTerminalResponders() {
-    this.disposables.push(this.terminal.parser.registerCsiHandler({ final: "c" }, (params) => {
-      if (params.length === 0 || params[0] === 0)
-        this.write("\x1B[?62;22c");
-      return false;
-    }));
-    this.disposables.push(this.terminal.parser.registerCsiHandler({ prefix: ">", final: "c" }, (params) => {
-      if (params.length === 0 || params[0] === 0)
-        this.write("\x1B[>0;0;0c");
-      return false;
-    }));
-    this.disposables.push(this.terminal.parser.registerCsiHandler({ final: "n" }, (params) => {
-      if (params[0] === 5) {
-        this.write("\x1B[0n");
-      } else if (params[0] === 6) {
-        const row = this.terminal.buffer.active.cursorY + 1;
-        const col = this.terminal.buffer.active.cursorX + 1;
-        this.write(`\x1B[${row};${col}R`);
-      }
-      return false;
-    }));
-  }
-  respondToRawTerminalQueries(text) {
-    if (!text)
-      return;
-    const decrqm = /\x1b\[\?(\d+)\$p/g;
-    let match;
-    while ((match = decrqm.exec(text)) !== null) {
-      this.write(`\x1B[?${match[1]};2$y`);
-    }
-  }
+  return null;
 }
+function stopActivePiHost(_reason) {}
 
 // packages/cli/src/app-opentui/keymap.ts
 var autocompleteState;
@@ -2403,7 +2019,7 @@ function handleAppKeyPress(context, key) {
 }
 
 // packages/cli/src/app-opentui/runtime.ts
-import { BoxRenderable as BoxRenderable3, RGBA as RGBA8, StyledText as StyledText4, TextRenderable as TextRenderable4, createCliRenderer } from "@opentui/core";
+import { BoxRenderable as BoxRenderable3, RGBA as RGBA7, StyledText as StyledText3, TextRenderable as TextRenderable4, createCliRenderer } from "@opentui/core";
 
 // packages/cli/src/commands/_server-events.ts
 import { WsTransport } from "@rig/client";
@@ -2432,7 +2048,7 @@ var RESUMABLE_RUN_STATUSES = new Set([
 ]);
 
 // packages/cli/src/app-opentui/render/graphics.ts
-import { FrameBufferRenderable, RGBA as RGBA3 } from "@opentui/core";
+import { FrameBufferRenderable, RGBA as RGBA2 } from "@opentui/core";
 
 // packages/cli/src/app-opentui/render/ascii-fleet.ts
 var LEAD_DRONE = [
@@ -2576,13 +2192,13 @@ var GLOW_FALLOFF_EXP_ASCII = 2.2;
 // packages/cli/src/app-opentui/render/graphics.ts
 var BRAILLE_SAMPLES_X = 2;
 var BRAILLE_SAMPLES_Y = 4;
-var TRANSPARENT = RGBA3.fromValues(0, 0, 0, 0);
-var BACKDROP = RGBA3.fromHex(RIG_UI.bg);
-var PANEL_BG = RGBA3.fromInts(16, 17, 21, 184);
-var PANEL_HEADER_BG = RGBA3.fromInts(16, 17, 21, 188);
-var PANEL_LINE = RGBA3.fromInts(255, 255, 255, 20);
-var PANEL_LINE_DIM = RGBA3.fromInts(255, 255, 255, 8);
-var PANEL_TEXT_DIM = RGBA3.fromInts(108, 110, 121, 255);
+var TRANSPARENT = RGBA2.fromValues(0, 0, 0, 0);
+var BACKDROP = RGBA2.fromHex(RIG_UI.bg);
+var PANEL_BG = RGBA2.fromInts(16, 17, 21, 184);
+var PANEL_HEADER_BG = RGBA2.fromInts(16, 17, 21, 188);
+var PANEL_LINE = RGBA2.fromInts(255, 255, 255, 20);
+var PANEL_LINE_DIM = RGBA2.fromInts(255, 255, 255, 8);
+var PANEL_TEXT_DIM = RGBA2.fromInts(108, 110, 121, 255);
 var AC_RGB = [204, 255, 77];
 var C2_RGB = [86, 216, 255];
 var MG_RGB = [255, 121, 176];
@@ -2687,7 +2303,7 @@ function paletteColor(ac, c2, mg, ink) {
   const b = (AC_RGB[2] * ac + C2_RGB[2] * c2 + MG_RGB[2] * mg + INK_RGB[2] * ink) / total;
   const intensity = Math.min(1, total / 4);
   const lift = 0.34 + intensity * 0.66;
-  return RGBA3.fromInts(Math.round(r * lift), Math.round(g * lift), Math.round(b * lift), 255);
+  return RGBA2.fromInts(Math.round(r * lift), Math.round(g * lift), Math.round(b * lift), 255);
 }
 function clearCanvas(canvas) {
   canvas.ac.fill(0);
@@ -3042,8 +2658,8 @@ function staticFleetTick(scene) {
 }
 function withAlpha(hex, alpha) {
   const a = Math.max(0, Math.min(255, Math.round(alpha * 255)));
-  const [r, g, b] = RGBA3.fromHex(hex).toInts();
-  return RGBA3.fromInts(r, g, b, a);
+  const [r, g, b] = RGBA2.fromHex(hex).toInts();
+  return RGBA2.fromInts(r, g, b, a);
 }
 function asciiFleetColor(char, row, alpha) {
   if (char === "@" || char === "$" || char === "o")
@@ -3051,7 +2667,7 @@ function asciiFleetColor(char, row, alpha) {
   if (char === "%" || char === "!" || char === "/" || char === "\\" || char === "|")
     return withAlpha(RIG_UI.cyan, alpha);
   if (char === "." || char === "'" || char === "_" || row < 3 || row > FLEET_GRID_HEIGHT - 4) {
-    return RGBA3.fromInts(108, 110, 121, Math.min(170, Math.max(0, Math.min(255, Math.round(alpha * 255)))));
+    return RGBA2.fromInts(108, 110, 121, Math.min(170, Math.max(0, Math.min(255, Math.round(alpha * 255)))));
   }
   return withAlpha(RIG_UI.limeDim, alpha);
 }
@@ -3103,16 +2719,70 @@ function drawAmbientField(layer, layout, _tick, scene = "fleet", load = 0, activ
 }
 
 // packages/cli/src/app-opentui/render/text.ts
-import { RGBA as RGBA4, TextAttributes as TextAttributes4, TextRenderable } from "@opentui/core";
-var TRANSPARENT2 = RGBA4.fromInts(0, 0, 0, 0);
+import { RGBA as RGBA3, TextAttributes as TextAttributes3, TextRenderable } from "@opentui/core";
+
+// packages/cli/src/app-opentui/render/hover.ts
+var hoveredId;
+var listeners = new Set;
+function getHoveredSelectableId() {
+  return hoveredId;
+}
+function isHovered(id) {
+  return id !== undefined && id === hoveredId;
+}
+function setHoveredSelectableId(id) {
+  if (hoveredId === id)
+    return;
+  hoveredId = id;
+  for (const listener of listeners)
+    listener();
+}
+function clearHoveredSelectableId(id) {
+  if (id !== undefined && hoveredId === id)
+    setHoveredSelectableId(undefined);
+}
+function subscribeHover(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+// packages/cli/src/app-opentui/render/text.ts
+var TRANSPARENT2 = RGBA3.fromInts(0, 0, 0, 0);
+var HOVER_BG = RGBA3.fromHex(RIG_UI.hover);
+function lineIsClickable(line2) {
+  return line2?.selectable !== undefined || line2?.selectableIndex !== undefined;
+}
+function lineSelectableId(line2) {
+  return line2?.selectable?.id ?? line2?.selectableId;
+}
+function lineBackground(line2) {
+  if (line2?.bg)
+    return RGBA3.fromHex(line2.bg);
+  const id = lineSelectableId(line2);
+  if (id !== undefined && isHovered(id))
+    return HOVER_BG;
+  return TRANSPARENT2;
+}
 function selectableMouseHandler(currentLineRef, onLineMouseDown) {
   return (event) => {
     const currentLine = currentLineRef();
-    if (currentLine?.selectableIndex === undefined)
+    if (!lineIsClickable(currentLine))
       return;
     onLineMouseDown?.(currentLine, event);
   };
 }
+function hoverHandlers(currentLineRef) {
+  return {
+    onMouseOver: () => {
+      const id = lineSelectableId(currentLineRef());
+      if (id !== undefined)
+        setHoveredSelectableId(id);
+    },
+    onMouseOut: () => clearHoveredSelectableId(lineSelectableId(currentLineRef()))
+  };
+}
 function createFlowTextLine(renderer, id, onLineMouseDown) {
   let currentLine;
   const renderable = new TextRenderable(renderer, {
@@ -3123,7 +2793,8 @@ function createFlowTextLine(renderer, id, onLineMouseDown) {
     flexShrink: 0,
     fg: RIG_UI.ink2,
     selectable: true,
-    onMouseDown: selectableMouseHandler(() => currentLine, onLineMouseDown)
+    onMouseDown: selectableMouseHandler(() => currentLine, onLineMouseDown),
+    ...hoverHandlers(() => currentLine)
   });
   renderable.setRigSceneLine = (line2) => {
     currentLine = line2;
@@ -3137,13 +2808,13 @@ function applyFlowTextLine(renderable, line2, width) {
   renderable.width = Math.max(1, width);
   renderable.content = line2?.styledText ?? line2?.text ?? "";
   renderable.fg = line2?.fg ?? RIG_UI.ink2;
-  renderable.bg = line2?.bg ?? TRANSPARENT2;
-  renderable.attributes = line2?.bold ? TextAttributes4.BOLD : line2?.dim ? TextAttributes4.DIM : 0;
+  renderable.bg = lineBackground(line2);
+  renderable.attributes = line2?.bold ? TextAttributes3.BOLD : line2?.dim ? TextAttributes3.DIM : 0;
 }
 
 // packages/cli/src/app-opentui/render/panels.ts
-import { RGBA as RGBA5, ScrollBoxRenderable } from "@opentui/core";
-var TRANSPARENT3 = RGBA5.fromInts(0, 0, 0, 0);
+import { RGBA as RGBA4, ScrollBoxRenderable } from "@opentui/core";
+var TRANSPARENT3 = RGBA4.fromInts(0, 0, 0, 0);
 var MAX_PANEL_LINES = 420;
 var PANEL_OPAQUE_ALPHA = 255;
 var PANEL_BORDER = hexToRgba(RIG_UI.border, 255);
@@ -3152,8 +2823,8 @@ function hexToRgba(hex, alpha) {
   const full = clean.length === 3 ? clean.split("").map((part) => `${part}${part}`).join("") : clean;
   const value = Number.parseInt(full, 16);
   if (!Number.isFinite(value))
-    return RGBA5.fromInts(14, 15, 17, alpha);
-  return RGBA5.fromInts(value >> 16 & 255, value >> 8 & 255, value & 255, alpha);
+    return RGBA4.fromInts(14, 15, 17, alpha);
+  return RGBA4.fromInts(value >> 16 & 255, value >> 8 & 255, value & 255, alpha);
 }
 function panelBackground(panel) {
   return hexToRgba(panel.backgroundColor ?? RIG_UI.panel, PANEL_OPAQUE_ALPHA);
@@ -3268,9 +2939,9 @@ function applyScrollPanels(panels, layout, scenePanels) {
 }
 
 // packages/cli/src/app-opentui/render/type-bar.ts
-import { BoxRenderable, InputRenderable, InputRenderableEvents, RGBA as RGBA6, StyledText as StyledText3, TextRenderable as TextRenderable2 } from "@opentui/core";
-var TYPEBAR_BG = RGBA6.fromInts(20, 25, 14, 224);
-var TYPEBAR_BORDER = RGBA6.fromInts(204, 255, 77, 92);
+import { BoxRenderable, InputRenderable, InputRenderableEvents, RGBA as RGBA5, StyledText as StyledText2, TextRenderable as TextRenderable2 } from "@opentui/core";
+var TYPEBAR_BG = RGBA5.fromInts(20, 25, 14, 224);
+var TYPEBAR_BORDER = RGBA5.fromInts(204, 255, 77, 92);
 function createTypeBar(renderer) {
   const background = new BoxRenderable(renderer, {
     id: "typebar-card",
@@ -3418,7 +3089,7 @@ function formatFooter(footer, width) {
     chunks.push(cell.style(text));
     used += visibleWidth(text);
   });
-  return new StyledText3(chunks);
+  return new StyledText2(chunks);
 }
 
 // packages/cli/src/app-opentui/render/native-host.ts
@@ -3426,7 +3097,7 @@ import {
   BoxRenderable as BoxRenderable2,
   CodeRenderable,
   DiffRenderable,
-  RGBA as RGBA7,
+  RGBA as RGBA6,
   ScrollBoxRenderable as ScrollBoxRenderable2,
   SyntaxStyle,
   TextRenderable as TextRenderable3,
@@ -3437,19 +3108,19 @@ function rigSyntaxStyle() {
   if (syntaxStyle)
     return syntaxStyle;
   syntaxStyle = SyntaxStyle.fromStyles({
-    keyword: { fg: RGBA7.fromHex(RIG_UI.magenta), bold: true },
-    string: { fg: RGBA7.fromHex(RIG_UI.lime) },
-    number: { fg: RGBA7.fromHex(RIG_UI.cyan) },
-    comment: { fg: RGBA7.fromHex(RIG_UI.ink4), italic: true },
-    function: { fg: RGBA7.fromHex(RIG_UI.cyan) },
-    type: { fg: RGBA7.fromHex(RIG_UI.limeDim) },
-    constant: { fg: RGBA7.fromHex(RIG_UI.yellow) },
-    default: { fg: RGBA7.fromHex(RIG_UI.ink2) }
+    keyword: { fg: RGBA6.fromHex(RIG_UI.magenta), bold: true },
+    string: { fg: RGBA6.fromHex(RIG_UI.lime) },
+    number: { fg: RGBA6.fromHex(RIG_UI.cyan) },
+    comment: { fg: RGBA6.fromHex(RIG_UI.ink4), italic: true },
+    function: { fg: RGBA6.fromHex(RIG_UI.cyan) },
+    type: { fg: RGBA6.fromHex(RIG_UI.limeDim) },
+    constant: { fg: RGBA6.fromHex(RIG_UI.yellow) },
+    default: { fg: RGBA6.fromHex(RIG_UI.ink2) }
   });
   return syntaxStyle;
 }
 function tableContent(rows) {
-  return rows.map((row, rowIndex) => row.map((cell) => [{ __isChunk: true, text: cell, fg: RGBA7.fromHex(rowIndex === 0 ? RIG_UI.ink3 : RIG_UI.ink2) }]));
+  return rows.map((row, rowIndex) => row.map((cell) => [{ __isChunk: true, text: cell, fg: RGBA6.fromHex(rowIndex === 0 ? RIG_UI.ink3 : RIG_UI.ink2) }]));
 }
 function createNativeHost(renderer) {
   try {
@@ -3548,7 +3219,7 @@ function destroyNativeHost(host) {
 }
 
 // packages/cli/src/app-opentui/runtime.ts
-var PRELOADER_BACKDROP = RGBA8.fromHex(RIG_UI.bg);
+var PRELOADER_BACKDROP = RGBA7.fromHex(RIG_UI.bg);
 function inboxPendingCount(state) {
   const inbox = state.data.inbox;
   if (!inbox || typeof inbox !== "object" || Array.isArray(inbox))
@@ -3645,7 +3316,7 @@ function buildNavStrip(state) {
       chunks.push(otuiBold(styles.yellow(String(badgeCount))));
     }
   });
-  return new StyledText4(chunks);
+  return new StyledText3(chunks);
 }
 function renderedItemsOrStateItems(_state, renderedItems) {
   return renderedItems ? [...renderedItems] : [];
@@ -3781,7 +3452,7 @@ function Backdrop(props) {
 // packages/cli/src/app-opentui/react/SceneFrameView.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { useRenderer as useRenderer2 } from "@opentui/react";
-import { TextAttributes as TextAttributes5 } from "@opentui/core";
+import { TextAttributes as TextAttributes4 } from "@opentui/core";
 
 // packages/cli/src/app-opentui/react/scroll.ts
 var registries = new Set;
@@ -3803,20 +3474,23 @@ function scrollActiveBody(delta) {
 // packages/cli/src/app-opentui/react/SceneFrameView.tsx
 import { jsxDEV, Fragment } from "@opentui/react/jsx-dev-runtime";
 function lineAttributes(line2) {
-  return line2?.bold ? TextAttributes5.BOLD : line2?.dim ? TextAttributes5.DIM : 0;
+  return line2?.bold ? TextAttributes4.BOLD : line2?.dim ? TextAttributes4.DIM : 0;
 }
 function lineContent(line2) {
   return line2.styledText ?? line2.text ?? "";
 }
 function LineView(props) {
   const { line: line2, onLineClick } = props;
+  const id = lineSelectableId(line2);
   return /* @__PURE__ */ jsxDEV("text", {
     style: { position: "absolute", left: props.left, top: props.top, width: props.width, zIndex: 5 },
     fg: line2.fg ?? RIG_UI.ink2,
-    bg: line2.bg ?? TRANSPARENT2,
+    bg: lineBackground(line2),
     attributes: lineAttributes(line2),
     content: lineContent(line2),
-    onMouseDown: onLineClick ? () => onLineClick(line2) : undefined
+    onMouseDown: onLineClick ? () => onLineClick(line2) : undefined,
+    onMouseOver: id !== undefined ? () => setHoveredSelectableId(id) : undefined,
+    onMouseOut: id !== undefined ? () => clearHoveredSelectableId(id) : undefined
   }, undefined, false, undefined, this);
 }
 function PanelHost(props) {
@@ -4052,6 +3726,7 @@ function App(props) {
   const runAppAction = useRunAppAction();
   const store = useStore();
   const renderer = useRenderer4();
+  useSyncExternalStore2(subscribeHover, getHoveredSelectableId, getHoveredSelectableId);
   const dims = useTerminalDimensions2();
   const layout = computeStageLayout(dims.width, dims.height);
   const registry = useMemo(() => ({ ...BUILTIN, ...props.sceneRenderers ?? {} }), [props.sceneRenderers]);
@@ -4086,8 +3761,7 @@ function App(props) {
     } else {
       return;
     }
-    if (line2.activateOnClick)
-      runAppAction("Activate selection", () => activateSelection(runtime, items));
+    runAppAction("Activate selection", () => activateSelection(runtime, items));
   };
   return /* @__PURE__ */ jsxDEV3("box", {
     style: { position: "absolute", left: 0, top: 0, width: "100%", height: "100%" },