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

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",
@@ -3104,15 +3105,69 @@ 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";
+
+// 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 = RGBA4.fromInts(0, 0, 0, 0);
+var HOVER_BG = RGBA4.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 RGBA4.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 +3178,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,7 +3193,7 @@ 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.bg = lineBackground(line2);
   renderable.attributes = line2?.bold ? TextAttributes4.BOLD : line2?.dim ? TextAttributes4.DIM : 0;
 }
 
@@ -3810,13 +3866,16 @@ function lineContent(line2) {
 }
 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 +4111,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 +4146,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%" },

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

@@ -39,6 +39,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",

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

@@ -43,6 +43,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",
@@ -1747,7 +1748,13 @@ var ACTIVE_STATUSES = new Set([
 
 // packages/cli/src/app-opentui/render/text.ts
 import { RGBA as RGBA5, TextAttributes as TextAttributes4, TextRenderable as TextRenderable2 } from "@opentui/core";
+
+// packages/cli/src/app-opentui/render/hover.ts
+var listeners = new Set;
+
+// packages/cli/src/app-opentui/render/text.ts
 var TRANSPARENT2 = RGBA5.fromInts(0, 0, 0, 0);
+var HOVER_BG = RGBA5.fromHex(RIG_UI.hover);
 
 // packages/cli/src/app-opentui/render/panels.ts
 import { RGBA as RGBA6, ScrollBoxRenderable } from "@opentui/core";

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

@@ -17,6 +17,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",
@@ -95,15 +96,60 @@ function fitSceneLines(lines, layout) {
 
 // packages/cli/src/app-opentui/render/text.ts
 import { RGBA as RGBA2, TextAttributes as TextAttributes3, TextRenderable } from "@opentui/core";
+
+// packages/cli/src/app-opentui/render/hover.ts
+var hoveredId;
+var listeners = new Set;
+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);
+}
+
+// packages/cli/src/app-opentui/render/text.ts
 var TRANSPARENT = RGBA2.fromInts(0, 0, 0, 0);
+var HOVER_BG = RGBA2.fromHex(RIG_UI.hover);
+function lineIsClickable(line) {
+  return line?.selectable !== undefined || line?.selectableIndex !== undefined;
+}
+function lineSelectableId(line) {
+  return line?.selectable?.id ?? line?.selectableId;
+}
+function lineBackground(line) {
+  if (line?.bg)
+    return RGBA2.fromHex(line.bg);
+  const id = lineSelectableId(line);
+  if (id !== undefined && isHovered(id))
+    return HOVER_BG;
+  return TRANSPARENT;
+}
 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, {
@@ -114,7 +160,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 = (line) => {
     currentLine = line;
@@ -128,7 +175,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.bg = lineBackground(line);
   renderable.attributes = line?.bold ? TextAttributes3.BOLD : line?.dim ? TextAttributes3.DIM : 0;
 }
 
@@ -435,13 +482,16 @@ function lineContent(line) {
 }
 function LineView(props) {
   const { line, onLineClick } = props;
+  const id = lineSelectableId(line);
   return /* @__PURE__ */ jsxDEV("text", {
     style: { position: "absolute", left: props.left, top: props.top, width: props.width, zIndex: 5 },
     fg: line.fg ?? RIG_UI.ink2,
-    bg: line.bg ?? TRANSPARENT,
+    bg: lineBackground(line),
     attributes: lineAttributes(line),
     content: lineContent(line),
-    onMouseDown: onLineClick ? () => onLineClick(line) : undefined
+    onMouseDown: onLineClick ? () => onLineClick(line) : undefined,
+    onMouseOver: id !== undefined ? () => setHoveredSelectableId(id) : undefined,
+    onMouseOut: id !== undefined ? () => clearHoveredSelectableId(id) : undefined
   }, undefined, false, undefined, this);
 }
 function PanelHost(props) {

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

@@ -2290,6 +2290,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",
@@ -3201,15 +3202,69 @@ function sparklineString(values, width) {
 
 // packages/cli/src/app-opentui/render/text.ts
 import { RGBA as RGBA4, TextAttributes as TextAttributes4, 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 = RGBA4.fromInts(0, 0, 0, 0);
+var HOVER_BG = RGBA4.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 RGBA4.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, {
@@ -3220,7 +3275,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;
@@ -3234,7 +3290,7 @@ 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.bg = lineBackground(line2);
   renderable.attributes = line2?.bold ? TextAttributes4.BOLD : line2?.dim ? TextAttributes4.DIM : 0;
 }
 
@@ -4178,7 +4234,7 @@ async function activateSelection(runtime, renderedItems) {
 }
 
 // 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/react/Backdrop.tsx
@@ -4263,13 +4319,16 @@ function lineContent(line2) {
 }
 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) {
@@ -4511,6 +4570,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]);
@@ -4545,8 +4605,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%" },

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

@@ -15,6 +15,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",

package/dist/src/app-opentui/registry.js

@@ -17045,6 +17045,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",
@@ -19347,11 +19348,8 @@ function renderFamilyScene(state, layout) {
 }
 
 // packages/cli/src/app-opentui/list-search.ts
-function isListSearchScene(scene) {
-  return scene === "fleet" || scene === "tasks";
-}
-function listSearchQuery(state) {
-  return isListSearchScene(state.scene) ? state.typeBar.value.trim() : "";
+function listSearchQuery(_state) {
+  return "";
 }
 function valueText(value) {
   if (value === undefined || value === null)

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

@@ -15,6 +15,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",

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

@@ -0,0 +1,11 @@
+export declare function getHoveredSelectableId(): string | undefined;
+export declare function isHovered(id: string | undefined): boolean;
+/** Set the hovered row (or clear with `undefined`). No-ops when unchanged so we
+ * don't churn renders on every mouse-move event within the same row. */
+export declare function setHoveredSelectableId(id: string | undefined): void;
+/** Clear the hover only if `id` is the currently-hovered row — guards against a
+ * stale mouseout (from a row we already left) wiping a newer hover. */
+export declare function clearHoveredSelectableId(id: string | undefined): void;
+/** Subscribe to hover changes. Legacy shell passes its render scheduler; the
+ * react shell bridges this into a re-render. Returns an unsubscribe fn. */
+export declare function subscribeHover(listener: () => void): () => void;

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

@@ -0,0 +1,34 @@
+// @bun
+// 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);
+  };
+}
+export {
+  subscribeHover,
+  setHoveredSelectableId,
+  isHovered,
+  getHoveredSelectableId,
+  clearHoveredSelectableId
+};

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

@@ -24,6 +24,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",

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

@@ -15,6 +15,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",
@@ -74,15 +75,60 @@ function panelContentRect(layout, panel) {
 
 // packages/cli/src/app-opentui/render/text.ts
 import { RGBA, TextAttributes as TextAttributes2, TextRenderable } from "@opentui/core";
+
+// packages/cli/src/app-opentui/render/hover.ts
+var hoveredId;
+var listeners = new Set;
+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);
+}
+
+// packages/cli/src/app-opentui/render/text.ts
 var TRANSPARENT = RGBA.fromInts(0, 0, 0, 0);
+var HOVER_BG = RGBA.fromHex(RIG_UI.hover);
+function lineIsClickable(line) {
+  return line?.selectable !== undefined || line?.selectableIndex !== undefined;
+}
+function lineSelectableId(line) {
+  return line?.selectable?.id ?? line?.selectableId;
+}
+function lineBackground(line) {
+  if (line?.bg)
+    return RGBA.fromHex(line.bg);
+  const id = lineSelectableId(line);
+  if (id !== undefined && isHovered(id))
+    return HOVER_BG;
+  return TRANSPARENT;
+}
 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, {
@@ -93,7 +139,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 = (line) => {
     currentLine = line;
@@ -107,7 +154,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.bg = lineBackground(line);
   renderable.attributes = line?.bold ? TextAttributes2.BOLD : line?.dim ? TextAttributes2.DIM : 0;
 }
 

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

@@ -12,6 +12,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",

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

@@ -37,6 +37,7 @@ var RIG_UI = {
   bg2: "#0b0c0e",
   panel: "#101115",
   panel2: "#14161b",
+  hover: "#181b24",
   glass: "#1e2230",
   border: "#2a2e3a",
   ink: "#f4f5f8",

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

@@ -6,6 +6,19 @@ import type { AppSceneLine } from "../types";
  * 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;
+/** A line is clickable when it carries a selectable. The imperative shell stamps
+ * `selectableId`/`selectableIndex` via remapSelectableLine; the @opentui/react
+ * shell does not, so it only carries `selectable`. Check all three so clicks +
+ * hover work identically in both shells. */
+export declare function lineIsClickable(line: AppSceneLine | undefined): boolean;
+/** The stable id used to key hover (and click resolution): the selectable's id,
+ * falling back to the imperative-stamped selectableId. Identical in both shells
+ * (remapSelectableLine sets selectableId = selectable.id). */
+export declare function lineSelectableId(line: AppSceneLine | undefined): string | undefined;
+/** The bg a line paints: an explicit `bg` (a selected row) always wins;
+ * otherwise a clickable row that is currently mouse-hovered gets the hover bar;
+ * otherwise transparent so the panel ground shows through. */
+export declare function lineBackground(line: AppSceneLine | undefined): RGBA;
 export type TextLineRenderable = TextRenderable & {
     setRigSceneLine?(line: AppSceneLine | undefined): void;
 };