@h-rig/omp-extension-plugin 0.0.6-alpha.191 → 0.0.6-alpha.192

package/dist/src/cockpit/board-views.d.ts

@@ -16,6 +16,7 @@ export declare function hairline(width: number): string;
  * sort modes. Selection tracks the run, not the row index. */
 /** Board-styled menu/detail rows, used for every non-live family surface. */
 export declare class BoardSettingsList implements Component {
+    #private;
     items: BoardSettingItem[];
     selected: number;
     title: string;
@@ -26,6 +27,10 @@ export declare class BoardSettingsList implements Component {
     private firstSelectable;
     moveSelection(delta: number): void;
     selectedItem(): BoardSettingItem | null;
+    /** Item index under a rendered line, when that line is a selectable row. */
+    hitTest(line: number): number | undefined;
+    /** Select the item at `index` (mouse click); true when the selection moved. */
+    selectIndex(index: number): boolean;
     invalidate(): void;
     render(width: number): string[];
     private renderLines;
@@ -84,6 +89,7 @@ export type DetailModel = {
     actions: DetailAction[];
 };
 export declare class DetailComposer implements Component {
+    #private;
     model: DetailModel;
     selected: number;
     tick: number;
@@ -93,6 +99,10 @@ export declare class DetailComposer implements Component {
     private clamp;
     moveSelection(delta: number): void;
     selectedAction(): DetailAction | null;
+    /** Enabled-action index under a rendered line (mouse hit-testing). */
+    hitTestAction(line: number): number | undefined;
+    /** Select the enabled action at `index` (mouse click); true when it moved. */
+    selectAction(index: number): boolean;
     scrollBody(delta: number): void;
     resetScroll(): void;
     invalidate(): void;

package/dist/src/cockpit/board-views.js

@@ -4,6 +4,7 @@ import { truncateToWidth } from "@oh-my-pi/pi-tui";
 import {
   accent,
   accentDim,
+  bgPanel,
   bold,
   cyan,
   ink,
@@ -11,10 +12,6 @@ import {
   ink3,
   ink4,
   red,
-  DRONE_WIDTH,
-  renderDroneFrame,
-  renderMicroDroneFrame,
-  RIG_SPINNER_FRAMES,
   screenGlyph,
   sectionDivider,
   statusColor,
@@ -26,11 +23,13 @@ import {
 function hairline(width) {
   return ink4("\u2500".repeat(Math.max(0, width)));
 }
+
 class BoardSettingsList {
   items = [];
   selected = 0;
   title = "";
   emptyMessage = "nothing to show";
+  #rowToIndex = new Map;
   setItems(items) {
     this.items = [...items];
     if (!this.selectableAt(this.selected))
@@ -61,44 +60,77 @@ class BoardSettingsList {
   selectedItem() {
     return this.selectableAt(this.selected) ? this.items[this.selected] : null;
   }
+  hitTest(line) {
+    const index = this.#rowToIndex.get(line);
+    return index !== undefined && this.selectableAt(index) ? index : undefined;
+  }
+  selectIndex(index) {
+    if (!this.selectableAt(index))
+      return false;
+    const moved = this.selected !== index;
+    this.selected = index;
+    return moved;
+  }
   invalidate() {}
   render(width) {
     return this.renderLines(width).map((line) => truncateToWidth(line, Math.max(10, width - 1)));
   }
   renderLines(width) {
+    this.#rowToIndex.clear();
     if (this.items.length === 0) {
       return ["", ` ${ink2(this.emptyMessage)}`, ""];
     }
-    const maxVisible = Math.max(8, Math.min(16, (process.stdout.rows ?? 30) - 10));
+    const maxVisible = Math.max(8, Math.min(18, (process.stdout.rows ?? 30) - 10));
     const start = Math.max(0, Math.min(this.selected - Math.floor(maxVisible / 2), this.items.length - maxVisible));
     const window = this.items.slice(start, start + maxVisible);
-    const valueWidth = Math.min(24, Math.max(10, Math.floor(width * 0.24)));
-    const labelWidth = Math.min(24, Math.max(10, Math.floor(width * 0.26)));
-    const lines = window.flatMap((item, index) => {
+    const labelWidth = Math.min(28, Math.max(10, ...window.map((item) => {
+      const navGlyph = item.id.startsWith("to:") ? 2 : 0;
+      return item.label.length + navGlyph;
+    })));
+    const actionWidth = Math.max(0, ...window.map((item) => item.values?.[0] && item.values[0] !== item.currentValue ? item.values[0].length + 2 : 0));
+    const valueWidth = Math.max(12, width - labelWidth - actionWidth - 8);
+    const lines = [""];
+    for (let index = 0;index < window.length; index += 1) {
+      const item = window[index];
       const absolute = start + index;
       const isSelected = absolute === this.selected;
-      const marker = isSelected ? accent("\u258C") : " ";
+      if (item.id === "title") {
+        lines.push(` ${accent("\u258D")}${bold(ink(item.label))}${item.currentValue ? `  ${ink3(item.currentValue)}` : ""}`);
+        if (item.description)
+          lines.push(`  ${ink4(truncateToWidth(item.description, Math.max(12, width - 4)))}`);
+        lines.push("");
+        continue;
+      }
+      if (item.heading && !item.currentValue) {
+        lines.push(sectionDivider(item.label.toLowerCase(), width));
+        continue;
+      }
       const navGlyph = item.id.startsWith("to:") ? `${screenGlyph(item.id.slice(3))} ` : "";
-      const labelText = truncateToWidth(`${navGlyph}${item.label}`, labelWidth).padEnd(labelWidth);
-      const isTitle = item.id === "title";
+      const labelPlain = truncateToWidth(`${navGlyph}${item.label}`, labelWidth).padEnd(labelWidth);
       const isStatus = item.id.endsWith(":status");
-      const label = isTitle ? accent(labelText) : isSelected ? ink(labelText) : item.heading ? ink3(labelText) : ink2(labelText);
-      const value = !item.currentValue ? ink4("".padEnd(valueWidth)) : isStatus ? statusColor(item.currentValue)(truncateToWidth(`${statusGlyph(item.currentValue)} ${item.currentValue}`, valueWidth).padEnd(valueWidth)) : item.heading ? ink2(truncateToWidth(item.currentValue, valueWidth).padEnd(valueWidth)) : ink3(truncateToWidth(item.currentValue, valueWidth).padEnd(valueWidth));
-      const action = item.values?.[0] && item.values[0] !== item.currentValue ? isSelected ? accent(item.values[0]) : accentDim(item.values[0]) : "";
-      const row = `${marker} ${label} ${value}${action ? ` ${action}` : ""}`;
+      const valuePlain = truncateToWidth(item.currentValue ?? "", valueWidth).padEnd(valueWidth);
+      const label = isSelected ? ink(labelPlain) : item.heading ? ink3(labelPlain) : ink2(labelPlain);
+      const value = !item.currentValue ? ink4(valuePlain) : isStatus ? statusColor(item.currentValue)(truncateToWidth(`${statusGlyph(item.currentValue)} ${item.currentValue}`, valueWidth).padEnd(valueWidth)) : item.heading ? ink2(valuePlain) : ink3(valuePlain);
+      const actionText = item.values?.[0] && item.values[0] !== item.currentValue ? item.values[0] : "";
+      const action = actionText ? isSelected ? accent(`${actionText} \u203A`) : accentDim(actionText) : "";
+      const rail = isSelected ? accent("\u258C") : " ";
+      const body = `${rail} ${label}  ${value}${action ? ` ${action}` : ""}`;
+      if (!item.heading)
+        this.#rowToIndex.set(lines.length, absolute);
+      lines.push(isSelected ? bgPanel(body) : body);
       if (isSelected && item.description) {
-        return [row, `   ${ink4(truncateToWidth(item.description, Math.max(12, width - 5)))}`];
+        if (!item.heading)
+          this.#rowToIndex.set(lines.length, absolute);
+        lines.push(`   ${ink4("\u21B3")} ${ink4(truncateToWidth(item.description, Math.max(12, width - 6)))}`);
       }
-      return [row];
-    });
+    }
     const meta = [];
     if (this.items.length > maxVisible)
-      meta.push(`${this.selected + 1}/${this.items.length}`);
-    if (this.title)
-      meta.push(this.title);
+      meta.push(`${this.selected + 1} of ${this.items.length}`);
     if (meta.length > 0)
-      lines.push(ink4(`   ${meta.join("  \xB7  ")}`));
-    return ["", ...lines, ""];
+      lines.push("", ink4(`   ${meta.join("  \xB7  ")}`));
+    lines.push("");
+    return lines;
   }
 }
 
@@ -190,6 +222,7 @@ class DetailComposer {
   selected = 0;
   tick = 0;
   bodyScroll = 0;
+  #lineToAction = new Map;
   setModel(model) {
     const prevId = this.enabledActions()[this.selected]?.id;
     this.model = model;
@@ -214,6 +247,17 @@ class DetailComposer {
   selectedAction() {
     return this.enabledActions()[this.selected] ?? null;
   }
+  hitTestAction(line) {
+    return this.#lineToAction.get(line);
+  }
+  selectAction(index) {
+    const count = this.enabledActions().length;
+    if (index < 0 || index >= count)
+      return false;
+    const moved = this.selected !== index;
+    this.selected = index;
+    return moved;
+  }
   scrollBody(delta) {
     this.bodyScroll = Math.max(0, this.bodyScroll + delta);
   }
@@ -243,21 +287,45 @@ class DetailComposer {
     }
     if (model.stages && model.stages.length > 0) {
       bottom.push(sectionDivider("pipeline", width));
-      const parts = model.stages.map((stage) => `${statusColor(stage.status)(statusGlyph(stage.status))} ${ink3(stage.label)}`);
-      bottom.push(truncateToWidth(`  ${parts.join(ink4(" \u2192 "))}`, inner));
+      let linePlain = " ";
+      let linePainted = " ";
+      for (let i = 0;i < model.stages.length; i += 1) {
+        const stage = model.stages[i];
+        const sepPlain = linePlain.trim().length > 0 ? " \u2192 " : " ";
+        const cellPlain = `${sepPlain}? ${stage.label}`;
+        if (linePlain.length + cellPlain.length > inner - 2 && linePlain.trim().length > 0) {
+          bottom.push(linePainted);
+          linePlain = "   ";
+          linePainted = "   ";
+        }
+        const sep = linePlain.trim().length > 0 ? ink4(" \u2192 ") : " ";
+        linePlain += cellPlain;
+        linePainted += `${sep}${statusColor(stage.status)(statusGlyph(stage.status))} ${ink3(stage.label)}`;
+      }
+      if (linePainted.trim().length > 0)
+        bottom.push(linePainted);
       bottom.push("");
     }
+    const actionLines = [];
     if (model.actions.length > 0) {
       bottom.push(sectionDivider("actions", width));
       const selId = this.selectedAction()?.id;
+      let enabledIndex = -1;
       for (const action of model.actions) {
         const on = action.enabled !== false;
+        if (on)
+          enabledIndex += 1;
         const isSel = on && action.id === selId;
         const rail = isSel ? accent("\u258C") : " ";
         const labelText = `${action.glyph ? `${action.glyph} ` : ""}${action.label}`;
         const label = !on ? ink4(labelText) : action.danger ? red(labelText) : isSel ? accent(labelText) : ink2(labelText);
         const tail = !on ? ink4(action.value ?? "unavailable") : isSel ? ink3(action.hint ?? action.value ?? "") : ink3(action.value ?? "");
-        bottom.push(`${rail} ${label}${tail ? `  ${tail}` : ""}`);
+        const row = `${rail} ${label}${tail ? `  ${tail}` : ""}`;
+        if (on)
+          actionLines.push(enabledIndex);
+        else
+          actionLines.push(-1);
+        bottom.push(isSel ? bgPanel(row) : row);
       }
     }
     const body = [];
@@ -282,10 +350,25 @@ class DetailComposer {
       }
     }
     const out = [...top, ...body, ...bottom];
+    const mapActions = (linesOut) => {
+      this.#lineToAction.clear();
+      if (actionLines.length === 0)
+        return;
+      const actionCount = model.actions.length;
+      const firstActionLine = linesOut.length - actionCount;
+      for (let i = 0;i < actionCount; i += 1) {
+        const enabledIdx = actionLines[i];
+        if (enabledIdx >= 0)
+          this.#lineToAction.set(firstActionLine + i, enabledIdx);
+      }
+    };
     if (out.length > budget) {
       const keepTail = Math.min(bottom.length, budget - top.length);
-      return [...top, ...out.slice(out.length - keepTail)].map((line) => truncateToWidth(line, Math.max(10, width - 1)));
+      const clipped = [...top, ...out.slice(out.length - keepTail)];
+      mapActions(clipped);
+      return clipped.map((line) => truncateToWidth(line, Math.max(10, width - 1)));
     }
+    mapActions(out);
     return out.map((line) => truncateToWidth(line, Math.max(10, width - 1)));
   }
 }

package/dist/src/cockpit/extension.d.ts

@@ -68,7 +68,7 @@ declare function runListActionHints(run: RunRecord, source?: RunClassificationSo
 }[];
 declare function taskDetailModel(state: RigFlowState, server: RigServerState | null, projection: TaskProjectionCapability): DetailModel;
 declare function runDetailModel(run: RunRecord, source?: RunClassificationSource): DetailModel;
-declare function itemsFor(screen: RigScreen, runs: readonly RunRecord[], actionRowsEnabled: boolean, _selectedRunId: string | null, state?: RigFlowState, catalog?: readonly ScreenDescriptor[], projection?: TaskProjectionCapability): SettingItem[];
+declare function itemsFor(screen: RigScreen, runs: readonly RunRecord[], actionRowsEnabled: boolean, _selectedRunId: string | null, state?: RigFlowState, catalog?: readonly ScreenDescriptor[], _projection?: TaskProjectionCapability): SettingItem[];
 export declare const __rigExtensionTest: {
     itemsFor: typeof itemsFor;
     taskDetailModel: typeof taskDetailModel;