@femtomc/mu-agent 26.2.110 → 26.2.111

package/dist/extensions/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/extensions/ui.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,+BAA+B,CAAC;AAs/BpF,wBAAgB,WAAW,CAAC,EAAE,EAAE,YAAY,QA6N3C;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/extensions/ui.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,+BAA+B,CAAC;AAsqCpF,wBAAgB,WAAW,CAAC,EAAE,EAAE,YAAY,QA6N3C;AAED,eAAe,WAAW,CAAC"}

package/dist/extensions/ui.js

@@ -1,5 +1,5 @@
 import { normalizeUiDocs, parseUiDoc, resolveUiStatusProfileName, uiStatusProfileWarnings, } from "@femtomc/mu-core";
-import { matchesKey } from "@mariozechner/pi-tui";
+import { matchesKey, truncateToWidth, visibleWidth } from "@mariozechner/pi-tui";
 import { registerMuSubcommand } from "./mu-command-dispatcher.js";
 const UI_DISPLAY_DOCS_MAX = 16;
 const UI_PICKER_COMPONENTS_MAX = 8;
@@ -8,6 +8,13 @@ const UI_PICKER_KEYVALUE_ROWS_MAX = 4;
 const UI_SESSION_KEY_FALLBACK = "__mu_ui_active_session__";
 const UI_PROMPT_PREVIEW_MAX = 160;
 const UI_INTERACT_SHORTCUT = "ctrl+shift+u";
+const UI_PICKER_PANEL_MIN_WIDTH = 56;
+const UI_PICKER_PANEL_MAX_WIDTH = 118;
+const UI_PICKER_PANEL_WIDTH_RATIO = 0.9;
+const UI_PICKER_PANEL_TOP_MARGIN = 1;
+const UI_PICKER_PANEL_BOTTOM_MARGIN = 1;
+const UI_ENABLE_MOUSE_TRACKING = "\x1b[?1000h\x1b[?1006h";
+const UI_DISABLE_MOUSE_TRACKING = "\x1b[?1000l\x1b[?1006l";
 const UI_INTERACT_OVERLAY_OPTIONS = {
     anchor: "top-left",
     row: 0,
@@ -487,6 +494,34 @@ function boundedIndex(index, length) {
     }
     return index;
 }
+function parseSgrMouseEvent(data) {
+    const match = /^\x1b\[<(\d+);(\d+);(\d+)([Mm])$/.exec(data);
+    if (!match) {
+        return null;
+    }
+    const buttonCode = Number.parseInt(match[1] ?? "", 10);
+    const col = Number.parseInt(match[2] ?? "", 10);
+    const row = Number.parseInt(match[3] ?? "", 10);
+    if (!Number.isInteger(buttonCode) || !Number.isInteger(col) || !Number.isInteger(row)) {
+        return null;
+    }
+    return {
+        buttonCode,
+        col,
+        row,
+        release: match[4] === "m",
+    };
+}
+function isPrimaryMouseRelease(event) {
+    if (!event.release) {
+        return false;
+    }
+    if (event.buttonCode >= 64) {
+        return false;
+    }
+    const primaryButton = event.buttonCode & 0b11;
+    return primaryButton === 0;
+}
 function pickerComponentLines(component) {
     switch (component.kind) {
         case "text":
@@ -525,13 +560,22 @@ function pickerComponentLines(component) {
     }
 }
 class UiActionPickerComponent {
+    #tui;
     #entries;
     #theme;
     #done;
     #mode = "doc";
     #docIndex = 0;
     #actionIndex = 0;
+    #mouseEnabled = false;
+    #panelRowStart = 1;
+    #panelRowEnd = 1;
+    #panelColStart = 1;
+    #panelColEnd = 1;
+    #docHitRows = new Map();
+    #actionHitRows = new Map();
     constructor(opts) {
+        this.#tui = opts.tui;
         this.#entries = opts.entries;
         this.#theme = opts.theme;
         this.#done = opts.done;
@@ -549,6 +593,21 @@ class UiActionPickerComponent {
                 this.#mode = "action";
             }
         }
+        this.#enableMouseTracking();
+    }
+    #enableMouseTracking() {
+        if (this.#mouseEnabled) {
+            return;
+        }
+        this.#tui.terminal.write(UI_ENABLE_MOUSE_TRACKING);
+        this.#mouseEnabled = true;
+    }
+    #disableMouseTracking() {
+        if (!this.#mouseEnabled) {
+            return;
+        }
+        this.#tui.terminal.write(UI_DISABLE_MOUSE_TRACKING);
+        this.#mouseEnabled = false;
     }
     #currentEntry() {
         return this.#entries[this.#docIndex];
@@ -583,7 +642,36 @@ class UiActionPickerComponent {
             action,
         });
     }
+    #handleMouseEvent(event) {
+        if (!isPrimaryMouseRelease(event)) {
+            return;
+        }
+        if (event.row < this.#panelRowStart ||
+            event.row > this.#panelRowEnd ||
+            event.col < this.#panelColStart ||
+            event.col > this.#panelColEnd) {
+            return;
+        }
+        const docIndex = this.#docHitRows.get(event.row);
+        if (docIndex !== undefined) {
+            this.#docIndex = boundedIndex(docIndex, this.#entries.length);
+            this.#actionIndex = boundedIndex(this.#actionIndex, this.#currentActions().length);
+            this.#mode = "doc";
+            return;
+        }
+        const actionIndex = this.#actionHitRows.get(event.row);
+        if (actionIndex !== undefined) {
+            this.#mode = "action";
+            this.#actionIndex = boundedIndex(actionIndex, this.#currentActions().length);
+            this.#submit();
+        }
+    }
     handleInput(data) {
+        const mouse = parseSgrMouseEvent(data);
+        if (mouse) {
+            this.#handleMouseEvent(mouse);
+            return;
+        }
         if (matchesKey(data, "escape")) {
             this.#done(null);
             return;
@@ -632,67 +720,120 @@ class UiActionPickerComponent {
     invalidate() {
         // No cached state.
     }
+    dispose() {
+        this.#disableMouseTracking();
+    }
     render(width) {
-        const maxWidth = Math.max(24, width - 2);
-        const lines = [];
-        lines.push(this.#theme.fg("accent", short("Programmable UI", maxWidth)));
-        lines.push(this.#theme.fg("dim", short("↑/↓ move · tab switch · enter select/submit · esc cancel", maxWidth)));
-        lines.push("");
-        lines.push(this.#theme.fg(this.#mode === "doc" ? "accent" : "dim", short(`Documents (${this.#entries.length})`, maxWidth)));
+        const panelTargetWidth = Math.max(UI_PICKER_PANEL_MIN_WIDTH, Math.min(UI_PICKER_PANEL_MAX_WIDTH, Math.floor(width * UI_PICKER_PANEL_WIDTH_RATIO)));
+        const panelWidth = Math.max(4, Math.min(width, panelTargetWidth));
+        const innerWidth = Math.max(1, panelWidth - 2);
+        const maxContentWidth = Math.max(8, innerWidth);
+        const content = [];
+        const docHitRowsByContentIndex = new Map();
+        const actionHitRowsByContentIndex = new Map();
+        const pushContent = (line) => {
+            content.push(truncateToWidth(line, innerWidth, "…", true));
+        };
+        pushContent(this.#theme.fg("accent", short("Programmable UI", maxContentWidth)));
+        pushContent(this.#theme.fg("dim", short("↑/↓ move · tab switch · enter select/submit · esc cancel · click action to submit", maxContentWidth)));
+        pushContent("");
+        pushContent(this.#theme.fg(this.#mode === "doc" ? "accent" : "dim", short(`Documents (${this.#entries.length})`, maxContentWidth)));
         for (let idx = 0; idx < this.#entries.length; idx += 1) {
             const entry = this.#entries[idx];
             const active = idx === this.#docIndex;
             const marker = active ? (this.#mode === "doc" ? "▶" : "▸") : " ";
             const label = `${marker} ${entry.doc.ui_id} · ${entry.doc.title}`;
-            lines.push(this.#theme.fg(active ? "accent" : "muted", short(label, maxWidth)));
+            docHitRowsByContentIndex.set(content.length, idx);
+            pushContent(this.#theme.fg(active ? "accent" : "muted", short(label, maxContentWidth)));
         }
         const selectedDoc = this.#currentEntry().doc;
         if (selectedDoc.summary) {
-            lines.push("");
-            lines.push(this.#theme.fg("dim", short(`Summary: ${selectedDoc.summary}`, maxWidth)));
+            pushContent("");
+            pushContent(this.#theme.fg("dim", short(`Summary: ${selectedDoc.summary}`, maxContentWidth)));
         }
-        lines.push("");
-        lines.push(this.#theme.fg("dim", short(`Components (${selectedDoc.components.length})`, maxWidth)));
+        pushContent("");
+        pushContent(this.#theme.fg("dim", short(`Components (${selectedDoc.components.length})`, maxContentWidth)));
         const visibleComponents = selectedDoc.components.slice(0, UI_PICKER_COMPONENTS_MAX);
         for (const component of visibleComponents) {
             const componentLines = pickerComponentLines(component);
             for (let idx = 0; idx < componentLines.length; idx += 1) {
                 const line = componentLines[idx];
                 const prefix = idx === 0 ? "  " : "    ";
-                lines.push(this.#theme.fg("text", short(`${prefix}${line}`, maxWidth)));
+                pushContent(this.#theme.fg("text", short(`${prefix}${line}`, maxContentWidth)));
             }
         }
         if (selectedDoc.components.length > visibleComponents.length) {
-            lines.push(this.#theme.fg("muted", short(`  ... (+${selectedDoc.components.length - visibleComponents.length} more components)`, maxWidth)));
+            pushContent(this.#theme.fg("muted", short(`  ... (+${selectedDoc.components.length - visibleComponents.length} more components)`, maxContentWidth)));
         }
         const actions = this.#currentActions();
-        lines.push("");
-        lines.push(this.#theme.fg(this.#mode === "action" ? "accent" : "dim", short(`Actions (${actions.length})`, maxWidth)));
+        pushContent("");
+        pushContent(this.#theme.fg(this.#mode === "action" ? "accent" : "dim", short(`Actions (${actions.length})`, maxContentWidth)));
         for (let idx = 0; idx < actions.length; idx += 1) {
             const action = actions[idx];
             const active = idx === this.#actionIndex;
             const marker = active ? (this.#mode === "action" ? "▶" : "▸") : " ";
             const label = `${marker} ${action.id} · ${action.label}`;
-            lines.push(this.#theme.fg(active ? "accent" : "text", short(label, maxWidth)));
+            actionHitRowsByContentIndex.set(content.length, idx);
+            pushContent(this.#theme.fg(active ? "accent" : "text", short(label, maxContentWidth)));
         }
         const action = this.#currentAction();
         if (action?.description) {
-            lines.push("");
-            lines.push(this.#theme.fg("dim", short(`Ask: ${action.description}`, maxWidth)));
+            pushContent("");
+            pushContent(this.#theme.fg("dim", short(`Ask: ${action.description}`, maxContentWidth)));
         }
         if (action?.component_id) {
-            lines.push(this.#theme.fg("dim", short(`Targets component: ${action.component_id}`, maxWidth)));
+            pushContent(this.#theme.fg("dim", short(`Targets component: ${action.component_id}`, maxContentWidth)));
         }
         const commandText = action ? actionCommandText(action) : null;
         if (commandText) {
-            lines.push("");
-            lines.push(this.#theme.fg("dim", short(`Prompt template: ${commandText}`, maxWidth)));
+            pushContent("");
+            pushContent(this.#theme.fg("dim", short(`Prompt template: ${commandText}`, maxContentWidth)));
+        }
+        const topMarginRows = Math.max(0, UI_PICKER_PANEL_TOP_MARGIN);
+        const bottomMarginRows = Math.max(0, UI_PICKER_PANEL_BOTTOM_MARGIN);
+        const leftPadWidth = Math.max(0, Math.floor((width - panelWidth) / 2));
+        const leftPad = " ".repeat(leftPadWidth);
+        const frame = [];
+        for (let row = 0; row < topMarginRows; row += 1) {
+            frame.push("");
+        }
+        const title = " mu_ui ";
+        const titleWidth = Math.min(innerWidth, visibleWidth(title));
+        const leftRule = "─".repeat(Math.max(0, Math.floor((innerWidth - titleWidth) / 2)));
+        const rightRule = "─".repeat(Math.max(0, innerWidth - titleWidth - leftRule.length));
+        frame.push(`${leftPad}${this.#theme.fg("borderAccent", `╭${leftRule}`)}${this.#theme.fg("accent", title)}${this.#theme.fg("borderAccent", `${rightRule}╮`)}`);
+        this.#docHitRows.clear();
+        this.#actionHitRows.clear();
+        const contentStartRow = frame.length + 1;
+        for (let idx = 0; idx < content.length; idx += 1) {
+            const line = content[idx] ?? "";
+            const visible = visibleWidth(line);
+            const fill = " ".repeat(Math.max(0, innerWidth - visible));
+            frame.push(`${leftPad}${this.#theme.fg("border", "│")}${this.#theme.bg("customMessageBg", `${line}${fill}`)}${this.#theme.fg("border", "│")}`);
+            const row = contentStartRow + idx;
+            const docIndex = docHitRowsByContentIndex.get(idx);
+            if (docIndex !== undefined) {
+                this.#docHitRows.set(row, docIndex);
+            }
+            const actionIndex = actionHitRowsByContentIndex.get(idx);
+            if (actionIndex !== undefined) {
+                this.#actionHitRows.set(row, actionIndex);
+            }
+        }
+        frame.push(`${leftPad}${this.#theme.fg("borderAccent", `╰${"─".repeat(innerWidth)}╯`)}`);
+        for (let row = 0; row < bottomMarginRows; row += 1) {
+            frame.push("");
         }
-        return lines;
+        this.#panelRowStart = topMarginRows + 1;
+        this.#panelRowEnd = this.#panelRowStart + content.length + 1;
+        this.#panelColStart = leftPadWidth + 1;
+        this.#panelColEnd = leftPadWidth + panelWidth;
+        return frame;
     }
 }
 async function pickUiActionInteractively(opts) {
-    const selected = await opts.ctx.ui.custom((_tui, theme, _keybindings, done) => new UiActionPickerComponent({
+    const selected = await opts.ctx.ui.custom((tui, theme, _keybindings, done) => new UiActionPickerComponent({
+        tui,
         entries: opts.entries,
         theme: theme,
         done,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@femtomc/mu-agent",
-	"version": "26.2.110",
+	"version": "26.2.111",
 	"description": "Shared operator runtime for mu assistant sessions and serve extensions.",
 	"keywords": [
 		"mu",
@@ -25,7 +25,7 @@
 		"themes/**"
 	],
 	"dependencies": {
-		"@femtomc/mu-core": "26.2.110",
+		"@femtomc/mu-core": "26.2.111",
 		"@mariozechner/pi-agent-core": "^0.54.2",
 		"@mariozechner/pi-ai": "^0.54.2",
 		"@mariozechner/pi-coding-agent": "^0.54.2",